Theming for Gutenburg
![](https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Wordpress-Logo.svg/2000px-Wordpress-Logo.svg.png)
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
![](https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Wordpress-Logo.svg/2000px-Wordpress-Logo.svg.png)
Editor Styles!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/954530/images/5772276/Screenshot_2019-02-12_18.24.28.png)
Absolute goldmine!
Custom Blocks πͺπ½
![](https://s3.amazonaws.com/media-p.slid.es/uploads/954530/images/5772285/Screenshot_2019-02-12_18.27.52.png)
Create Guten Block!
Thanks
![](https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Wordpress-Logo.svg/2000px-Wordpress-Logo.svg.png)
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
- 551