This dev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. covers updates and changes made to the block 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. editors for WordPress 5.9.
Blocks
Post Title
A div wrapper element around the post title in the post editor has been removed to align it better with the post title block. Some theme styles targeting the post title (that include the removed div’s class name) may no longer apply. Please use the wp-block-post-title class to style the post title, which will also style the post title block.
Data Module
batch function
New in the data module, the batch function triggers multiple consecutive actions to one or several data stores without re-rendering the components or notifying any data store subscriber. The store listeners are only notified when the batch callback ends.
This can be a performance improvement in situations when it’s unnecessary to rerender all the components while all the actions haven’t triggered yet. As an example, when typing in the canvas, the block editor generally triggers two actions on each character being typed: one action to update the content of the post and another one to track the current text selection. To avoid unnecessary re-renders that can impact the typing performance we batch these two actions together.
Example:
import { useRegistry } from '@wordpress/data';
function Component() {
const registry = useRegistry();
function callback() {
// This will only rerender the components once.
registry.batch( () => {
registry.dispatch( someStore ).someAction();
registry.dispatch( someStore ).someOtherAction();
} );
}
return <button onClick={ callback }>Click me</button>;
}
Components
ColorPicker
The property onChangeComplete was deprecated to make the component more consistent with the rest of the codebase. Developers should update their code to the onChange property, a function that receives just a string with the color code.
The property onChangeComplete received an object instead of a string. We tried for backward compatibility, and in many cases, onChangeComplete can still be used (although not recommended). The following properties of the object passed to onChangeComplete are still valid hex, rgb, hsv, hsl, source, oldHue. The property color that contained a tinycolor2 color object is no longer valid. Code that relied on the color property must be updated as the property is not present anymore because we removed the tinycolor2 library from the project.
This change should have almost no impact as the ColorPicker component is a very low-level component used to implement the picking of custom colors, this component, although useful internally, is not particularly useful to outside plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers. Therefore, code that uses the higher level and useful components like ColorPalette or PanelColorGradientSettingsdoes do not require updates related to this change.
PostTaxonomyType filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.
The properties in the editor.PostTaxonomyType filter is no longer passed a value other than slug.
These following properties are no longer available debouncedSpeak, hasAssignAction, hasCreateAction, instanceId, onUpdateTerms, speak, taxonomy, and terms. To retrieve these values use the hook useSelect.
For example:
import { addFilter } from '@wordpress/hooks';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';
const myEditorPostTaxonomiesFilter = ( OriginalComponent ) => {
return ( props ) => {
const { slug } = props;
const { taxonomy, terms } = useSelect( ( select ) => {
const { getEditedPostAttribute } = select( editorStore );
const { getTaxonomy } = select( coreStore );
const _taxonomy = getTaxonomy( slug );
return {
taxonomy: _taxonomy,
terms: _taxonomy
? getEditedPostAttribute( taxonomy.rest_base )
: [],
};
} );
return <MyPostTaxonomyType terms={ terms } taxonomy={ taxonomy } />;
};
};
addFilter(
'editor.PostTaxonomyType',
'myFilter/my-editor-post-taxonomies-filter',
myEditorPostTaxonomiesFilter
);
Removed APIs
Some low-impact JavaScript 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/. APIs have been removed. These APIs have been initially deprecated on WordPress 5.3 and a warning message was being printed in the console to warn the developers.
- The menuLabel prop in DropdownMenu component: without it, the Dropdown menu still works, it just might render a slightly different aria label. Prefer the usage of the menuProps prop instead.
- The position prop in DropdownMenu component: without it, the Dropdown menu still works but might render a slightly different position. Prefer the usage of the popoverProps prop instead.
- The onClickOutside prop in the Popover component: the component still works without it, it might not close when you click outside it. Prefer the usage of the onFocusOutside prop instead.
- The getAutosave and hasAutosave selectors from the core Core is the set of software required to run WordPress. The Core Development Team builds WordPress./editor store: Prefer using the alternative selectors from the core data package.
wp.data.select( 'core' ).getAutosave( postType, postId, userId ).
Props to @youknowriad, @jorgefilipecosta, @toro_unit, and @ellatrix for contributions to this post.
#5-9, #core-editor, #dev-notes
