gutenberg comes to wordpress - iron code studior e s o u r c e s (without es6+, jsx, webpack ,...
TRANSCRIPT
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