Gutenberg notes

Regexing Gutenberg Blocks via their HTML comments (PHP)

The regex pattern * for getting the markup of Gutenberg blocks is:

(<!-- wp:core\/(.*) ?({.*})? -->)([^;]*)(<!-- \/wp:core\/(\2).* -->)

See on RegExr.
( * = best I could come up with atm)

Capture Groups:

• $1 = opening HTML comment
  
• $2 = block type (eg. gallery) – repeated at the end via the (\2)(doc)
• $3 = params eg {"id":1233}  or empty if none
• $4 = content / block markup
• $5 = closing HTML comment

Example

$pattern = '/(<!-- wp:core\/(.*) ?({.*})? -->)([^;]*)(<!-- \/wp:core\/(\2).* -->)/';

$match = preg_match_all( $pattern, $content, $matches); // returns bool

if( $match ){
  // iterate over $matches and dig into the capture groups 0-5 (sub-arrays)
}

Backend Theming

function themeslug_gutenber_editor_scripts(){
    wp_enqueue_style( 'themeslug-editor-styles-gb', get_theme_file_uri( 'assets/css/editor-gb.css' ));
}

add_action( 'enqueue_block_editor_assets', 'themeslug_gutenber_editor_scripts' );

Disable Gutenberg default Styles

function themeslug_remove_gutenberg_default_styles() {
	if( !is_admin() ){
		//wp_dequeue_style( 'wp-blocks'); // Gutenberg 2.4
		//wp_dequeue_style( 'wp-core-blocks'); // Gutenberg 3.x
		wp_dequeue_style( 'wp-block-library'); // Gutenberg 3.?.x
	}
}
add_action( 'wp_print_styles', 'themeslug_remove_gutenberg_default_styles' );