Getting Ready for Gutenberg WordCamp Vancouver 2018 Just Enough React

Shannon Smith Platform Services Specialist WordPress.com VIP

What is Gutenberg? A new post and page editing experience that makes it easy to create rich post layouts using “blocks”.

Discover the Possibilities Let’s take a look at some feature highlights - JS-centric - Consistent - Dynamically shift blocks - Block templates to guide content creation

Test Gutenberg! Frontenberg is a frontend instance of Gutenberg so that anyone can test and explore. Frontenberg was built by Tom J Nowell of WordPress VIP. - Grab some text - Grab some images - Head over to testgutenberg.com

Test Gutenberg!

How Does Gutenberg Work? As a matter of fact, the arrangement of type is a pretty inconvenient storage mechanism. The page is both the result and the proper way to store the data. The metal type is just an instrument for publication and editing, but more ephemeral in nature. Exactly as our use of an object tree (e.g. JSON) in the editor.

Brief Technical Tour - Blocks are plugins - Availability/core behaviour/custom blocks - Editorial layer / data layer - Abstracted react is built-in

Block Plugins editor block logic (js) (extra editor css ) front-end enqueue: enqueue: presentation css

Declaring Block Types // Import __ from i18n internationalization library const { __ } = wp.i18n; // Import registerBlockType() from block building libary const { registerBlockType } = wp.blocks; // Import the element creator function (React abstraction layer) const el = wp.element.createElement; /** * Register Block using default icon options. * * @param {String} name Block name, namespaced * @param {Object} settings Block settings * @return {?WPBlock} Return the block or 'undefined' */ registerBlockType('example/static-content', { title: __('Custom Block', 'translationspace'), // Icon for the block // Choose from here by default https://developer.wordpress.org/ resource/dashicons/ icon: ‘admin-settings', category: 'common', edit( props ) { return el('p', {}, 'Hello world!'); }, save( props ) { return el('p', {}, 'Hello world!'); } }); reactJS, abstracted block api registerBlockType call editor behaviors data layer behaviors

Cool Stuff - Reusable blocks - Dynamic blocks - Backend-only (workflow) blocks - Revenue/ad-aware editorial experience - Block-level locking

cloc Gutenberg cloc gutenberg.3.9.0.zip 100 text files. 100 unique files. 3 files ignored. github.com/AlDanial/cloc v 1.80 T=1.35 s (71.9 files/s, 45480.2 lines/s) ------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- JavaScript 50 4792 15232 30433 PHP 28 1512 2969 6341 Markdown 1 31 0 44 CSS 18 0 0 27 ------------------------------------------------------------------------------- SUM: 97 6335 18201 36845 -------------------------------------------------------------------------------

What is React? React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

JSON Literals Inside HTML Comments { "logo": "vip", "color": "navy", "size": large, "hasLongsleeves": false }

sum :: Foldable t, Num a => t a -> a
sum = foldl (+) 0

https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/

An Object Tree [ { type: 'core/cover-image', attributes: { url: 'my-hero.jpg', align: 'full', hasParallax: false, hasBackgroundDim: true }, children: [ "Gutenberg posts aren't HTML" ] }, { type: 'core/paragraph', children: [ "Lately I've been hearing plen…" ] } ] https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/

Serialization

Ship of Theseus Gutenberg posts aren’t HTML in essence. They just happen, incidentally, to be stored inside of post_content in a way in which they require no transformation in order to be viewable by any legacy system. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/
 https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/
 


Templates A block template is defined as a list of block items. Such blocks can have predefined attributes, placeholder content, and be static or dynamic. Block templates allow to specify a default initial state for an editor session. https://wordpress.org/gutenberg/handbook/templates/

Fun With Templates - template_lock property - assign a template to an existing post type - nested templates

Compatibility Gutenberg presents new opportunities while allowing developers the time and paths to transition effectively.

Compatibility - Shortcodes will continue to work - Custom Post Types are supported - Metaboxes are supported

Shortcodes - Will continue working without changes. - There is a new “shortcode block” to help inserting them. - There’s a planned mechanism for previewing them in place.

Custom Post Types function myplugin_register_book_post_type() { $args = array( 'public' => true, 'label' => 'Books', 'show_in_rest' => true, 'template' => array( array( 'core/image', array( 'align' => 'left', ) ), array( 'core/heading', array( 'placeholder' => 'Add Author...', ) ), array( 'core/paragraph', array( 'placeholder' => 'Add Description...', ) ), ), ); register_post_type( 'book', $args ); } add_action( 'init', 'myplugin_register_book_post_type' );

Custom Post Types - Are supported by Gutenberg. - Need REST API (show_in_rest) declaration. - Can opt out by not declaring “editor” support. - Will be able to declare supported and default blocks.

Gutenberg and Metaboxes - Metaboxes can be converted to blocks - Metaboxes can be used in Gutenberg - Metaboxes can have forced backwards compatibility add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback', null, 'normal', 'high', array( '__block_editor_compatible_meta_box' => false, ) ); https://wordpress.org/gutenberg/handbook/

Themes For Gutenberg? “These components can also take cues from themes — like the color palette component does—allowing the theme to overwrite the default colors.” https://hmn.md/white-papers/gutenberg- the-new-wordpress-editor/ https://matiasventura.com/post/ gutenberg-or-the-ship-of-theseus/

Building Blocks with Gutenberg

Creating Blocks 'gutenberg-boilerplate-es5-step01', ) ); } add_action( 'init', 'gutenberg_boilerplate_block' ); https://wordpress.org/gutenberg/handbook/

Creating Blocks var el = wp.element.createElement, registerBlockType = wp.blocks.registerBlockType, blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' }; registerBlockType( ‘gutenberg-boilerplate-es5/hello-world-step-02', { title: 'Hello World (Step 1)', icon: 'universal-access-alt', category: 'layout', edit: function() { return el( 'p', { style: blockStyle }, 'Hello editor.' ); }, save: function() { return el( 'p', { style: blockStyle }, 'Hello saved content.' ); }, } );

Block Styles .wp-block-gutenberg-boilerplate-es5-hello-world-step-02 { color: green; background: #cfc; border: 2px solid #9c9; padding: 20px; } https://wordpress.org/gutenberg/handbook/

Putting The Two Together 'gutenberg-boilerplate-es5-step02', ) ); } add_action( 'init', 'gutenberg_boilerplate_block' ); https://wordpress.org/gutenberg/handbook/

Attributes Object { url: { source: 'attribute', selector: 'img', attribute: 'src', } } // { "url": "https://lorempixel.com/1200/800/" } https://wordpress.org/gutenberg/handbook/

Fun With Block Creation - editable fields and attributes - toolbars and inspectors - dynamic blocks

Blocks with WP-CLI - The following command generates PHP, JS and CSS code for registering a Gutenberg block. wp scaffold block [--title=] [--dashicon=] [-- category=] [--theme] [-- plugin=] [--force] https://wordpress.org/gutenberg/handbook/

How to Win at Go Lose your first 50 games as quickly as possible.

How will Gutenberg Roll Out? It’s time to get on the Gutenramp! • Beta 1: October 19, 2018 • RC 1: October 30, 2018 • Release: November 19, 2018

Four Phases - Phase I : post editing experience and the implementation of blocks - Phase II : entire-site layouts - Phase III : ??? - Phase IV : ???

Ready For Gutenberg? An in-depth look at how this new wordpress feature will affect your business. https://hmn.md/white-papers/gutenberg- the-new-wordpress-editor/

Gutenberg News A collection of Gutenberg tutorials & resources. http://gutenberg.news/

Gutenberg Plugin Compatibility Project How do I know whether a plugin is compatible with Gutenberg? https://github.com/danielbachhuber/ gutenberg-plugin-compatibility

How to Contribute Help guide Gutenberg to become an excellent tool. - Start transitioning, and post issues you encounter on GitHub - Keep informed via Slack / WordPress.org / Github so you’re in the loop - Stay positive. Innovate. This is an opportunity to shape the editorial experience of the future.

WordCamp Vancouver 2018 Questions?

vip.wordpress.com/jobs