Data: A helpful performance warning for developers in the ‘useSelect’ hook

useSelect is a ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hook that lets you subscribe to WordPress data in the 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. editor. It checks if consumed data has changed and then rerenders your components accordingly.

Usually, things just work, and consumers don’t have to worry about unnecessary rerenders. However, sometimes data is directly manipulated in the mapSelect callback, which can mislead the useSelect hook into thinking that the data has changed when it has not.

Example:

export function ExampleWithWarning() {
	const { nameAndIds } = useSelect( function mapSelect( select ) {
		const authors = select( 'core' ).getUsers( {
			who: 'authors',
			context: 'view',
		} );

		return {
			// `Array.map` will return a new array for every call,
			// even if the data is the same.
			nameAndIds: authors?.map( ( { id, name } ) => ( { id, name } ) ),
		};
	}, [] );

	return <>{ /* Your rendering logic here */ }</>;
}

WordPress will now display a warning when SCRIPT_DEBUG is enabled to help consumers identify possible performance bottlenecks.

Example warning:

The useSelect hook returns different values when called with the same state and parameters. This can lead to unnecessary re-renders and performance issues if not fixed.

Non-equal value keys: nameAndIds

This warning can be fixed by requesting only the values needed to render a component or moving data manipulation outside the mapSelect callback. The actual solution can vary based on your code and logic.

Please refer to the fantastic article “How to work effectively with the useSelect hook” to learn more about best practices for using the useSelect hook.

Here’s how I would fix the example code from this post:

export function ExampleFixed() {
	const { nameAndIds } = useSelect( function mapSelect( select ) {
		const authors = select( 'core' ).getUsers( {
			who: 'authors',
			context: 'view',
			// Requests only fields that are needed.
			_fields: 'id,name',
		} );

		return {
			nameAndIds: authors,
		};
	}, [] );

	return <>{ /* Your rendering logic here */ }</>;
}

Props to @kirasong for the review.

#6-8, #dev-notes, #dev-notes-6-8, #editor

Roster of design tools per block (WordPress 6.8 edition)

Below you find a table that lists all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks available in the inserter marks in the grid the feature they support in the 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. editor. It’s a basic lookup table that helps developers to find the information quickly.

While this post is released as part of 6.8, the content summarizes changes between 6.1 and 6.8. This is an updated of the 6.7 edition and provides a cumulative list of design supports added with the last six WordPress releases. The icon ☑️ indicates new in 6.8.

The features covered are:

  • Align
  • Typography,
  • Color,
  • Dimension,
  • Border,
  • Layout,
  • Gradient,
  • Duotone,
  • Shadow,
  • Background image
  • Pattern overrides / Block Bindings (PO/BB)

Work in progress

The issue Tracking: Addressing Design Tooling Consistency lists tracking issues for individual block supports.

Props to @audrasjb for review.

#6-8, #dev-notes, #dev-notes-6-8, #editor

Roster of design tools per block (WordPress 6.7 edition)

Below you find a table that lists all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks available in the inserter marks in the grid the feature they support in the 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. editor. It’s a basic lookup table that helps developers to find the information quickly.

While this post is released as part of 6.7, the content summarizes changes between 6.1 and 6.7. This is an updated of the 6.6 edition and provides a cumulative list of design supports added with the last six WordPress releases. The icon ☑️ indicates new in 6.7.

Besides adding Border Controls to a long array of blocks, In version 6.7 writingMode was added to Site title, Site tagline, verse blocks and the button element. As that’s typography subletting it’s not indicated separately in below roster.

The features covered are:

  • Align
  • Typography,
  • Color,
  • Dimension,
  • Border,
  • Layout,
  • Gradient,
  • Duotone,
  • Shadow,
  • Background image
  • Pattern overrides / Block Bindings (PO/BB)

Work in progress

The issue Tracking: Addressing Design Tooling Consistency lists tracking issues for individual block supports.

Props to @fabiankaegy for review.

#6-7, #dev-notes, #dev-notes-6-7, #editor

Roster of design tools per block (WordPress 6.6 edition)

Below you find a table that lists all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks available in the inserter marks in the grid the feature they support in the 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. editor. It’s a basic lookup table that helps developers to find the information quickly.

While this post is released as part of 6.6, the content summarizes changes between 6.1 and 6.6. This is an update of the post published for the 6.1 release and provides a cumulative list of design supports added with the last five WordPress releases.

The features covered are:

  • Align
  • Typography,
  • Color,
  • Dimension,
  • Border,
  • Layout,
  • Gradient,
  • Duotone,
  • Shadow,
  • Background image*
  • Pattern overrides / Block Bindings (PO/BB)

*Note: In WordPress 6.6, the background image tools are only available for Group, Pull quote, Site Logo blocks and as side-wide feature. For Quote, Verse and Post content blocks, it’s only in 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/ pluginPlugin 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 18.6 and slated for WordPress 6.7.

Updated on July 3 with the list tracking issues to add various design tools to core blocks, so one can follow along the progress.

Work in progress

The issue Tracking: Addressing Design Tooling Consistency lists tracking issues for individual block supports.

Props to @annezazu and @juanmaguitar for review.

#6-6, #dev-notes, #dev-notes-6-6, #editor

Editor chat summary: Wednesday, 1st March 2023

This post summarises the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor 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/. channel, on Wednesday, February 22, 2023, 14:00 UTC.

General Updates

Async key project updates

Read the latest updates directly from the following tracking issues:

Task Coordination

There has been no task coordination due to the low number of participants. And me (@andraganescu) forgetting all about it.

Open floor

@mdxfr proposed the 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/ contributors should do a focus on ironing out bugs and missing features which prevent the front end rendering of blocks, templates and template parts to match 100% their preview in the editors. Marc offered these examples as seemingly different bugs that have the same underlying cause.

@tomjdevisser raised some questions about new contributor onboarding such as:

  • how do you earn the right to approve PRs?
  • who decides based on what how to prioritize tickets?
  • how do you know what projects to add PRs to?
  • is there a list with contributors per profession/area of expertise to ask for review/approval?

Some of the questions where answered in the thread, some have their answer in this bit of documentation – but some questions revealed a missing documentation about how project management works, particularly around priorities, creating issues that track Gutenberg phases and who are the people who are expected to offer this guiding. CC @annezazu @priethor for any input you may have.


Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Read complete transcript

#meeting-notes, #core-editor, #editor, #gutenberg, #core-editor-summary

Editor chat summary: Wednesday, 22nd February 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor 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/. channel, on Wednesday, February 22, 2023, 14:00 UTC.

General Updates

Async key project updates

Read the latest updates directly from the following tracking issues:

Task Coordination

@hellofromtonya Update on the WebFonts API

The remaining parts of the full redesign of its architecture will ship in 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/ 15.2. Will be good to gain feedback while ensuring the temporary BC Layer works to keep sites up and running until their plugins and themes upgrade to it.

@get_dave

Doing some work on Duotone (Merged), seeing if we can use Duotone presets for 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. duotone styles as opposed to hard-coded colors

@ndiego

Mapping out some documentation on theme.json filters and the new blockEditor.useSetting.before filterFilter 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..

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Read complete transcript

#meeting-notes, #core-editor, #editor, #gutenberg, #core-editor-summary

Editor chat summary: Wednesday, February 15, 2023

This post summarizes the weekly editor chat meeting on Wednesday, 15 February 2023, 14:00 UTC, held in Slack.

General Announcements.

Gutenberg 15.1 was shipped last week.

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/ 15.2 was planned for later in the day.

WordPress 6.2 release process is going smoothly, and we had beta two the day before the chat.

Key project updates.

Navigation 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., Site editor, and templates

@jorgefilipecosta shared that now we have a modal that allows us to choose between starting blank or starting from the fallback when creating a new template. https://github.com/WordPress/gutenberg/pull/46248

Soon we will also be able to choose from a set of patterns: https://github.com/WordPress/gutenberg/pull/47322

On the navigation in the 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. front, We are already showing the navigation items on the sidebar using the same components used by the navigation block. Now some enhancements make this system work for more complex menus with page lists etc. https://github.com/WordPress/gutenberg/pull/47853.

Style Engine

@jorgefilipecosta said that some updates in progress are making its code simpler and modular, which he hopes will make things easier for advanced block creators and extenders https://github.com/WordPress/gutenberg/pull/47908.

Phase two updates

@annezazu compiled a summary of the current status of phase 2 work https://github.com/WordPress/gutenberg/issues/33094#issuecomment-1421394281. From now on to improve the signal-to-noise ratio, this summary will be monthly https://github.com/WordPress/gutenberg/issues/33094#issuecomment-1430358353.

Task coordination.

@jorgefilipecosta

Last week:

Next week;

  • Iterate and merge my current PRs related to the navigation sidebar.
  • Plan on also fixing some issues on the OffsiteNavigation editor that are affecting the navigation sidebar

@zieladam

Open floor

@Mdxfr

hi,
i would hightlight a very annoying 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. on Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.
https://github.com/WordPress/gutenberg/issues/29438
Editor preview is different from the frontend view
This issue was first reported in March, 2021, and is still accurate.
That impacts WooCommerce Product Blocks (this block extends the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. one). The demo video was added by the WC Team within that issue.
> could you please add the bugfix as target on 6.2 ??? I know everyone is busy, but, i feel this one is important to make the Query Loop Block more usable… it impacts many of us.
Thx

@jorgefilipecosta pinged @ntsekouras; that is more inside the query loop work.

@fabiankaegy

I also just wanted to share an issue because I’m hoping to get some context. https://github.com/WordPress/gutenberg/issues/47990

Currently there doesn’t seem to be a mechanism to leverage the global styles system for any custom settings. Such as for example the “overlay” color in the cover block.

This is starting to become a major limitation when building custom blocks and I’m just wondering if this has been an intentional choice or whether this is something that can be opened up more.

@jorgefilipecosta said applying an overlay color may require additional logic for some blocks. With CSSCSS Cascading Style Sheets., only background and text colors can be applied. A solution to this problem would involve an 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. that maps color applications to a specific CSS selector. Such an API could extend elements like the link color or take another form. Balancing this addition with other potential future features is necessary.

#core-editor, #core-editor-summary, #editor, #editor-chat, #meeting, #meeting-notes, #summary

Editor chat summary: Wednesday, 11 January 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor 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/. channel, on Wednesday, January 11, 2023, 14:00 UTC.

General Updates

  • Gutenberg 14.9.1 has been released
  • 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/ 15.0 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). will be released today

Async key project updates

Read the latest updates directly from the following tracking issues:

Task Coordination

@mamaduka would like some eyes on Global Styles: Don’t remove Custom CSS for users with the correct caps because the tests pass locally but not on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.

@andraganescu has been working on various items related to Navigation List View: Introduce navigation editable tree view in the inspector controls

Open Floor

@ribaricplusplus wanted to highlight his PR for Global Styles: Save and Delete functionality for user variations to @joen ‘s issue

@hellofromtonya mentioned that Webfonts 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. architecture should be unblocked by Monday Jan 16th for giving courtesy time this week for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Committers to weigh in on the API renaming from “Webfonts” to “Fonts”.

@fabiankaegy brought up @wordpress/eslint-plugin package does not support node.js 18 and will also ask in the core-js how to go about updating node support

@luehrsen raised awarness on a ticketticket Created for both bug reports and feature development on the bug tracker. Drop “local($font_family)” CSS while registering font-family in webfonts_handler and got feedback from @hellofromtonya

@bph invited people to check out the developer blog and called for contributors to topics open for publishing

If you are interested in contributing to the WordPress Developer Blogblog (versus network, site) check out How to contribute and the Tips and Guidelines for Writers.

@hellofromtonya asked that if there is a bugfix, feature, or enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. ready to backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. to Core, please open a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticket for it and create a PR. Instead of waiting until before Feature Freeze.

@paaljoachim opened a discussion to be had around the meeting time. Should we move it 1h later?

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

#meeting-notes, #core-editor, #editor, #gutenberg, #core-editor-summary

Editor chat summary: Wednesday, 4 January 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor 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/. channel, on Wednesday, January 04, 2023, 14:00 UTC.

General Updates

Async key project updates

Read the latest updates directly from the following tracking issues:

@ntsekouras Updates on Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.

  • Fetch terms suggestions dynamically
  • Connect scoped block variation to inserter variations
  • Moving color block support to the Post Template 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.

Task Coordination

@poena

@hellofromtonya Update on the WebFonts API

  • Status: Blocked by architectural work. (Dec 12/19)
  • Done:  The major architectural redesign (See #41481) is now merged. The new architecture is a code rewrite which has breaking changes. Some high-level details:
    • Changes data structures and publicly exposed functions/methods.
    • Includes a temporary backwards-compatible (BC) layer that throws deprecation notices to alert developers of where they need to modify their code to use the 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.This BC layer will not be backported to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Next:  There are 2 more architectural tasks that need to be completed to unblock the remaining bugs, performance, and feature work can continue.

@annezazu
Latest Phase 2 work update As expected, a number of PRs are now stalled due to folks taking time off. This is a wonderful and expected pause in the work! Some brief things to note:

@carlosgprim Update from the mobile team
Recently fixed/improved

Open Floor

@wildworks
[New Block] Add post time to read block #43403 I believe the code base is almost complete, but I would like your advice on ideas for moving forward with this PR or if it is releasable.”

@bph

The  WordPress 6.2 Planning Schedule Proposal is out and there are open slots on the release squad.

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Read complete transcript

#meeting-notes, #core-editor, #editor, #gutenberg, #core-editor-summary

Editor chat summary: Wednesday, December 14, 2022

This post summarizes the weekly editor chat meeting on Wednesday, 14 December 2022, 14:00 UTC, held in Slack.

General Announcements.

We started the chat by announcing that the state of the Word was on December 15.

We announced there is going to be a holiday break on coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor chats. The chats return on 4th January 2023.

@welcher was going to start the 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/ 14.8.0 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). right after the chat.

There is an open retrospective about the WordPress 6.1 release process. Feedback is welcome!

Key project updates.

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

The off-canvas navigation editor experiment is ready for testing.

Components Team.

The property __experimentalHasMultipleOrigins will be removed from colors and gradient-related components, making them easier to use.

Site Editor and templates.

Work is going on to allow the user to choose between starting blank or using the current fallback when creating a new template. Soon when patterns can specify a template they fit into ( by merging https://github.com/WordPress/gutenberg/pull/45814), patterns will also appear as possible start points.

Task coordination.

@jorgefilipecosta

His main focus will be landing the navigation 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. on browse mode. Also wants to polish some PR’s in progress and wants to fix a serious 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. currently in the trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. where editing as blocks for content-locked blocks is not working.

@mikachan

Has two PRs needing reviews:

Meanwhile, they were approved and merged.

#core-editor, #core-editor-summary, #editor, #editor-chat, #gutenberg, #meeting, #meeting-notes, #summary