Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Shannon Smith

March 19, 2018
Tweet

More Decks by Shannon Smith

Other Decks in Technology

Transcript

  1. Demo for the
    Montreal WordPress Community
    Montreal, March 2018
    Gutenberg

    View Slide

  2. Shannon Smith
    Platform Services Specialist
    WordPress.com VIP

    View Slide

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

    View Slide

  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.

    View Slide

  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!

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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
    -------------------------------------------------------------------------------

    View Slide

  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.

    View Slide

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


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


    View Slide

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

    View Slide

  14. Serialization





    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

  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' );

    View Slide

  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.

    View Slide

  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/

    View Slide

  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/

    View Slide

  24. Building Blocks with
    Gutenberg

    View Slide

  25. Creating Blocks
    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/

    View Slide

  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.' );
    },
    } );

    View Slide

  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/

    View Slide

  28. Putting The Two Together
    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/

    View Slide

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

    View Slide

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

    View Slide

  31. 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/

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  39. Montreal WordPress Community
    Montreal, March 2018
    Questions?

    View Slide

  40. vip.wordpress.com/jobs

    View Slide