Outline editable blocks that are within a content-locked container #57901
Conversation
Show an outline and pencil icon on blocks that are within a content-locked container (.is-editing-disabled). This allows users to more easily see which content can be modified when editing content-locked patterns, patterns with overrides, and pages.
noisysocks
added
[Type] Enhancement
|
Size Change: +1.45 kB (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Very cool! The pencil icon improves the clarity of which blocks are editable quite a lot 👍
I ran into a couple of visual issues while testing. I'm wondering if it'd be worth exploring the pencil icon as a Popover that gets rendered over the block a bit like the block toolbar, rather than using ::before rules on the block itself? I noticed a couple of conflicts while using TwentyTwentyFour:
Using the linked content-only pattern, I tried adding a Heading block to that markup, using TT4's With asterisk block style. That block style uses a :before rule, so the styling rules here wind up conflicting with it if it's included in the content-only template (note the blue asterisk over the second heading on the left)
Also, for short blocks, the pencil icon can look a bit prominent as in the short descriptions in the above. I also noticed it can look a bit noisy if there's a lot of pencil icons on the page at once. This could be nit-picky territory, but would it be worth fading them in when the mouse cursor moves, and hiding them when a user starts typing, or something like that? Part of my concern is that with patterns as in the above, it's hard for the user to get a clean WYSIWYG view as the blue border and pencil icons can be a bit distracting once you've filled out the info.
Overall, though, I think the pencil icon is a terrific idea for guiding the user to the editable content!
What do you think the best design solution is @SaxonF? Some ideas:
This is tricky. I'm not sure what the expectations are regarding compatibility with themes using Possible solutions:
Any other ideas?
Maybe we could only show them when the pattern is selected? What do you think @SaxonF? |
|
Nicely summed up @noisysocks!
I ran into this once when hacking on a theme where I wanted to apply some effects in block styles. It was a bit of a bummer not being about to use
|
|
Flaky tests detected in 7a0018c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7577323323
|
|
Thanks for those changes @SaxonF. (He removed the pencil icon, made the outline a dashed line, and made the outline only appear when hovering the canvas.) I went a bit further and made it so that the outlines only appear when hovering over the content-locked pattern. That way we're not overwhelming the user with lots of blue rectangles when a template has multiple locked patterns. Kapture.2024-01-19.at.10.41.35.mp4Pretty happy with this! |
There was a problem hiding this comment.
This is looking terrific to me, nice work @SaxonF and @noisysocks on pulling it back so that it plays nicely with themes that use ::before and making it feel less intrusive overall!
✅ Works nicely with content only patterns:
2024-01-19.11.22.34.mp4
✅ Works well with template locked pages:
2024-01-19.11.23.53.mp4
(I noticed that the ::after rule means that the dotted border doesn't pick up the rounded corners of the featured image block in my template — that doesn't feel like an issue to me as it's clear what the box is doing. Just thought I'd mention it in case it wasn't intentional, though)
❓ I couldn't see it working for patterns with instance overrides after insertion. Is there a different rule that they need, or did I miss anything in my testing? I switched on the pattern overrides experiment, made one of the paragraphs in my pattern allow overrides and it looks like it's inserting correctly, but doesn't get the new borders:
That last one doesn't feel like a blocker to landing to me, especially since the pattern overrides is currently behind an experiment. But I imagine it'd be good to add it to that one, too?
LGTM! ✨
Update: my pattern had the blocks all at the root level of the pattern, which is why the border wasn't showing:
When wrapping in a Group block, the border shows correctly:
That doesn't feel like a blocker to landing to me, though! |
|
I regret to bring this up now as opposed to earlier, but having felt this in trunk for a few days now, I think this is one of the parts of #55025 that in practice isn't really making it any clearer what's editable and not. There are some added hover outlines, but it isn't clear they are indicating what's editable or not, given that the mode you're in isn't any clearer. So unfortunately it ends up becoming very noisy in practice, especially in nested context like groups and other containers, where the outlines start to stack up. It reminds me of past similar efforts like #44775 and #44774, with the main take-away being, it's surprisingly hard to get this right, in a way that aids building but without affecting the writing flow. And since the writing flow is, ultimately, part of what this was meant to solve, maybe we want to rewind this one, and regroup. |
|
@jasmussen we can maybe look at adding a preference ? Or show the outlines then fade them out over time? I'd rather not revert because I'm confident from a usability standpoint this is an improvement over what we have. It should only highlight post title, feature, content block so the stacking shouldn't really matter . |
Could we fix this instead of reverting? Part of #55025 is to make it more obvious when you're editing a template. Perhaps we can do the inverse as well.
Could you please elaborate on this a bit? When editing a page they should only appear on three blocks (post title, featured image, post content) and when editing a pattern with overrides or a pattern with Locked content is becoming more proliferous in the site editor so I think it's important we do something to indicate what's editable 😀 |
I have to agree. I don't think this is really helping communicate that something is editable.
What about if the effect was only applied on hover of the element that can be edited? Instead of hovering the whole page/pattern and all editable blocks are outlined? Essentially the block outline is dotted for editable blocks. Have we tried this? Currently it's a bit too dramatic to essentially always have dotted borders on those editable blocks. |
@richtabor How come? By highlighting blocks that are editable we are drawing attention to them. Without this, a user has to hover around the canvas until something lights up which could potentially lead to clicking on an area within the template vs page.
Unless I'm misunderstanding but that would defeat the purpose. You can't currently hover over elements that aren't editable when editing a page with template visible, so that's just existing behaviour. There are a few changes we can make to reduce the prominence
This would mean the dotted highlight would mostly disappear as you're designing your page (in post content block) and be more prominent when a page is blank |
|
Here's how that looks in practice: Kapture.2024-01-23.at.17.52.51.mp4You can play with it yourself here: #58152 |
Updates the editable block outlines that appear within content-locked containers (added in #57901) to appear and then fade out after 3s when: - The page loads; or - The user clicks on the content-locked container. This is done via a private useFlashEditableBlocks() hook attached to the container.
Updates the editable block outlines that appear within content-locked containers (added in #57901) to appear and then fade out after 3s when: - The page loads; or - The user clicks on the content-locked container. This is done via a private useFlashEditableBlocks() hook attached to the container.
* Flash editable block outlines instead of always showing them Updates the editable block outlines that appear within content-locked containers (added in #57901) to appear and then fade out after 3s when: - The page loads; or - The user clicks on the content-locked container. This is done via a private useFlashEditableBlocks() hook attached to the container. * Don't show outlines when site editor is in view mode * Prevent outlines from flashing when selecting an editable inner block * Fix React warning * Avoid multiple calls to getBlockEditingMode() * Flash editable outlines on template patterns with templateLock = 'contentOnly' * Reduce fade out delay
What?
Show an outline and pencil icon on blocks that are within a content-locked container (
.is-editing-disabled). This allows users to more easily see which content can be modified when editing content only locked patterns, patterns with overrides, and pages.Why?
See #55025.
How?
Use CSS to show an outline and icon on the top-most blocks within an
.is-editing-disabledblock that do not have.is-editing-disabled.Testing Instructions
The outlines should should appear when editing a content only locked pattern, a pattern with instance overrides, and a page in the site editor.
Content only locked patterns:
contentOnlylock. Here's an example of one.Pattern with instance overrides:
Page in the site editor:
Screenshots or screencast
Kapture.2024-01-17.at.11.49.49.mp4