Try: Add a clickable Group setup state #40664
Merged
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
jasmussen
added
[Type] Enhancement
|
Size Change: +233 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
Another benefit of adding this extra click is that it gives you a chance to see exactly what block you'll be inserting into. Before, there was no easy way to know that you were inserting into a Group block versus some other container block e.g. a Column. |
|
I like this but I also wonder whether using the "block overlay" (when the group is empty) could be a good way to implement this without adding a specific solution to the group block. It's something we'd be able to leverage pretty easily after we land #40649 |
|
Happy to see a solution to this one! Should we apply the same treatment to empty columns? It always bugs me to see the [+] when using columns for layout. Tangentially, is it necessary to simulate multiple blocks in empty rows/stacks? I'm wondering if all empty groups could have the same appearance.
The dashed outline isn't unique, we use it for other placeholders like Featured Image and Site Logo. |
Agreed, and now for Navigation as well. But if I read Riad's comment right, what we need is a more generic solution, rather than one that requires custom CSS on a per-block basis. In this case, I don't know how to best do that, though: and the Row/Stack blocks have some bespoke CSS to make this happen as well for the emulated row and stack appearances. So I guess the question is, how generic can we be without those blocks losing their setup-state appearance? |
If we could make it generic as suggested above, we might get this for free. Then the row and stack blocks would be the exceptions to the "generic" rule 🤔 |
Yes, that's exactly my suggestion :) Basically we could just pass Basically my suggestion is the following: When the group blocks are empty, enable the overlay mode (like template parts and reusable blocks). |
|
Do we definitely want to retain overlay mode? (context: #32163 (comment)) |
jasmussen
force-pushed
the
try/group-click-state
branch
from
1735184
to
df535db
Compare
|
Coming back to this one, I've rebased it and fixed an issue with a classname change. As a reminder, here's before: Here's after:
It's not a ton of CSS, and it arguably improves the empty setup state of the group. Should we land it? We can always tear out the CSS again if/when we're able to look at a more generic overlay state? |
jameskoster
approved these changes
Aug 5, 2022
|
Thank you. Looks like the test failure is legitimate, so I'll have to look into that. |
|
This PR, as it turns out, is slightly blocked on #43115 which is a bit more urgent. |
|
This will need a rebase after #43169 is landed. |
jasmussen
force-pushed
the
try/group-click-state
branch
from
df535db
to
0d6cce1
Compare
|
This one is ready for another view. It's rebased per recent changes, and it fixes an issue with nested empty groups or rows. Here's some test content: |
|
Still working well for me :) Seeing as the placeholder style is beginning to pop up in a few places, should we create a mixin so that it's easier to update? |
We should do something, yes. Mixin may be the most straight-forward, I can try that next week. I was hoping for some of the placeholder stuff we could componentize, but we may need both 🤔 Thanks for testing! |
This was referenced Aug 22, 2022
30 tasks
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?
Fixes #33025.
This is a pretty experimental PR, I'd love thoughts on whether this is fundamentally a good idea.
If you insert an empty group block, there's a big appender button to add content inside. That's good enough, as your next step is likely going to be filling in the group. The downside is that you can't, in the canvas, select an empty group to delete it, because you always click the inserter button when trying to select the empty group, as shown in this gif:
This PR follows in the footsteps of changes to the Row and Stack variations, and lets the block have a resting state showing a dashed outline — a literal placeholder. On select, the appender button becomes visible. In effect this means you can select and delete the block, or you can select the block and then click again to insert content inside, as shown in this gif:
Why?
The ability to select the row and stack blocks without invoking the inserter popout is a nice aspect that I find myself missing on the base Group block.
Testing Instructions
Insert an empty group block. Deselect it, then select it again.
Be sure to test drag and drop, uploads, and various other container blocks. These changes should not affect any of those, and should only change the appearance of the empty group.