Just enough React: Getting ready for Gutenberg

In 2018, WordPress will modernize, streamline, and simplify the content creation experience with Gutenberg. It represents the biggest change to the WordPress user experience in several years.

This session will teach just enough React for theme and plugin developers to start using Gutenberg today. Colour palettes, meta boxes, reusable blocks: all the new features, made easy.

This presentation was give at WordCamp Vancouver 2018.

***********

Shannon Smith is a platform services specialist with WordPress.com VIP/Automattic. She delivers content solutions to some of the biggest names in media, marketing, and enterprise. Shannon has over 15 years experience in open source web development. She is a long-time supporter of diversity, accessibility and internationalization, and was a WordPress Montreal community organizer for seven years. Shannon is also a hiker, poet, and mum of four.

Transcript

1. Getting Ready for Gutenberg WordCamp Vancouver 2018 Just Enough React
2. Shannon Smith Platform Services Specialist WordPress.com VIP
3. What is Gutenberg? A new post and page editing experience that makes it easy to create rich post layouts using “blocks”.
4. Discover the Possibilities Let’s take a look at some feature highlights - JS-centric - Consistent - Dynamically shift blocks - Block templates to guide content creation
5. 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
6. Test Gutenberg!
7. 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.
8. Brief Technical Tour - Blocks are plugins - Availability/core behaviour/custom blocks - Editorial layer / data layer - Abstracted react is built-in
9. Block Plugins editor block logic (js) (extra editor css ) front-end enqueue: enqueue: presentation css
10. 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
11. Cool Stuff - Reusable blocks - Dynamic blocks - Backend-only (workflow) blocks - Revenue/ad-aware editorial experience - Block-level locking
12. 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 -------------------------------------------------------------------------------
13. 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.
14. JSON Literals Inside HTML Comments { "logo": "vip", "color": "navy", "size": large, "hasLongsleeves": false } <!-- wp:core/code { "language": "haskell", "indent": [ "\t", 1 ] } --> <code><pre> sum :: Foldable t, Num a => t a -> a sum = foldl (+) 0 </pre></code> <!-- /wp:core/code --> https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/
15. 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/
16. Serialization <!-- wp:image --> <figure class="wp-block-image"> <img src="source.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:latest-posts {"postsToShow": 4,"displayPostDate":true} /—>
17. 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/
 

18. 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/
19. Fun With Templates - template_lock property - assign a template to an existing post type - nested templates
20. Compatibility Gutenberg presents new opportunities while allowing developers the time and paths to transition effectively.
21. Compatibility - Shortcodes will continue to work - Custom Post Types are supported - Metaboxes are supported
22. 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.
23. 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' );
24. 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.
25. 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/
26. 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/
27. Building Blocks with Gutenberg
28. Creating Blocks <?php function gutenberg_boilerplate_block() { wp_register_script( 'gutenberg-boilerplate-es5-step01', plugins_url( 'step-01/block.js', __FILE__ ), array( 'wp-blocks', 'wp-element' ) ); register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array( 'editor_script' => 'gutenberg-boilerplate-es5-step01', ) ); } add_action( 'init', 'gutenberg_boilerplate_block' ); https://wordpress.org/gutenberg/handbook/
29. 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.' ); }, } );
30. 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/
31. Putting The Two Together <?php function gutenberg_boilerplate_block() { wp_register_style( 'gutenberg-boilerplate-es5-step02', plugins_url( 'step-02/style.css', __FILE__ ), array( 'wp-blocks' ), filemtime( plugin_dir_path( __FILE__ ) . 'step-02/style.css' ) ); register_block_type( 'gutenberg-boilerplate-esnext/hello-world- step-02', array( 'style' => 'gutenberg-boilerplate-es5-step02', ) ); } add_action( 'init', 'gutenberg_boilerplate_block' ); https://wordpress.org/gutenberg/handbook/
32. Attributes Object { url: { source: 'attribute', selector: 'img', attribute: 'src', } } // { "url": "https://lorempixel.com/1200/800/" } https://wordpress.org/gutenberg/handbook/
33. Fun With Block Creation - editable fields and attributes - toolbars and inspectors - dynamic blocks
34. Blocks with WP-CLI - The following command generates PHP, JS and CSS code for registering a Gutenberg block. wp scaffold block <slug> [--title=<title>] [--dashicon=<dashicon>] [-- category=<category>] [--theme] [-- plugin=<plugin>] [--force] https://wordpress.org/gutenberg/handbook/
35. How to Win at Go Lose your first 50 games as quickly as possible.
36. 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
37. Four Phases - Phase I : post editing experience and the implementation of blocks - Phase II : entire-site layouts - Phase III : ??? - Phase IV : ???
38. 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/
39. Gutenberg News A collection of Gutenberg tutorials & resources. http://gutenberg.news/
40. Gutenberg Plugin Compatibility Project How do I know whether a plugin is compatible with Gutenberg? https://github.com/danielbachhuber/ gutenberg-plugin-compatibility
41. 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.
42. WordCamp Vancouver 2018 Questions?
43. vip.wordpress.com/jobs