Global Colors:
Some themes will have global colors that will reflect into Gutenberg, however if they do not you can use the following snippet. Simply highlight and paste the red text for every color you want
// Adds support for editor color palette.
add_theme_support( ‘editor-color-palette’, array(
array(
‘name’ => ( ‘Light Gray’, ‘advmist’ ), ‘slug’ => ‘light-gray’, ‘color’ => ‘#f5f5f5’, ),
) );
Add Gutenberg Styles
Below is a snippet if you need to edit any backend styles to make editing websites easier. This does not effect the front end of the website.
add_action( ‘enqueue_block_editor_assets’, function() {
$css=’ YOUR CSS HERE ‘;
wp_add_inline_style( ‘generate-block-editor-styles’, $css );
}, 100 );
By default and at the time of writing Gutenberg only display blocks based on the global theme settings. In other words if the container on the theme is set to 1500px the block will display only that wide which may look wrong.
.wp-block.is-reusable{max-width: 100%;}
We may want to force theme container sizes globally on the backend in order to better know when/if we need a container. Certain objects that use Gutenberg, however, may not load these settings so we need to add them to our stylesheet. Below is an example on how to set the GeneratePress Elements to reflect a global theme container of 1500px with 20px of left and right padding.
.post-type-gp_elements .is-root-container>.wp-block[data-align=wide]{max-width:1500px;}
.post-type-gp_elements .is-root-container>.wp-block[data-align=full]{max-width:100%;}
.post-type-gp_elements .is-root-container>.wp-block{max-width: calc(1500px – 20px – 20px);}
GenerateBlocks Specific
While we may consider other options for block plugins or this plugin may update eventually to support this if you want to change the default padding on container blocks from 40px to something else use the below snippet.
// Cancels the GP automated 40px padding.
add_filter( ‘generateblocks_defaults’, function( $defaults ) {
$defaults[‘container’][‘paddingTop’] = ‘0’;
$defaults[‘container’][‘paddingRight’] = ’20’;
$defaults[‘container’][‘paddingBottom’] = ‘0’;
$defaults[‘container’][‘paddingLeft’] = ’20’;
return $defaults;
} );