Getting Started with Gutenberg Development

Editor's Notes

• #5: The idea behind Gutenberg - tie the front end and the editor together. better user experience.
• #6: Takes functionality that was previously done with shortcodes and makes it more visual within the editor. Drag and droppable. Save blocks to reuse across posts. Define blocks available to post types through templates.
• #7: Better tie between visual on frontend and backend
• #8: The tree of objects describes the blocks that compose a post in the editor view each item represents a block and the attributes within it that can be edited
• #9: Once a block is saved in the editor it is saved into the database with an HTML comment In order to allow the saved content to be converted back into the “tree of objects” used by the editor the data is serialized into the HTML comment Were the “tree of objects” and output stored separately there would be the risk of data becoming out of sync
• #11: Most blocks within Gutenberg will provide their own styles which can then be added to or overwritten by a theme Some features however require themes to opt-in for support as it is difficult for the block to supply styles to work with all themes as they can be handled multiple ways The wide and full image alignments are good examples Note: neither of these will work very well with sidebars
• #12: Breaking out of a limited width parent. Pretty common to have a layout when the entire post content is wrapped in a fix width parent. Rather than recode there are ways to break outside the limits of the parent.
• #13: The nicer way. No limit on the parent width, but you take all direct children and give them a max-width then overwrite the max-width as needed
• #16: I tend to think of it this way: if I were to switch themes would losing the definition of a block effect content? It most likely would especially if there are any dynamic blocks. So blocks should be built in a plugin that can stay with a site through theme changes.
• #21: Gutenberg introduces two new hooks for enqueuing scripts and styles for gutenber.
• #22: The bulk of your block JS will be included in the enqueue_block_editor_assets Styles could be things like a focus state on an input in the editor. Whereas the front-end would only display the final value that was input.
• #24: JS might be the JS needed for a slider to function. The bulk of your styles will be here.
• #26: There is another way. Currently the method shown in the Gutenberg Handbook. Connected to the ‘init’ hook and passed as an argument Use ‘editor_script’, ’editor_style’, and ‘style’ I like the other hooks as it give more control and is similar to the current method of enqueueing scripts and styles
• #29: Having an abstraction layer on top of react give WordPress protection against changes to React and leaves open doors for switching to other frameworks Basically if the need were to arise to switch off React an abstraction layer helps protect against the change effecting plugins and themes using the existing framework The wp.element library gives access to react’s createElement and render functions createElement Create and return a new React element tag name string (like div or span) or a React component In React you don’t typically need to call createElement directly if you’re writing in JSX. render Is the function used by React to render an element in the DOM
• #31: BlockControls provides a toolbar of icons buttons to be used in the block editor. RichText provides an easy way to include a contenteditable interface in your block
• #32: Allows for easily adding existing components to your own blocks allowing to keep the look and feel of block editing the same. Also gives a good head start to creating your own blocks.
• #33: Allows you to easily make strings in your JavaScript translatable A .pot file can be generated using a custom Babel plugin to scan JS
• #34: Gutenberg is built with modern JavaScript. What does that mean?
• #35: ES6+ refers to any JS after ES6. JavaScript switched to a yearly release schedule with ES6 in 2015. ES Next refers to the next version of JS from the current release ES6 doesn’t replace ES5 it builds upon it Gutenberg can be fully built with ES5
• #36: JSX is a syntax for writing HTML like markup within JavaScript Makes it much easier to read and write markup within your JavaScript Example shows a div, h2, and custom React component of RichText being written in JSX Note “className” is used as “class” is reserved in JS
• #37: React is the framework used by Gutenberg for building user interfaces in JavaScript This is done by building components which are essentially custom HTML elements with their own functionality. Like the <RichText> element from the previous slide
• #38: In order to use Modern JS in browser you’ll want a build tool that takes modern JS and JSX and outputs it into browser compatible JavaScript Babel is used to convert modern JS to browser compatible JS webpack is a build tool for watching and compiling files automatically
• #39: The Block API consists of the functions WordPress exposes for adding functionality to the gutenberg editor
• #40: importing styles is a pattern from React that is used in core development. It allows for scoping styles to blocks. define the functions you want to use from dependencies so you can call it independently.
• #41: block name is the namespace/block-name discussed previously block configuration object is an object containing the attributes and functionality of your block the edit and save functions of the block configuration object define how the block works in the editor and frontend
• #42: First let’s look at a handful of the available attributes
• #46: Alias like an Image block using “Photo” Limited to 3 keywords per block
• #47: Attributes are the data within the block. Attributes allow for extracting the value from a saved post for use in an editable block This example shows how you would be able to manipulate the src attribute from an img element.
• #48: This is a simple (un-editable) example. This block would display a div with a paragraph in it in the editor. This example shows accessing the className by passing in props to the function
• #49: The alternate save function of this simple block. This is what the block would output to the database a div wrapping a paragraph
• #50: Some of the properties made available in the RichText component include: value: which is a string of what is entered in the input onChange: a callback handler fired when the value changes passing the new value placeholder: a string for placeholder text in the input multiline: a tag name that should be used when enter is pressed for example if set to li it would wrap each line in a li tagName the editable element. In the example we have a H2
• #51: The edit function still shows a representation of the block in the editor’s context (this could be very different from the rendered version, it’s up to the block’s author) The save function just returns null because the rendering is performed server-side. The server-side rendering is a function taking the block attributes as an argument and returning the markup (quite similar to shortcodes)
• #53: Ok so to recap. We need to <read list> … That’s a lot to handle and figure out
• #54: Luckily there are several tools out there for speeding up this process create-guten-block is maybe the fastest setup I’ve come across Ot comes with JSX and ES6 syntax support Webpack build process for dev and production CSS prefixing To get started you’ll need Node.JS and npm installed Then you’ll globally install create-guten-block Then from the plugins folder of a local development site you can run “create-guten-block block-name” and it’ll spin up a full plugin ready for you to start building blocks with modern JS!