Skip to content

Instantly share code, notes, and snippets.

@megclaypool

megclaypool/Block Names.md

Last active August 16, 2021 00:50
Show Gist options
  • Save megclaypool/39dac8a1bd4e2b4cadd3af0021c1017d to your computer and use it in GitHub Desktop.
Save megclaypool/39dac8a1bd4e2b4cadd3af0021c1017d to your computer and use it in GitHub Desktop.
Download ZIP
[Setting up custom GUI style options for blocks in WP Gutenberg] Bill Erickson's [Block Styles in Gutenberg](https://www.billerickson.net/block-styles-in-gutenberg/) see Contra Costa backend for example :)
Raw
Block Names.md

List of block names You need to know the full block name in order to attach or remove styles from it. Here’s a list of all the core blocks (excluding all the embed ones):

core/paragraph
core/image
core/heading
core/gallery
core/list
core/quote
core/audio
core/cover
core/file
core/video
core/preformatted
core/code
core/freeform
core/html
core/pullquote
core/table
core/verse
core/button
core/columns
core/media-text
core/more
core/nextpage
core/separator
core/spacer
core/shortcode
core/archives
core/categories
core/latest-comments
core/latest-posts

Raw
find name.md

Finding a block’s name

A simple way to find the block name is to insert the block in a page, (temporarily!) paste the following code into functions.php, and then view the page. Scroll down to the bottom to find the names of all the blocks on the page

/**
 * Display Post Blocks 
 *
 */
function rootid_display_post_blocks() {
  global $post;
  echo("<pre>");
  print_r( esc_html( $post->post_content ) );
  echo("</pre>");
}
add_action( 'wp_footer', 'rootid_display_post_blocks' );
Raw
How To.md

Setting up a GUI interface so clients can choose preset custom "styles" for individual Gutenberg blocks

  • Create a javascript file in your dist/js/ directory (or wherever makes sense in your theme). Title it something like gutenberg-editor-block-styles.js
  • Add the following to functions.php (or a php file included in functions.php...):
 /* Gutenberg scripts and styles
 * @see https://www.billerickson.net/block-styles-in-gutenberg/
 */
function rootid_gutenberg_editor_scripts() {

	wp_enqueue_script(
		'rootid-gutenberg-editor-styles', 
		get_stylesheet_directory_uri() . '/dist/scripts/gutenberg-editor-block-styles.js',
		array( 'wp-blocks', 'wp-dom' ), 
		filemtime( get_stylesheet_directory() . '/dist/scripts/gutenberg-editor-block-styles.js' ),
		true
  );
}
add_action( 'enqueue_block_editor_assets', 'rootid_gutenberg_editor_scripts' );
  • In the js file you created, paste the following:
wp.domReady( () => {
  
 
} );

Inside the wp.domReady( () => { function, you can both remove built-in styles and create new styles for any block type in Gutenberg: core blocks and custom blocks from plugins. All you need is to find the block name so you can attach your custom styles to it.

Here's an example of removing the built-in styles from the core/table block and adding some new ones:

wp.domReady( () => {
  wp.blocks.unregisterBlockStyle( 'core/table', 'regular' );
  wp.blocks.unregisterBlockStyle( 'core/table', 'stripes' );

  wp.blocks.registerBlockStyle( 'core/table', {
    name: 'center-aligned',
    label: 'Centered with Stripes',
  } );

  wp.blocks.registerBlockStyle( 'core/table', {
    name: 'stripes-center',
    label: 'Centered with Stripes',
  } );
} );

Each registerBlockStyle creates an entry on that block's GUI styles menu. The label of each style matches the label attribute. If you select that style (and you can only select one at a type, darnit!) it applies a css class to your block: is-style-<name_attribute>

Then you need to create styles to customize your block.

This is basically a training-wheels approach approach for clients to clicking the Advanced tab and pasting in an "Additional CSS class". In fact, after you apply a style you can go look at the Additional CSS class box and it will have automagically filled in the class.

Good news: while selecting the various styles toggle them in the Additional CSS class box, they DON'T seem to effect other classes that are already there. So you can apply custom styles in the CSS box and let your clients happily toggle "styles" without messing each other up. (OTOH if you've got a mystery style and you can't figure out where it's coming from, go check that CSS box!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment