Demo for the Montreal WordPress Community Montreal, March 2018 Gutenberg 

Shannon Smith Platform Services Specialist WordPress.com VIP 

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 - react-like app, modern JS development practises - Consistency - one “right way” to build content and extend the editor - Dynamically shift blocks around the page akin to visual page layouts - Use block templates to guide content creation. Eventually, you’ll use blocks instead of custom fields, shortcodes, metaboxes and other ad-hoc elements, becoming far more intuitive for editors. 

Let’s 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 - Let’s get started! 

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 - Integrated editorial workflow and policy - Revenue/ad-aware editorial experience - Block-level locking 

cloc Gutenberg cloc gutenberg 62 text files. 62 unique files. 3 files ignored. github.com/AlDanial/cloc v 1.76 T=1.32 s (44.8 files/s, 74009.2 lines/s) ------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- JavaScript 31 12921 16155 61572 PHP 17 933 1657 4078 Markdown 1 31 0 43 CSS 10 0 0 10 ------------------------------------------------------------------------------- SUM: 59 13885 17812 65703 ------------------------------------------------------------------------------- 

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. 

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

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



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…" ] } ] 

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. 

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. 

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. - 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=<dashicon>] [-- category=<category>] [--theme] [-- plugin=<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! - April 2018 WordPress 5.0 -Gutenberg will be in 5.0 -Gutenberg will be ON by default. Users can opt-out by installing Classic Editor plugin. - We encourage you to start transitioning. Aim to be compatible (no breakage) within 3 months, and optimized in 6-12 months. 

Three Phases - Phase I : post editing experience and the implementation of blocks - Phase II : page templates - Phase III : full site customization 

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. 

Montreal WordPress Community Montreal, March 2018 Questions? 

vip.wordpress.com/jobs