X

How to Get Your WordPress Theme Gutenberg-Ready & Compatible

Gutenberg is more than an editor. While the editor is the focus right now, the project will ultimately impact the entire publishing experience including customization (the next focus area). WooCommerce Product Blocks Pro Gutenberg

COMPATIBILITY

Posts are backwards compatible, and shortcodes will still work. We are continuously exploring how highly-tailored metaboxes can be accommodated, and are looking at solutions ranging from a plugin to disable Gutenberg to automatically detecting whether to load Gutenberg or not. While we want to make sure the new editing experience from writing to publishing is user-friendly, we’re committed to finding a good solution for highly-tailored existing sites. Free Gutenberg WordPress Starter Theme

There are a few new concepts to consider when building themes:

  • Editor Color Palette – A default set of colors is provided, but themes can register their own and optionally lock users into picking from the defined palette.
  • Editor Text Size Palette – A default set of sizes is provided, but themes and register their own and optionally lock users into picking from preselected sizes.
  • Responsive Embeds – Themes must opt-in to responsive embeds.
  • Frontend & Editor Styles – To get the most out of blocks, theme authors will want to make sure Core styles look good and opt-in, or write their own styles to best fit their theme.
  • Dark Mode – If a Theme is a Dark Theme with a dark background containing light text, the theme author can opt-in to the Dark Mode.

 

1. Wide Alignment:

 

  1. In Appearance–Editor– Functions.php add this code for wide alignment:

add_theme_support( ‘align-wide’ );

 

2. To opt-in for one of these features, call add_theme_support in the functions.php file of the theme. For example:

function mytheme_setup_theme_supported_features() {
add_theme_support( ‘editor-color-palette’, array(
array(
‘name’ => __( ‘strong magenta’, ‘themeLangDomain’ ),
‘slug’ => ‘strong-magenta’,
‘color’ => ‘#a156b4’,
),
array(
‘name’ => __( ‘light grayish magenta’, ‘themeLangDomain’ ),
‘slug’ => ‘light-grayish-magenta’,
‘color’ => ‘#d0a5db’,
),
array(
‘name’ => __( ‘very light gray’, ‘themeLangDomain’ ),
‘slug’ => ‘very-light-gray’,
‘color’ => ‘#eee’,
),
array(
‘name’ => __( ‘very dark gray’, ‘themeLangDomain’ ),
‘slug’ => ‘very-dark-gray’,
‘color’ => ‘#444’,
),
) );
}

add_action( ‘after_setup_theme’, ‘mytheme_setup_theme_supported_features’ );

 

Gutenberg Full Handbook Support

 

Gutenberg is a big change, and there will be ways to ensure that existing functionality (like shortcodes and meta-boxes) continue to work while allowing developers the time and paths to transition effectively. Ultimately, it will open new opportunities for plugin and theme developers to better serve users through a more engaging and visual experience that takes advantage of a toolset supported by core.

Gutenberg has three planned stages. The first, aimed for inclusion in WordPress 5.0, focuses on the post editing experience and the implementation of blocks. This initial phase focuses on a content-first approach. The use of blocks, as detailed above, allows you to focus on how your content will look without the distraction of other configuration options. This ultimately will help all users present their content in a way that is engaging, direct, and visual. Best WordPress Gutenberg editor blocks plugins.