Following on from last week's Statamic Article, let's take a look at flexbile content modeling with Wordpress. 

Note this is about content. It isn't page building in the sense of designing templates like something like BeaverBuilder or Divi does. It is for populating the content column within your page template.  It enables that to be a more dynamic experience, allowing editors to create banners, forms or multimedia embeds with ease.

Flexible content is now baked right into wordpress in the form of it's Gutenburg editor. Gutenburg enables content to be built up from predefined Blocks.  Gutenburg comes preloaded with tons and tons of block types. 

Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.

Block types include embedding Videos, Twitter, creating banners with background colors or images.  Creating multi-column content.  The list goes on.  Possibly too many options!

If you want to configure which blocks are available to your editors, you can do that in your functions.php file:

add_filter( 'allowed_block_types', 'will_allowed_block_types' );

function will_allowed_block_types( $allowed_blocks ) {

	return array(
		'core/image',
		'core/paragraph',
		'core/heading',
		'core/list'
	);

}

 Which results in just the basic list specified:

Alternatively, you can lean into what is available by using the Patterns tab, which allows you to choose a pre-built collection of blocks to create content.  They appear on your page looking great with dummy copy and images. Just replace with your own and you are done. 

Going still further, there are plugins to add more block types.  Generally, I'd suggest not doing that unless there is something you really need, except of course, for forms.  To add forms into your page flow, install the Gravity Forms plugin. Then create a form in the usual way, hop back into your demo page and add a form block. Choose the form you just made and boom. It's on your page. 

Some of the block types include color pickers for fonts and backgrounds.  This is a bit of a scary concept for a designer as the site style can quickly fly out of the window if editors have too much power.  Luckily Gutenburg can be configured to only offer your predefined color palettes. 

First define the colors in your functions.php

function wpdc_add_custom_gutenberg_color_palette() {
	add_theme_support(
		'editor-color-palette',
		[
			[
				'name'  => esc_html__( 'Brown', 'wpdc' ),
				'slug'  => 'brown',
				'color' => '#3a3335',
			],
			[
				'name'  => esc_html__( 'Orange', 'wpdc' ),
				'slug'  => 'orange',
				'color' => '#f0544f',
			],
			[
				'name'  => esc_html__( 'Light Green', 'wpdc' ),
				'slug'  => 'light-green',
				'color' => '#c6d8d3',
			],

		]
	);
}
add_action( 'after_setup_theme', 'wpdc_add_custom_gutenberg_color_palette' );

function wpdc_disable_gutenberg_custom_colour_picker() {
	add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'wpdc_disable_gutenberg_custom_colour_picker' );

And add the colors to your CSS

.has-brown-background-color {
	background-color: #3a3335;
}

.has-brown-color {
	color: #3a3335;
}

.has-orange-background-color {
	background-color: #f0544f;
}

.has-orange-color {
	color: #f0544f;
}

.has-light-green-background-color {
	background-color: #c6d8d3;
}

.has-light-green-color {
color: #c6d8d3;
}

And now you can only choose my orange and browns.  

Note one cool feature in the screenshot above. If you choose a font color and background color that do not have enough contrast, it will warn you. This is a big win for Accessibility. 

If you want to push on further, you can make reusable groups of blocks. Or get really advanced and make your own block types using ACF and Timber.

Gutenburg is fun, configurable and useful.  Just take care with all this new found power!