Gutenberg and the future of WordPress | Gutenberg et le futur de WordPress

En 2018, WordPress modernisera et rendra plus facile l'expérience de création de contenu grâce à Gutenberg. Ceci représente un des plus importants changements à WordPress dans les dernières années. Pour plus de contexte, visionnez la présentation annuelle de Matt Mullenweg, fondateur de WordPress. https://www.youtube.com/watch?v=XOY3ZUO6P0k

Comment ça fonctionne? Qui s'en sert? Comment est-ce que je me prépare à ces changements? Comment puis-je contribuer au développement? Cette présentation répondra à toutes ces questions et incluera un demo. Apportez vos ordis!

À propos de la présentatrice: Shannon Smith, Spécialiste plateforme-service, Automattic / WordPress.com VIP

Shannon Smith est spécialiste plateforme-service au sein des services VIP de WordPress.com. Elle livre des solutions de contenu aux plus grands noms en média, marketing, et affaires. Shannon détient plus de 15 ans d’expérience dans le domaine des intégrations de source libre. Longuement partisane de la diversité, de l’accessibilité, et de l’internationalisation, elle a été organisatrice de la communauté WordPress Montréal durant sept ans. Shannon est également adepte de plein air, poétesse et mère de quatre enfants.

_____________________

About Gutenberg and this meetup:

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. In fact, in the State Of The Word 2017 Matt Mullenweg described its enduring importance as “the editor for the next twelve years.” https://www.youtube.com/watch?v=XOY3ZUO6P0k

How does it work? Who is already using it? How can I get ready? How can I contribute? This presentation will answer all those questions and include a fun demo. Bring your computers!

About the Presenter: Shannon Smith, Platform services specialist, Automattic / WordPress.com VIP

Shannon Smith is a platform services specialist with WordPress.com VIP. 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. Demo for the Montreal WordPress Community Montreal, March 2018 Gutenberg
2. Shannon Smith Platform Services Specialist WordPress.com VIP
3. 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 - 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.
5. 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!
6. Brief Technical Tour - Blocks are plugins - Availability/core behaviour/custom blocks - Editorial layer / data layer - Abstracted react is built-in
7. Block Plugins editor block logic (js) (extra editor css ) front-end enqueue: enqueue: presentation css
8. 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
9. Cool Stuff - Reusable blocks - Dynamic blocks - Backend-only (workflow) blocks - Integrated editorial workflow and policy - Revenue/ad-aware editorial experience - Block-level locking
10. 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 -------------------------------------------------------------------------------
11. 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.
12. 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 -->
13. 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…" ] } ]
14. Serialization <!-- wp:image --> <figure class="wp-block-image"> <img src="source.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:latest-posts {"postsToShow": 4,"displayPostDate":true} /—>
15. 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.
16. 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.
17. Fun With Templates - template_lock property - assign a template to an existing post type - nested templates
18. 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
19. 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.
20. 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' );
21. 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.
22. 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/
23. 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/
24. Building Blocks with Gutenberg
25. 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/
26. 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.' ); }, } );
27. 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/
28. 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/
29. Attributes Object { url: { source: 'attribute', selector: 'img', attribute: 'src', } } // { "url": "https://lorempixel.com/1200/800/" } https://wordpress.org/gutenberg/handbook/
30. Fun With Block Creation - editable fields and attributes - toolbars and inspectors - dynamic blocks
31. 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/
32. How to Win at Go Lose your first 50 games as quickly as possible.
33. 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.
34. Three Phases - Phase I : post editing experience and the implementation of blocks - Phase II : page templates - Phase III : full site customization
35. 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/
36. Gutenberg News A collection of Gutenberg tutorials & resources. http://gutenberg.news/
37. Gutenberg Plugin Compatibility Project How do I know whether a plugin is compatible with Gutenberg? https://github.com/danielbachhuber/ gutenberg-plugin-compatibility
38. 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.
39. Montreal WordPress Community Montreal, March 2018 Questions?
40. vip.wordpress.com/jobs