-
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
Outline editable blocks when in a pattern that has locked children #57991
Outline editable blocks when in a pattern that has locked children #57991
Conversation
Use :has() to outline editable blocks that are within a pattern that has locked children but are themselves not locked. For example a pattern that has multiple paragraphs, not in a container, and some of those paragraphs allows an override.
Size Change: +72 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
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 quick follow-up @noisysocks! This is working nicely for me now with a pattern where the partially synced block is at the root level of the pattern:
Everything is still testing well when editing a page in the site editor and a content locked pattern in the post editor 👍
I know previously the :has()
pseudo-class had been avoided in GB due to delayed FF support. It looks like support appears to be pretty good now and :has()
is already in use in a couple of other places (e.g. here). Since this isn't critical CSS (i.e.nothing would break if these rules don't work in older versions of Firefox), the inclusion here seems safe to me.
LGTM! ✨
Yeah I feel comfortable using this throughout Gutenberg now that Firefox has added support. |
What?
Follow up to #57901.
Use
:has()
to outline editable blocks that are within a pattern that has locked children but are themselves not locked. For example a pattern that has multiple paragraphs, not in a container, and some of those paragraphs allows an override.Why?
Fixes the edge-case noticed by @andrewserong in #57901 (comment).
Testing Instructions
See #57901.