Block editor: remove __unstableElementContext and filter EditorStyles instead
#52888
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ellatrix
commented
Jul 24, 2023
| @@ -163,11 +163,9 @@ function getPresetsSvgFilters( blockPresets = {} ) { | |||
| .filter( ( origin ) => presetByOrigin[ origin ] ) | |||
| .flatMap( ( origin ) => | |||
| presetByOrigin[ origin ].map( ( preset ) => | |||
| renderToString( | |||
There was a problem hiding this comment.
Notice how we also get rid of this renderToString call.
ellatrix
commented
Jul 24, 2023
|
Size Change: +1.17 kB (0%) Total Size: 1.53 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 715d47f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6107870529
|
ellatrix
requested review from
matiasbenedetto,
ajlende,
scruffian and
MaggieCabrera
|
@ellatrix, the description mentions |
|
@Mamaduka Fixed the link. Github has changed some of the links to relative hash links, so when I paste links into Github they assume its the same PR... |
|
I like the idea of keeping every style preset in a single location/setting. This matches behavior on the PHP side. Concerns
|
|
A proposal to prevent the race conditions: #53516 |
ellatrix
force-pushed
the
remove/block-list-element-context
branch
from
097b351
to
935f69a
Compare
|
Ok, rewrote the PR to filter the styles instead of going through editor settings. |
ellatrix
changed the title
__unstableElementContext and filter EditorStyles instead
Mamaduka
reviewed
Aug 10, 2023
Mamaduka
reviewed
Aug 10, 2023
ellatrix
requested review from
noisysocks,
draganescu,
talldan,
tellthemachines,
adamziel and
kevin940726
as code owners
|
Okay, great. Thanks for confirming @youknowriad! @ellatrix I think from the sounds of it there's nothing to worry about in this PR, then, and we can explore our options for the render behaviour in follow-ups 🙂 |
ellatrix
force-pushed
the
remove/block-list-element-context
branch
from
935f69a
to
0a0949e
Compare
|
Cool thanks! It sounds good if other ideas are explored. My goal with this PR however is to remove the portals and consolidate around |
|
@Mamaduka I addressed your feedback :) |
youknowriad
reviewed
Sep 7, 2023
| deleteStyleOverride, | ||
| ] ); | ||
|
|
||
| return null; |
There was a problem hiding this comment.
Minor: If it's not a public Api, this DuotoneStyles component could probably be a useDuotoneStyles hook since it renders nothing.
There was a problem hiding this comment.
Well, that's exactly the whole point of this PR 👍
There was a problem hiding this comment.
Actually, I do want to wait a bit with until we refactor duotone more. There's a shouldRender condition that would be removed. It would be good if we can prevent a bunch of hooks like useSetting from doing anything if it's not needed for that block. I'd rather wait when we look into refactoring this whole API so we don't impact performance.
|
I didn't test but this is very cool 👍 |
|
Fixed |
ellatrix
force-pushed
the
remove/block-list-element-context
branch
from
e582e07
to
f5341ea
Compare
Mamaduka
reviewed
Sep 14, 2023
Mamaduka
approved these changes
Sep 14, 2023
This was referenced Sep 14, 2023
This was referenced Sep 28, 2023
|
I wonder if this is the same issue that @andrewserong discovered here: #54493 (review). |
|
I don't think so, at least not if it's related to id collision, because the blocks that aren't getting their styles output all have different ids. |
|
Just added a comment on the linked issue (#54956 (comment)), this sure is a weird one! I'm wondering if previews might have issues since they have settings passed down to their block editor providers from above, so updates to state within the previews might not be propagating up to the "real" block editor store? |
|
@ellatrix Any ideas why this method of adding styles to editor settings no longer works for me in the Site Editor but still works in Post Editor (WP 6.3.2/6.4-RC2). As for it re-transforms every style: For me this is performing very badly as I can have hundreds of styles. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
TO DO: do think for every filter using
BlockList.__unstableElementContext, but if it works for Duotone, it will work for the rest too. We can look at these in separate PRs.This PR aims to eliminate
BlockList.__unstableElementContext, which is currently only necessary to add style elements and SVGs. While working on Allow styles to be changed dynamically through editor settings, I realised that we could use thestylesblock editor setting instead. I also realised that we're actually using this for the Duotone Global Styles Presets, so this make it even more appealing.What we can do is filter the editor styles setting through the
EditorStylescomponent through context: pass down a callback to update/clear a given style with id. Not only can this be used to add new styles with new ID, but you can also filter/take over server rendered styles.For now, this is better because we no longer need to render anything in the React tree and it makes it easier to design a new API.
Why?
Currently, we can't refactor
editor.BlockListBlockbecause of the need to portal styles and svgs. This PR removes this need.How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast