-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Remove duplication of editor styles #28837
Conversation
Size Change: -103 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
Might need #27768 for this. |
👋 Gave this a try with and without the latest changes in Referring to my comment at #28731 (comment) here's some testing instructions for this PR:
|
e0eb851
to
04a5c50
Compare
@nosolosw Added the dependencies through |
😔 It still doesn't work for me: it fails when the |
@nosolosw Does it work now? It does in my tests. |
Updated: it works! Also: it turns out I was wrong here #28731 (comment) We don't need the styles for the host document in site editor, only for the iframe. Apparently, the UI components no longer use the CSS Custom Properties but take the raw values from the store. |
{ /* Use an empty style element to have a document reference, | ||
but this could be any element. */ } | ||
<style ref={ useDarkThemeBodyClassName( styles ) } /> | ||
{ transformStyles( styles, EDITOR_STYLES_CLASS_NAME ).map( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The only behavioral change I've noticed here is that we no longer remove falsy values from the array. I'm unsure what use case this aimed to cover, given the styles are provided by add_editor_styles
. Flagging in case you know more about this.
<> | ||
{ /* Use an empty style element to have a document reference, | ||
but this could be any element. */ } | ||
<style ref={ useDarkThemeBodyClassName( styles ) } /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is wrong? Should be [ styles ]
. Or am I missing something?
In practice, passing dependencies variable around is rarely a good practice, as it's very easy to miss these kinds of bugs. That's also why #24914 disable this usage. Writing them all explicitly is not a bad idea IMO.
useDarkThemeBodyClassName
could probably just be written as:
function useDarkThemeBodyClassName(styles) {
return useCallback(
// ...
, [styles]);
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
styles
is an array so it would only update if one of the values changes. Not sure when the array reference itself changes. I'll change it back to what it was.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the clean-up!
@ellatrix I have a larger question that's unrelated to this PR: wasn't the purpose of the iframe to remove the need for |
@nosolosw Yes, it is, but I just kept everything the same so for now to make things easier and consistent between post editor and site editor. We can probably remove it. |
43d1d6e
to
9e84b5c
Compare
9e84b5c
to
5c981c8
Compare
Description
Rewrites #28731 to avoid duplication of code.
How has this been tested?
Screenshots
Types of changes
Checklist: