gutenberg comes to wordpress - iron code studior e s o u r c e s (without es6+, jsx, webpack ,...
TRANSCRIPT
![Page 1: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/1.jpg)
GUTENBERG COMESGUTENBERG COMESTO WORDPRESSTO WORDPRESS
/
Sal Ferrarello @salcode
![Page 2: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/2.jpg)
![Page 3: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/3.jpg)
![Page 4: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/4.jpg)
![Page 5: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/5.jpg)
![Page 6: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/6.jpg)
BLOCK BASED EDITORBLOCK BASED EDITOR
![Page 7: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/7.jpg)
![Page 8: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/8.jpg)
![Page 9: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/9.jpg)
'post_content' <!-- wp:paragraph --> <p>This is a paragraph block.</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>This is another paragraph block.</p> <!-- /wp:paragraph -->
![Page 10: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/10.jpg)
'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 -->
![Page 11: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/11.jpg)
WHOA, SLOW DOWN!WHOA, SLOW DOWN!
![Page 12: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/12.jpg)
or the Plugin
add_filter( 'gutenberg_can_edit_post_type', '__return_false' );
Disable Gutenberg
![Page 13: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/13.jpg)
BLOCK TOOLBARBLOCK TOOLBAR
![Page 14: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/14.jpg)
BLOCK INSPECTORBLOCK INSPECTOR CONTROLSCONTROLS
![Page 15: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/15.jpg)
![Page 16: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/16.jpg)
THEME SUPPORTTHEME SUPPORTfunctions.php
<?php /** * Add support for .alignwide and .alignfull * CSS classes. Typically used on images. */ add_theme_support( 'align-wide' );
![Page 17: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/17.jpg)
![Page 18: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/18.jpg)
![Page 19: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/19.jpg)
COLOR CONTROLCOLOR CONTROL
![Page 20: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/20.jpg)
functions.phpadd_theme_support( 'disable-custom-colors' ); add_theme_support( 'editor-color-palette', [ 'name' => 'dark blue', 'color' => '#007fbc', ] );
![Page 21: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/21.jpg)
![Page 22: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/22.jpg)
TEST DRIVETEST DRIVE
websiteWordPress Gutenberg PluginFrontenberg
![Page 23: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/23.jpg)
ONE BLOCK, MANY PAGESONE BLOCK, MANY PAGESSHARED BLOCKSSHARED BLOCKS
![Page 24: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/24.jpg)
BUILD YOURBUILD YOUR OWN BLOCKOWN BLOCK
![Page 25: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/25.jpg)
![Page 26: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/26.jpg)
REQUIREMENTSREQUIREMENTSES6+JSXWebpackBabelnpmReact
![Page 27: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/27.jpg)
REQUIREMENTSREQUIREMENTSES6+JSXWebpackBabelnpmReact
![Page 28: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/28.jpg)
WP CLIWP CLI$ wp scaffold plugin my-plugin
$ wp scaffold block my-block \ --plugin=my-plugin
$ wp plugin activate my-plugin
![Page 29: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/29.jpg)
my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css
![Page 30: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/30.jpg)
my-plugin |-- my-plugin.php (root plugin file) `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css
![Page 31: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/31.jpg)
my-plugin.php include( plugin_dir_path( __FILE__ ) . 'blocks/my-block.php' );
![Page 32: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/32.jpg)
![Page 33: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/33.jpg)
![Page 34: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/34.jpg)
ON THE FRONT-ENDON THE FRONT-END
![Page 35: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/35.jpg)
![Page 36: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/36.jpg)
'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 -->
![Page 37: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/37.jpg)
my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css
![Page 38: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/38.jpg)
my-plugin |-- my-plugin.php `-- blocks |-- my-block.php (PHP for block) `-- my-block |-- editor.css |-- index.js `-- style.css
![Page 39: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/39.jpg)
blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ 'editor_script' => 'myblock-block-editor', 'editor_style' => 'myblock-block-editor', 'style' => 'myblock-block', ] );
![Page 40: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/40.jpg)
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', ] );
![Page 41: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/41.jpg)
blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', 'My rendered output' ); }
![Page 42: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/42.jpg)
ON THE FRONT-ENDON THE FRONT-END
![Page 43: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/43.jpg)
blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', 'My rendered output' ); }
![Page 44: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/44.jpg)
blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', esc_html( get_the_author() ) ); }
![Page 45: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/45.jpg)
ON THE FRONT-ENDON THE FRONT-END
[shortcode]
![Page 46: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/46.jpg)
blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', esc_html( get_the_author() ) ); }
![Page 47: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/47.jpg)
blocks/my-block.phpfunction my_render_callback( $attributes ) { return sprintf( '<pre><code>%s</code></pre>', print_r( $attributes, true ) ); }
![Page 48: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/48.jpg)
ON THE FRONT-ENDON THE FRONT-END
$attributes argument is an empty array
![Page 49: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/49.jpg)
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', ] );
![Page 50: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/50.jpg)
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' => [], ], ] );
![Page 51: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/51.jpg)
ON THE FRONT-ENDON THE FRONT-END
![Page 52: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/52.jpg)
![Page 53: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/53.jpg)
THE ENDTHE END OF AVOIDING JAVASCRIPTOF AVOIDING JAVASCRIPT
![Page 54: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/54.jpg)
my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js `-- style.css
![Page 55: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/55.jpg)
my-plugin |-- my-plugin.php `-- blocks |-- my-block.php `-- my-block |-- editor.css |-- index.js (block JavaScript) `-- style.css
![Page 56: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/56.jpg)
( function( wp ) { } )( window.wp );
![Page 57: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/57.jpg)
blocks/my-block/index.jsvar el = wp.element.createElement; var __ = wp.i18n.__; var registerBlockType = wp.blocks.registerBlockType;
![Page 58: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/58.jpg)
blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function( props ) {} } );
![Page 59: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/59.jpg)
blocks/my-block/index.js
blocks/my-block.php
registerBlockType()
register_block_type()
![Page 60: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/60.jpg)
![Page 61: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/61.jpg)
blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function( props ) {} } );
![Page 62: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/62.jpg)
blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function(props) { return null; } } );
![Page 63: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/63.jpg)
'post_content' <!-- wp:my-plugin/my-block /-->
![Page 64: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/64.jpg)
blocks/my-block/index.js registerBlockType( 'my-plugin/my-block', { title: __( 'My block' ), edit: function( props ) {}, save: function(props) { return null; } } );
![Page 65: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/65.jpg)
edit: function( props ) { return el( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },
![Page 66: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/66.jpg)
edit: function( props ) { return wp.element.createElement( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },
![Page 67: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/67.jpg)
edit: function( props ) { return React.createElement( 'p', { className: props.className }, __( 'Hello from the editor!' ) ); },
![Page 68: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/68.jpg)
![Page 69: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/69.jpg)
'post_content' <p class="wp-block-my-plugin-my-block"> Hello from the editor! </p>
![Page 70: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/70.jpg)
ReactReact
![Page 71: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/71.jpg)
return el( 'p', { className: props.className }, __( 'Hello from the editor!' ) );
![Page 72: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/72.jpg)
return el( wp.components.TextControl, { className: props.className, value: props.attributes.val } );
![Page 73: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/73.jpg)
return el( wp.components.TextControl, { className: props.className, onChange: function( newVal ) { props.setAttributes( { val: newVal }); }, value: props.attributes.val } );
![Page 74: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/74.jpg)
IN THE EDITORIN THE EDITOR
![Page 75: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/75.jpg)
ON THE FRONT-ENDON THE FRONT-END
![Page 76: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/76.jpg)
'post_content' <!-- wp:my-plugin/my-block /-->
![Page 77: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/77.jpg)
'post_content' <!-- wp:my-plugin/my-block {"val":"Now I have editable content. I editted this."} /-->
![Page 78: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/78.jpg)
STATIC BLOCKSSTATIC BLOCKSRemove render_callback in PHPModify JavaScript save function
![Page 79: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/79.jpg)
blocks/my-block/index.jssave: function() { return el( 'p', {}, __( 'Hello from the saved content!' ) ); },
![Page 80: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/80.jpg)
blocks/my-block/index.jssave: function( props ) { return el( 'p', {}, __( 'Hello from the saved content!' ) ); },
![Page 81: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/81.jpg)
blocks/my-block/index.jssave: function( props ) { return el( 'p', {}, props.attributes.val ); },
![Page 82: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/82.jpg)
'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 -->
![Page 83: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/83.jpg)
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 -->
![Page 84: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/84.jpg)
![Page 85: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/85.jpg)
blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ ... 'attributes' => [ 'val' => [], ], ] );
![Page 86: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/86.jpg)
blocks/my-block.phpregister_block_type( 'my-plugin/my-block', [ ... 'attributes' => [ 'val' => [ 'selector' => 'p', 'source' => 'text', ], ], ] );
![Page 87: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/87.jpg)
'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 -->
![Page 88: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/88.jpg)
![Page 89: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/89.jpg)
cake block attributes 'attributes' => [ 'message' => [ 'selector' => 'h3', 'source' => 'text', ], 'name' => [ 'selector' => '.name', 'source' => 'text', ], ],
![Page 90: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/90.jpg)
SAL FERRARELLOSAL FERRARELLOsalcode.com/phptek
@salcode
![Page 91: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/91.jpg)
![Page 92: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/92.jpg)
ES6+, JSX, BABEL, WEBPACKES6+, JSX, BABEL, WEBPACKBLOCK TEMPLATEBLOCK TEMPLATE
$ create-guten-block
![Page 93: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/93.jpg)
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
![Page 94: GUTENBERG COMES TO WORDPRESS - Iron Code StudioR E S O U R C E S (without ES6+, JSX, Webpack , Babel) Mika Epstein's Bill Erickson's WP CLI generated Ahmad A wais's (ES6+, JSX, Webpack](https://reader033.vdocument.in/reader033/viewer/2022050609/5fafd074e38b5864e17520cc/html5/thumbnails/94.jpg)
IMAGE CREDITSIMAGE CREDITS
Screencapture from Godfather III
Art SuppliesRunner FallingVirtual RealityRed BrickOne object, two perspectives