// Full width Gutenberg editor
add_action('admin_head', 'editor_full_width_gutenberg');
function editor_full_width_gutenberg() {
echo '<style>
.block-editor__container .wp-block {
max-width: none !important;
}
.editor-styles-wrapper {
padding: 5% !important;
}
/*code editor*/
.edit-post-text-editor__body,edit-post-visual-editor {
max-width: none !important;
margin-left: 5%;
margin-right: 5%;
}
</style>';
}
// add styles to gutenberg
function gutenbergtheme_editor_styles() {
wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
}
add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );Category Archives: Gutenberg
Gutenburg block editor styles
New JS file (eg theme/js/editor.js)
wp.domReady( () => {
wp.blocks.registerBlockStyle( ‘core/paragraph’, [
{
name: ‘default’,
label: ‘Default’,
isDefault: true,
},
{
name: ‘intro’,
label: ‘Intro’,
}
]);
} );
New editor CSS file (eg theme/my-editor.css)
/* Block editor styles */
p.is-style-intro {font-size:30px!important;line-height:40px!important;} /* seem to need "!important" for font-size & line height */
/* tweaks to make block editor preview look more accurate */
.block-editor-block-preview__content p.is-style-intro {font-size:40px!important;line-height:60px!important; font-weight: bold;} /* little preview */
.block-editor-block-switcher__preview p.is-style-intro {font-size:40px!important;line-height:60px!important;} /* larger pop-out preview */
Functions file additions
/**
* Gutenberg scripts and styles
* @link https://www.billerickson.net/block-styles-in-gutenberg/
*
* enqueue_block_editor_assets = load in backend only
* enqueue_block_assets = load in front and backend
*/
function be_gutenberg_scripts() {
wp_enqueue_script(
‘be-editor’,
get_stylesheet_directory_uri() . ‘/js/editor.js’,
array( ‘wp-blocks’, ‘wp-dom’ ),
filemtime( get_stylesheet_directory() . ‘/js/editor.js’ ),
true
);
}
add_action( ‘enqueue_block_editor_assets’, ‘be_gutenberg_scripts’ );
function be_gutenberg_styles() {
wp_enqueue_style(
‘be-editor-styles’,
get_stylesheet_directory_uri() . ‘/my-editor-styles.css’,
false,
filemtime( plugin_dir_path( __FILE__ ) . ‘my-editor-styles.css’ )
);
}
add_action( ‘enqueue_block_editor_assets’, ‘be_gutenberg_styles’ );
And style for front end!
p.is-style-intro {font-size: 30px;line-height: 40px;color:magenta;}