Gutenberg WordPress Editor Update – Gutenberg 7.1
WHY GUTENBERG MATTERS AT ALL
First, before going into any details on this update, we’d like to cover why these updates matter, and what is Gutenberg anyway.
In short, the new way of editing using online editors (inside CMSs, like WordPress) is to use “Block” technology. For now, let’s just say that blocks make life easier.
HERE is a really cool demo of Gutenberg: https://wordpress.org/gutenberg, which you can click around in and try it out yourself.
Please read on to find out more…
A BIT ABOUT GUTENBERG
In the 15th century, the printing press was revolutionized using what’s called “movable type”. The man that did this was none other than a fellow named Johannes Gutenberg. A bloke harkening us from a Europe, soon-to-be transformed. Since after this time the world has been morphed with the compounding effects of information and idea sharing (whether good or bad). Innovation and progress have taken us far. It seems fitting that WordPress decided to name their next generation editor after the man that revolutionized content sharing.
Like Gutenberg’s famous invention, the new WordPress editor also uses the concept of movable blocks. With this transition to the use of blocks, WordPress brings into its core a more flexible, freeing page design manager. Up until now, complete page component and layout management tools have been available as plugins only. And, recently the Gutenberg editor itself as a plugin. However, with the release of WordPress 5.0 the Gutenberg editor is now the default WordPress page content editor.
ABOUT THOSE BLOCKS
The Gutenberg CMS Content Editor contains components and content sections in the form of “blocks.” hence, creating a more visual representation of dynamic page content. The blocks can be anything from text, media (images, video), buttons, widgets, social media pulls, tables and more. Developers can also create additional custom blocks by extending the Gutenberg block system. And of course there are tons of add-on plugins for Gutenberg as well. In short, a Gutenberg post is essentially a series of blocks.
EDITING IN GENERAL
When it comes to users needing to update pages and posts in WordPress (whether it be admins, publisher or clients teams), it is critical to have an extremely excellent, beyond-awesome tool, …in our opinion. You do not want to waste time using an ineffective WYSIWYG** editor for editing content on your site, right?
**WYSIWYG is short for What-You-See-Is-What-You-Get.
Here at Seattle New Media we prefer WPBakery (formerly Visual Composer Website Builder) for our editing needs. This is partly due to the fact that the latest version of Gutenberg actually broke some of our sites ability to even using Gutenberg or the older Classic Editor.
Back to the idea of editors in general… Again, our preference here is WPBakery for its near-perfect performance and functionality. Yes, they have a funny name, but it’s one of single best WYSIWYG editors on the market today for WordPress content editing. Runner-ups (other than maybe if Gutenberg is more stable now) are Elementor, Beaver Builder, Divi, and the newly updated Guttenberg editor.
OK, SO NOW ABOUT THIS UPDATE
Gutenberg 7.1 is a big release with 161 separate code contributions from various developers.
This release contains many rewrites to the code base to make future changes possible. By restructuring existing computer code—changing the factoring—without changing its external behavior it is intended to improve non-function-specific attributes of the software. This way it is possible to use new hooks that are available, or meet other future needs. This was very important.
This release tries to make block development easier using features like color picking UI easier. To do that the release expands the a “color hook” (useColor) to have new functionalities like color contrast checking (this is to meet Web Content Accessibility Guideline (WCAG) standards) and default color detection.
There was progress on the FSE (full site editing) work, especially in regards to template part blocks.
Gutenberg 7.1 brings a new welcome UI for new users:
This release also Introduces table captions and implements a UI mechanism to toggle between edit and select modes:
The new fixed-mobile toolbar experience:
The improved multi-block selection experience:
Those are the last of the enhancements to note here. To see more (not-so-interesting) improvements, check out wordpress.org.
More details from wordpress.org (see tabs below)
- Use a Fixed Block Toolbar on Mobile Web.
- Block UI:
- Navigation block:
- Keep a single place to trigger the “Open in a new tab” option.
- Fix overflow by allowing wrapping of menu items.
- Fix double click to open the appender.
- Add a type=submit to the search suggestion buttons.
- Support justifying the menu items.
- Use correct classnames for navigation link block save output.
- Remove the inspector controls.
- Improve the block multi-selection:
- Improve the Image blocks replacement flow/UI.
- Disable the HTML mode in the Cover block.
- Add friendly offline error messages on Rest API request failures.
- Round the focal point coordinates.
- Popover & Dropdowns: Consistently and smoothly adjust the position on scroll.
- Remove clearing the block selection on sidebar tab switch.
- Separate editor notices by border instead of margin.
- Allow drag and dropping images into the featured image box.
- Prevent resized Image blocks from overlapping the boundaries of the block.
- Fix wrong link to attachment page after replacing images.
- Fix Media & Text block: “Crop image to fill entire column” reset on image change.
- Fix the Snackbar notices position.
- Save the Verse block line breaks as single characters.
- Remove has-background-dim-NaN classname from the Cover block.
- Normalize the keys of the apiFetch preloaded data to avoid unnecessary Rest API calls.
- Fix CSS styles of the ColorPicker component.
- Update the Inspector slots to use the bubblesVirtually slots Fixing RichText usage in Inspector controls.
- Move the Modals and Popovers to the right position in the DOM.
- Fix alignment of date picker days when used in block.
- Fix alignment of ToggleControl label.
- Fix the toggled state in the block toolbar buttons.
- Fix the multi-select inspector padding.
- Fix the behavior that allows writing by clicking anywhere in the canvas.
- Prevent private posts with a future date from becoming public on update.
- Fix useColors crashes if contrast checkers are not specified.
- Render metaboxes as a single seemless unit to fix styling issues for themes with colored backgrounds.
- Fix the FontSizePicker custom option.
- Fix reusable blocks showing up as too tall.
- Fix Drop Cap + alignment producing a gap between paragraphs.
- Fix Cover to Image block transform when no image is used in the Cover block.
- Ensure empty classname is not output onto table element.
- Fix scrolling the sidebar on mobile.
- I18: Fix the Code block example string.
- Support a disabled prop in the RichText component.
- Add a new CustomSelectControl component.
- Add a new TextHighlight component.
- Add a new CustomGradientPicker component.
- Add useViewportMatch React hook to the wordpress/compose package.
- Allowing changing the aXe config in the wordpress/just-puppeteer-axe package.
- Block Content Areas:
- Widgets screen:
- Clear the block selection when clicking outside the widget areas.
- Avoid rerendering the EditorRegions component on each click.
- Flatten and simplify the align hook rendering.
- Shim the meta attribute source on block registration.
The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.
|Version||Loading Time||KeyPress event (typing)|
- Storybook: Add StoryShots integration to generate unit tests.
- Work on the stability of e2e tests: 1, 2, 3, 4, 5.
- Use consistent theme colors and font sizes in e2e tests.
- Travis: Skip the deploy stage on PRs.
- Avoid usage of editor store on block editor reusable blocks inserter.
- Replace the fs-extra dependency with rimraf.
- RSS block: Remove PHP 5.2 compatibility code.
- Update the Columns block to use the Patterns API.
- Refactor the BlockToolbar component to use React hooks.
- Refactor the BlockDraggable component for a simpler React tree.
- Refactor the BlockHTML component to use React hooks.
- Refactor the BlockList component to use React hooks.
- Refactor the BlockInsertionPoint component to use React hooks.
- Split @wordpress/urls into multiple modules/files to allow better tree-shaking.
- Improve the Storybook setup to allow updates on style changes.
- Enforce consistent usage of Button and ToolbarGroup components.
- Use the colors hook in the Paragraph block.
- Add missing actions and tests for lockPostAutosaving, unlockPostAutosaving.
- Collapse passed tests in Travis jobs.
- Add side effects property to the @wordpress/components package to allow tree-shaking.
- Add a script to perform patch releases for old npm package versions.
- Reuse the URLInput component in the Social Links block and disable suggestions.
- Improve and simplify reusable block styles.
- Refactor the Gallery edit component to be semi-cross-platform.
- Run tests using the same environment version used for development.
- Add CPU/Network slowdown configuration options to the e2e tests setup.
- Enable Type checking for the @wordpress/token-list package.
- Move the changelog.txt and readme.txt files to the Github repository.