## 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...):
```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:
```php
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:
```php
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!)
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
### 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
```php
/**
* 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' );
```