-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dev Notes Tracking Issue for WordPress 5.9 #36401
Comments
Hi @torounit - yes, you can put it as a comment in the PR itself, or you can also add as a comment on this PR. I can help review and get it published when ready. Thank you! |
@mkaz I drafted a Dev note for the |
Here's a data module related dev note, if there are more data module dev notes, they could potentially be grouped together in a post. Data Modulebatch functionWordPress 5.9 introduces the batch function in the data module. It allows you to trigger 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 useful for performance improvement in situations where it's unnecessary to try to rerender all the components while all the actions didn't trigger yet. As an example, when typing in the canvas, the block editor generally triggers two action on each character being typed: one action to update the content of the post and another one to track the current text selection. In order to avoid unnecessary re-renders which 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>;
} |
@mkaz while not mentioned above but I think the most important dev note for 5.9 is going to be a dev note about block themes: how to write them, difference with existing theme, opt-in, link to docs, where to find them in the theme repo... |
Here's a dev note about block gap, a block support and theme.json config. I believe there are more customization tools made stable in this release, folks like @andrewserong @aaroncampbell @oandregal would know more here and potentially complete this to do a "customization/theme.json dev note". I guess we should also mention the "appearanceTools" flag in this dev note. Block GapWordPress 5.9 introduces a new customization tool that you can control through the theme.json config of your theme: Block Gap. The blockGap adjusts the vertical margin, or gap, between blocks. By default the block gap support is disabled for all themes, but you can enable it in your theme.json with two different ways:
Example (theme.json) {
"version": 1,
"settings": {
"spacing": {
"blockGap": true,
}
},
"styles": {
"spacing": {
"blockGap": "1.5rem"
}
}
} |
Here is a dev note for PR #35562. Updates to property
|
Thanks @youknowriad and @jorgefilipecosta for the updates and notes! The blockGap should be combined with other styles and theme updates. As for data and components, both are short, should we combine into a misc updates for WP 5.9? |
Sounds like a good plan to me. I'll share my remaining one (removed APIs) later (tomorrow most likely) which should also go into the misc updates. |
@youknowriad I wrote up a draft dev note for block theme here. Let me know if that covers what you had in mind or if I'm missing anything. 👍 |
@mkaz That reads more as an introduction to block themes with links to dig deeper. I think that's one of the approaches we could take. It's fine by me, but I just want to make sure that it's ok for dev notes to be written that way. Also, the other day I wanted to look at the theme documentation to submit a block theme and it's essentially tailored for classic themes, we'll have to make some updates there in the next weeks. Also some things maybe worth mentioning in the dev note:
|
We've been talking with the theme team and have a docs ticket open to update the Theme handbook. So that work is in progress. It's hard to tackle how to create a block theme in a single dev note. I'll look at adding the theme.json and pattern block in the note too. |
@mkaz I wrote a draft note about |
Thanks @torounit, it looks good. I've added it to the Misecellany dev note that will be published shortly around the RC1. |
Public PHP API to access global settings & styles from
|
@oandregal Thanks for the note 👍 Published to: https://make.wordpress.org/core/2022/01/04/new-api-to-access-global-settings-styles/ The misc note is published here: https://make.wordpress.org/core/2022/01/04/miscellaneous-block-editor-changes-in-wordpress-5-9/ The block theme note is published here: https://make.wordpress.org/core/2022/01/04/block-themes-a-new-way-to-build-themes-in-wordpress-5-9/ |
@oandregal @youknowriad I've created a draft for the Customization Tools for theme.json using the blockGap note above. Is there more you want to include? The draft is started here: https://make.wordpress.org/core/wp-admin/post.php?post=93196&action=edit |
That looks good, I'm pretty sure there are more design tools added during this cycle, maybe borders? @aaronrobertshaw and @andrewserong would know more. |
@mkaz @youknowriad I can't access the draft shared by Marcus. I was thinking that we could create a devnote called "theme.json v2" that tracks all changes done from v1. This is what I have so far. Need to fill the later sections, it's my focus for today. I'll update this comment as I make progress. Changes in v2 of theme.jsonWordPress 5.9 is evolving the theme.json v1 introduced in WordPress 5.8 to a v2. The existing v1 Please, refer to the live specification document for a detailed description of the Changes per sectionVersionIt's now You don't need to update the v1 file for it to work, as it'll be transformed into v2 at runtime for you. However, if you want to update a v1 file, keep in mind that you have to update the version value and potentially change the names of some keys. See below for a full set of changes. For example, one of the changes from v1 to v2 is that the SettingsThe following section documents the changes done to settings in v2:
StylesThe following section documents the changes done to
Custom templatesThe For example, for a custom template named
Example (theme.json): {
"version": 2,
"customTemplates": [
{
"name": "my-custom-template",
"title": "The template title",
"postTypes": [
"page",
"post",
"my-cpt"
]
}
]
} Template partsThe For example, for a template part named Currently block variations exist for "header" and "footer" values of the area term, any other values and template parts not defined in the json will default to the general template part block. Variations will be denoted by specific icons within the editor's interface, will default to the corresponding semantic HTML element for the wrapper (this can also be overridden by the
Example (theme.json): {
"version": 2,
"templateParts": [
{
"name": "my-template-part",
"title": "Header",
"area": "header"
}
]
} Appearance toolsThe new setting In v2, it opts-in into the following settings that are
BlockGapThe By default the block gap support is disabled for all themes, but you can enable it in your theme.json with two different ways:
Example (theme.json): {
"version": 2,
"settings": {
"spacing": {
"blockGap": true,
}
},
"styles": {
"spacing": {
"blockGap": "1.5rem"
}
}
} Changes to the global stylesheetDefault font sizes, colors, and gradientsThe CSS for some of the presets defined by WordPress (font sizes, colors, and gradients) was loaded twice for most themes: in the We've consolidated the CSS of presets into the global stylesheet, that is now loaded for all themes. Each preset value generates a single CSS Custom Property and a class, as in: /* CSS Custom Properties for the preset values */
body {
--wp--preset--<PRESET_TYPE>--<PRESET_SLUG>: <DEFAULT_VALUE>;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--font-size--large: 36px;
/* etc. */
}
/* CSS classes for the preset values */
.has-<PRESET_SLUG>-<PRESET_TYPE> { ... }
.has-pale-pink-color { color: var(--wp--preset--color--pale-pink) !important; }
.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; } For themes to override the default values they can use the Example (sets a new value for the default large font size): :root {
--wp--preset--font-size--large: <NEW_VALUE>;
} Specificity for link colors provided by the userIn v1, when a user selected a link color for a specific block we attached a class to that block in the form of .wp-element-<ID> a { color: <USER_COLOR_VALUE> !important; } While this preserved user preferences at all times, the specificity was too strong and conflicted with some blocks with legit uses of the .wp-element-<ID> a { color: <USER_COLOR_VALUE>; } As a result of this change, it's now the block author and theme author's responsibility to make sure the user choices are respected at all times at that the link color provided by the user (specificity 011) is not overridden. |
Checking in on the status of the unchecked items in #36401 (comment).
These are in #36401 (comment). Thanks @oandregal! Let me know when you've stopped adding to it and I can proofread and publish.
Not sure actually why this needs a dev note. The mobile stuff is separate to what ends up in Core, no? @youknowriad @cameronvoell @senadir: Could you please write a dev note for this by Friday? You can post it as a comment in this thread.
@youknowriad: Could you please write a dev note for this by Friday? Maybe add it to https://make.wordpress.org/core/2022/01/04/miscellaneous-block-editor-changes-in-wordpress-5-9/?
@talldan: Could you please write a dev note for this by Friday? It would be good to include it as part of a general dev note about the Navigation block since 5.9 is the first release containing this block. You can post it as a comment in this thread. |
Oops just realised @talldan is away. @getdave: Could you please handle this? |
I also can't access the draft shared by Marcus, so am not 100% sure what's been covered already.
The border design tools as far as block supports go are still behind the That leaves the border styling via theme.json which I think André's note covers. |
This one for me was more about the upgrade to React 17 and mentioning potential small breaking changes (linking to React's blog post)
Yep, I'll do that 👍 |
Navigation block dev note
@noisysocks I've drafted the dev note for the entire Navigation block as suggested. I've used Google Docs just for the collaborative editing aspect because the post is (currently) quite long. Now seeking feedback on what to add/remove - cc @adamziel @draganescu @talldan @mkaz @javierarce @jasmussen. |
Block locking dev noteTo facilitate creating better patterns and templates, WordPress 5.9 comes with a block level locking mechanism that works alongside API definitionYou can lock a block by default if you add locking to its definition "attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true,
},
},
}, You can also lock a specific block in a pattern. In this example, the heading block is now locked and can't be removed: <!-- wp:media-text {"align":"full","mediaType":"image","verticalAlignment":"center"} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center">
<figure class="wp-block-media-text__media"><img src="https://s.w.org/images/core/5.8/architecture-04.jpg" alt="Close-up, abstract view of architecture." /></figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"textAlign":"center","level":3,"style":{"color":{"text":"#000000"}},"lock":{"remove": true}} -->
<h3 class="has-text-align-center has-text-color" id="open-spaces-1" style="color: #000000;"><strong>Open Spaces</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"extra-small"} -->
<p class="has-text-align-center has-extra-small-font-size"><a href="#">See case study ↗</a></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text --> Working alongside
|
lock.remove\templateLock | "all" |
"insert" |
false |
---|---|---|---|
true |
can't Remove | can't Remove | can't Remove |
false |
can Remove | can Remove | can Remove |
undefined |
can't Remove | can't Remove | can Remove |
For moving:
lock.move\templateLock | "all" |
"insert" |
false |
---|---|---|---|
true |
can't Move | can't Move | can't Move |
false |
can Move | can Move | can Move |
undefined |
can't Move | can Move | can Move |
Unlike templateLock
, block locking is not inheritable. If a block is locked from being removed, its children can still be removed. If you want to apply locking on children as well, add templateLock
to the inner block component, or templateLock
attribute to supporting blocks.
Nice work. A quick skim from me...
by adding locking to its definition
Suggest removing the last comma
I'd recommend you make this two separate sentences.
Amend to "add" (not "ad"). |
@noisysocks I no longer plan to update anything. |
Done ✅ |
Thanks @senadir and @getdave - I published block locking dev note here ✅ |
@oandregal @noisysocks - I published out the theme.json dev note ✅ And that closes out this tracking issue. 🎉 thanks everyone !! 👏 |
Thanks for wrangling @mkaz ❤️ 🎉 |
Did we create a note for removing the post title alignment wrapper? I see it's ticked off but I don't see any note or discussion about it. Not sure if it's important to even mention. The note itself would be pretty short. |
@ellatrix If I'm not mistaken it has been posted with some other items in this note here: Miscellaneous block editor changes in WordPress 5.9 :) |
Ah, perfect! Thanks! |
For WordPress 5.9, a Github project is being used to track dev notes and their progress. You can find the dev notes project view here - https://github.com/orgs/WordPress/projects/11/views/8.
Please share your notes here as comments or links to shared documents. The dev notes should be posted before WP 5.9 RC (30 November).
Please leave a comment if you're unable to write a note for your PR.
The text was updated successfully, but these errors were encountered: