Theming for Gutenburg
Most themes are Gutenberg compatible
There are some extra things we can do as developers to make the experience better
You may have already used the functions before!
<?php
function my_namespace_register_theme_support(){
add_theme_support( 'slug-of-feature' );
add_theme_support( 'slug-of-feature', $args );
}
add_action( 'after_theme_setup', 'my_namespace_register_theme_support' );Alignment
<?php
function my_namespace_register_theme_support(){
add_theme_support( 'align-wide' );
add_theme_support( 'align-full' );
}
Colour Palettes 🎨
<?php
function my_namespace_register_theme_support(){
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',
),
) );
}
Font Sizes ✍🏽
<?php
function my_namespace_register_theme_support(){
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'Small', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'Normal', 'themeLangDomain' ),
'size' => 16,
'slug' => 'normal'
)
) );
}
Theme Implementation
- Applies classes
- Up to CSS to style
- Much better than inline styles
Block Widths 🎉
/* Main column width */
.wp-block {
max-width: 720px;
}
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
max-width: 1080px;
}
/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
max-width: none;
}Custom Colours 🎉
/* Custom Colour classes */
.has-strong-magenta-background-color {
background-color: #313131;
}
.has-strong-magenta-color {
color: #f78da7;
}
}Font Sizes 🎉
/* Custom Font Size classes */
.has-regular-font-size {
font-size: 16px;
}
.has-huge-font-size {
font-size: 48px;
}Bonus: Lock them down!
<?php
function my_namespace_declare_theme_support(){
add_theme_support('disable-custom-font-sizes');
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_theme_setup', 'my_namesapce_declare_theme_support' );Going Further
Editor Styles!
Absolute goldmine!
Custom Blocks 💪🏽
Create Guten Block!
Thanks
Gutenberg theme building tips for developers - WordPress Adelaide
By WordPress Adelaide
Gutenberg theme building tips for developers - WordPress Adelaide
Quick look into some of the things we can do to better style the editor and control gutenberg
