GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack ,...

GUTENBERG COMESGUTENBERG COMESTO WORDPRESSTO WORDPRESS

/

Sal Ferrarello @salcode

BLOCK BASED EDITORBLOCK BASED EDITOR

'post_content' <!-- wp:paragraph --> <p>This is a paragraph block.</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>This is another paragraph block.</p> <!-- /wp:paragraph -->

'post_content' <!-- wp:quote --> <blockquote class="wp-block-quote"> <p>I was only ever wrong once and that was the time I thought I was wrong.</p> <cite>My Grandfather</cite></blockquote> <!-- /wp:quote -->

WHOA, SLOW DOWN!WHOA, SLOW DOWN!

or the Plugin

add_filter( 'gutenberg_can_edit_post_type', '__return_false' );

Disable Gutenberg

BLOCK TOOLBARBLOCK TOOLBAR

BLOCK INSPECTORBLOCK INSPECTOR CONTROLSCONTROLS

THEME SUPPORTTHEME SUPPORTfunctions.php

<?php /** * Add support for .alignwide and .alignfull * CSS classes. Typically used on images. */ add_theme_support( 'align-wide' );

COLOR CONTROLCOLOR CONTROL

functions.phpadd_theme_support( 'disable-custom-colors' ); add_theme_support( 'editor-color-palette', [ 'name' => 'dark blue', 'color' => '#007fbc', ] );

TEST DRIVETEST DRIVE

websiteWordPress Gutenberg PluginFrontenberg

ONE BLOCK, MANY PAGESONE BLOCK, MANY PAGESSHARED BLOCKSSHARED BLOCKS

BUILD YOURBUILD YOUR OWN BLOCKOWN BLOCK

REQUIREMENTSREQUIREMENTSES6+JSXWebpackBabelnpmReact

REQUIREMENTSREQUIREMENTSES6+JSXWebpackBabelnpmReact

WP CLIWP CLI$ wp scaffold plugin my-plugin

$ wp scaffold block my-block \ --plugin=my-plugin

$ wp plugin activate my-plugin

my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css

my-plugin |-- my-plugin.php (root plugin file) `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css

my-plugin.php include( plugin_dir_path( __FILE__ ) . 'blocks/my-block.php' );

ON THE FRONT-ENDON THE FRONT-END

'post_content' <!-- wp:my-plugin/my-block --> <p class="wp-block-my-plugin-my-block"> Hello from the saved content!</p> <!-- /wp:my-plugin/my-block -->

my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css

my-plugin |-- my-plugin.php `-- blocks |-- my-block.php (PHP for block) `-- my-block |-- editor.css |-- index.js `-- style.css

blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ 'editor_script' => 'myblock-block-editor', 'editor_style' => 'myblock-block-editor', 'style' => 'myblock-block', ] );

blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ 'editor_script' => 'myblock-block-editor', 'editor_style' => 'myblock-block-editor', 'style' => 'myblock-block', 'render_callback'=> 'my_render_callback', ] );

blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', 'My rendered output' ); }

ON THE FRONT-ENDON THE FRONT-END

blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', 'My rendered output' ); }

blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', esc_html( get_the_author() ) ); }

ON THE FRONT-ENDON THE FRONT-END

[shortcode]

blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', esc_html( get_the_author() ) ); }

blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', print_r( $attributes, true ) ); }

ON THE FRONT-ENDON THE FRONT-END

$attributes argument is an empty array

blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ 'editor_script' => 'myblock-block-editor', 'editor_style' => 'myblock-block-editor', 'style' => 'myblock-block', 'render_callback'=> 'my_render_callback', ] );

blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ 'editor_script' => 'myblock-block-editor', 'editor_style' => 'myblock-block-editor', 'style' => 'myblock-block', 'render_callback'=> 'my_render_callback', 'attributes' => [ 'val' => [], ], ] );

ON THE FRONT-ENDON THE FRONT-END

THE ENDTHE END OF AVOIDING JAVASCRIPTOF AVOIDING JAVASCRIPT

my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css

my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js (block JavaScript) `-- style.css

( function( wp ) { } )( window.wp );

blocks/my-block/index.jsvar el = wp.element.createElement; var __ = wp.i18n.__; var registerBlockType = wp.blocks.registerBlockType;

blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function( props ) {} } );

blocks/my-block/index.js

blocks/my-block.php

registerBlockType()

register_block_type()

blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function( props ) {} } );

blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function(props) { return null; } } );

'post_content' <!-- wp:my-plugin/my-block /-->

blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function(props) { return null; } } );

edit: function( props ) { return el( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },

edit: function( props ) { return wp.element.createElement( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },

edit: function( props ) { return React.createElement( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },

'post_content' <p class="wp-block-my-plugin-my-block"> Hello from the editor! </p>

ReactReact

return el( 'p', { className: props.className }, __( 'Hello from the editor!' ) );

return el( wp.components.TextControl, { className: props.className, value: props.attributes.val } );

return el( wp.components.TextControl, { className: props.className, onChange: function( newVal ) { props.setAttributes( { val: newVal }); }, value: props.attributes.val } );

IN THE EDITORIN THE EDITOR

ON THE FRONT-ENDON THE FRONT-END

'post_content' <!-- wp:my-plugin/my-block /-->

'post_content' <!-- wp:my-plugin/my-block {"val":"Now I have editable content. I editted this."} /-->

STATIC BLOCKSSTATIC BLOCKSRemove render_callback in PHPModify JavaScript save function

blocks/my-block/index.jssave: function() { return el( 'p', {}, __( 'Hello from the saved content!' ) ); },

blocks/my-block/index.jssave: function( props ) { return el( 'p', {}, __( 'Hello from the saved content!' ) ); },

blocks/my-block/index.jssave: function( props ) { return el( 'p', {}, props.attributes.val ); },

'post_content' <!-- wp:my-plugin/my-block {"val":"Now I have editable content. I editted this."}--> <p class="wp-block-my-plugin-my-block"> Now I have editable content. I editted this.</p> <!-- /wp:my-plugin/my-block -->

SOURCE OF TRUTH ?SOURCE OF TRUTH ?'post_content'

<!-- wp:my-plugin/my-block {"val":"Now I have editable content. I editted this."}--> <p class="wp-block-my-plugin-my-block"> Now I have editable content. I editted this.</p> <!-- /wp:my-plugin/my-block -->

blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ ... 'attributes' => [ 'val' => [], ], ] );

blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ ... 'attributes' => [ 'val' => [ 'selector' => 'p', 'source' => 'text', ], ], ] );

'post_content' <!-- wp:my-plugin/my-block --> <p class="wp-block-my-plugin-my-block"> Now I have editable content. I editted this.</p> <!-- /wp:my-plugin/my-block -->

cake block attributes 'attributes' => [ 'message' => [ 'selector' => 'h3', 'source' => 'text', ], 'name' => [ 'selector' => '.name', 'source' => 'text', ], ],

SAL FERRARELLOSAL FERRARELLOsalcode.com/phptek

@salcode

ES6+, JSX, BABEL, WEBPACKES6+, JSX, BABEL, WEBPACKBLOCK TEMPLATEBLOCK TEMPLATE

$ create-guten-block

RESOURCESRESOURCES

(without ES6+, JSX,Webpack, Babel)Mika Epstein's Bill Erickson's

WP CLI generated Ahmad Awais's (ES6+, JSX,Webpack, Babel)

FrontenbergWordPress Gutenberg PluginCake BlockWordPress Custom Editor Block

You Don’t Need a [custom] BlockGetting your theme ready

for GutenbergMy Block Plugin

create-guten-block

IMAGE CREDITSIMAGE CREDITS

Screencapture from Godfather III

Art SuppliesRunner FallingVirtual RealityRed BrickOne object, two perspectives