-
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
Fix: Conditionaly apply Editor Skeleton html element styles #20245
Fix: Conditionaly apply Editor Skeleton html element styles #20245
Conversation
@@ -17,6 +32,7 @@ function EditorSkeleton( { | |||
publish, | |||
className, | |||
} ) { | |||
useHTMLClass( 'block-editor-editor-skeleton-html-container' ); |
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.
Maybe more something like block-editor-editor-skeleton__html-container
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 didn't test but this seems like a good change to me.
6e19443
to
b9bbeeb
Compare
function useHTMLClass( className ) { | ||
useEffect( () => { | ||
const element = | ||
document && document.querySelector( `html:not(.${ className }` ); |
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.
Previously editor skeleton applied styles to the HTML element unconditionally.
This PR makes sure the styles are only applied if the component is mounted.
Related: #20214 (comment)
It is important to get this in 5.4 because many blocks may have a bug where block editor styles are being enqueued without need and without this change we may be breaking the mobile experience for users with one of these blocks installed.
How has this been tested?
I verified the editor still works as expected on mobile.
I verified the styles for the new class are being loaded.