What’s new in Gutenberg? (16th February)

This belated release brings support for nested blocks into GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/. The list of changes is rather big, so it's broken up into sections. It also has a new Columns blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. that leverages nested blocks to operate — it is labeled experimental, though, as it needs further work and has some browser hiccups.

Most notably to the user experience, we are introducing block shortcuts on empty paragraph blocks to streamline the process of inserting content that is not text, while also optimizing for the writing experience. The global inserter, featured at the top of the editor, is meant to become more of a primary way to add content when the user is not writing. Getting this balance right between block creation and the writing flow is crucial and we'll continue testing with users to refine it. 

We are also making changes to how text is synced to the application state, which improves the reliability of the "unsaved" state, the undo mechanism, the ability to dismiss the publish sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. automatically as soon as you make another edit, and so on.

2.2 🌱

Highlights

• Block Nesting is live!   It comes with an experimental Columns block. (Note: converting a nested block into a reusable block is disabled on this first version.) Furthermore, this is not a specific implementation for columns alone — any block author can take advantage of defining nested areas.
• Refined block insertion experience:
  • Introduce block shortcuts on every empty paragraph block. This also temporarily disables the sibling inserter as we work on refining this interaction.
  • Add trailing text area at the bottom of a post to continue writing.
• Preview saved blocks while hovering on the inserter. Allows users to quickly see what they are inserting before inserting.
• Enable triggering onChange events within RichText component on every keystroke. This was an enforced limitation that prevented saved post checks from being faithful.
• Rework undo levels to use history "buffer" and leverage the mechanism to aid in continuous syncing of RichText history records.

User Experience

• Collapse the publish sidebar when making edits to a published post automatically.
• Improve writing flow by triggering isTyping mode as soon as the user clicks on the default text appender.
• Hide hover effects when typing.
  
• Add a confirmation message before reverting a published post to draft.
• When using the inserter, replace the selected block if it's empty.
• Display reusable blocks in the "recent blocks" tab.
• Make sure blue line indicators appear consistently when using dropzones.
• Ensure that hitting enter at the end of a paragraph creates an empty paragraph when using RichText.
• Ensure the block settings menu and the block movers are shown when the default block is selected and user is not typing.
• Deselect individual gallery images when clicking outside the block or selecting another image.

New features

• Add support for setting a page template.
• Add support for individual image captions in galleries.
• Add support for saving a post with Cmd/Ctrl+S shortcuts. This is possible after these RichText changes.
• Support unwrapped paragraph text via native block deprecation mechanism. (Ensures paragraphs without p tags are correctly interpreted.) Also readdresses code that was applying autop selectively on the server for posts made with gutenberg as it is handled at the block level when needed.
• Add raw handling (pasting mechanism) for iframes (e.g. Google Maps).
• Allow WP to make images responsive via class.

Block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and Extensibility

• Drop focus/setFocus props in favor of isSelected prop.
• New PlainText component for raw content that is styled as editable text. Renamed Editable to RichText for extra clarity and separation.
• Add RawHTML component, drop support for HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. string block save.
• Absorb multiple-image uploads in generic image placeholder component and reuse it for galleries.
• Refactor Default Colors and the ColorPalette component. Moves the default colors to the frontend making the Editor script more reusable without the need of the server-side bootstraping.
• Reimplement block alignment as a common extension.
• Use block API functions in reusable block effects.
• Check for duplication in addGeneratedClassName.
• Assign default for all allowed blockTypes.
• Update ToggleControl to pass boolean onChange.
• Add withSafeTimeout higher-order component.
• Expose getEditedPostAttribute selector.
• Move selected block focus to BlockListBlock.
• Allow themes to disable custom color functionality across blocks.
• Added slug selector to data modules collection.
• Defer registration of all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks until editor loads. Generally useful for extensibility hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same..
• Add a subscribe function to the editor data module. Also, separate reducers into multiple stores to avoid unallowed access to the actions.
• Support multiple stores in data module for the redux dev tools.
• Expose registered selectors as functions.
• Remove Popover isOpen prop, render by presence.

Bug fixes

• Fix issue with store persistence and switching to fixed toolbar.
• Fix issue with formatting toolbar hover.
• Fix block menu render when multi-selecting.
• Fix TinyMCE custom buttons width in Classic block.
• Fix sidebar tab adminadmin (and super admin) theme regression.
• Fix center alignment on resized images.
• Fix some float issues.
• Fix type error when merging blocks.
• Fix regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. when converting gallery from shortcode.
• Fix unset variable in metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.-boxes functions.
• Fix code error in blocks-control.md.
• Fix loss of focus when navigating from multi-selection.
• Fix scrollbars on blank preview loading screen.
• Fix broken nested lists and Evernote test in pasting functionality.
• Fix lingering dropzone placeholder at the end of the editor.
• Fix Button block line break presentation.
• Fix lingering visual editor classes.
• Fix codepen embeds width.
• Fix merging blocks after nested blocks refactoring.
• Fix Cypress path checks to allow sub-directory.
• Fix error when pasting image inside caption.
• Fix some issues when pasting from Word.
• Fix bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. when pasting content with custom styles in a paragraph block.
• Fix image caption select behaviour.
• Fix broken nested content caused by overly aggressive cache.
• Fix issue with comments and pingbacks being set to off on new posts.
• Fix regression with RichText placeholder whitespace.
• Fix incorrect directory to load text domain.
• Fix issue with quote to heading transformation.
• Fix focus transfer between citation and content.
• Fix gallery link attribute selector.
• Attempt to correct SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.'s Markdown code block variant.
• Disable customClassName support on Classic block.
• Avoid autofocus behavior for blocks without focusable elements.
• Ignore focus if explicitOriginalTarget is not node (Firefox issue).

Other changes

• Extract "edit-post" to its own module — this is preparation work for the eventual template editor in v2 onwards.
  
• Remove redundant handling of inserter position, simplifying the implementation for nesting.
  
• Prioritize specific block handling over generic shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. catch-all transform.
  
• Avoid running a full-parse when rendering a post, instead only intercepting dynamic blocks to handle their callbacks.
• Ensure string return value from render_callback.
• Avoid parameters in memoized selectors getDependants.
• Guard against falsey block container in WritingFlow.
  
• Refactor BlockList to use minimal block UIDs array.
• Pass selection start as UID in BlockList to prevent unnecessary rerenders.
• Refactor TableOfContents panel to separate component for performance improvements.
  
• Restore new post setup as non-dirtying change. This resolves an issue where saving a new post which has an empty title will set the title as "Auto Draft".
  
• Center spinner when images are loading in the gallery block.
• Use isTypingInBlock to avoid unnecessary block rerenders.
  
• Add the i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. messages to the built plugin.
• General design improvements to the full-post code editor. Also removes the dummy quicktag buttons that were non-functional.
• Only start multi selection from inside the content.
• Cache columns layouts configurations.
• General polish to the Classic block and some quote block style errors.
  
• Remove wrapper from image raw transform and added tests.
• Make sure reusable blocks models exist before initializing.
• Persist withFocusOutside event for async usage.
• Pass selected block UID as string on WritingFlow.
• Add label to range control.
• Remove throttling inputs on RichText.
• Replace global hover state with local component state. This reduces excesive dispatching of mouse events.
• Simplify Editor State initialization using a single action to fix undo/redo initialization.
• Access state paths directly in selector dependants for getBlock.
• Refactor insertion point to include rootUID and layout.
• Set new post status to draft in initialization.
• Strip comment demarcations in content filtering for the front-end after refactoring work.
• Improve presentation of List block.
• Optimize getMultiSelectedBlocks by returning shared array reference in empty multi-selection.
• Increase maximum number of recent blocks to nine in order to accommodate the current design.
• Avoid cases of rerendering when the previous or next block updates.
• Restore missing selectionStart props in BlockList.
• Improve edit and insert link label display.
• Extract copy and scroll-into-view logic to separate non-visual components in BlockList.
• Make sure that styles do not contain duplicates in development mode.
• Use trivial block count check to determine emptiness.
• Use proper labels provided by the rest APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. on taxonomies.
• Use menu order to order pages in the parent page dropdown.
• Persist link attribute to fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. galleries.
• Update the Dashicons component with new icons.
• Use correct label on Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. Panel.
• Small improvement to the meta-box partial page file.
• Delete unused global import in gutenberg_menu function.
• Improve serialize persistence action name.
• Improve logic around replacing the editor in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher.
• Improve consistency of tooltips text.
• Improve sandbox component readme.
• Improve gutenberg_intercept_* functions.
• Improve "Add New" button logic.
• Revert updates giving Meta Boxes' #poststuff div a broader scope.
• Simplify "New Post" button logic.
• Simplify scripts registration.
• Replace focus with isSelected verification on hooks.
• Automate memoized selector setup clear.
• Consolidate module build JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors., CSSCSS Cascading Style Sheets., map inclusion.
• Remove unused code after WP 4.9.
• Update deprecated BlockDescription in Subhead.
• Add doc explaining the deprecated block API. (Handbook.)
• Add doc for Editable component (now RichText).
• Document block validation, clarify extensibility validation.
• JSDoc: prefer @return over @retuns.
• Integrate dependencies from WordPress packages. Brings wp-scriptsinto gutenberg.
• Move components in wp.blocks.InspectorControls to wp.components.
• Add lint:fix ESLint "fix" npm script.
• Add an eslint --fix GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. precommit hook.
• Add reusable block render tests.
• Add tests for ContrastChecker component.
• Add more details about unit testing JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. code.
• Add mention to create-guten-block repo.
• Add partial test coverage to RichText component.
• Add first version of repository management doc.
• Assign preferred JSDoc tags and types.
• Assign edit-post global as wp.editPost.
• Assign explicit user for Docker WordPress install in tests.
• Mention installing docker-compose in local dev setup.
• Update refx to version 3.x.
• Update memize and rememo dependencies.
• Code is Poetry footer to main readme.

#core-editor, #editor, #gutenberg, #gutenberg-new