Skip to content

Try: Remove alignments from paragraph toolbar. - #83945

Closed
jasmussen wants to merge 2 commits into
trunkfrom
try/remove-alignments-from-avatars
Closed

jasmussen wants to merge 2 commits into
trunkfrom
try/remove-alignments-from-avatars

Conversation

@jasmussen

Copy link
Copy Markdown
Contributor

What?

Followup to #83265 and related to this chat. It effectively reverts #73958 and removes the block alignment option from the Paragraph block.

Before:

image

After:

image

I realise this will be controversial, so let me get the basics out of the way: the back compat will be there through existing CSS classes, and the motivation is a simpler and more glanceable toolbar, with the implication: if you want wide or full-wide blocks, group them and align the group.

Why?

An option is to close this one. But I've opened this to have a discussion around block toolbar length, specifically because of this chat which very reasonably points out that the toolbar can't keep growing endlessly. We have to have plans and systems for when we add something to it. This is especially pertinent since it's being considered adding both a Trash button, and a "add note" button to the toolbar:

image

We are bursting at the seams and are reaching a crossroads. It seems we have to decide, what is it for? Until we do, we don't have a good system for deciding what goes there, vs. what doesn't.

Options

It seems we can go two ways: either allow every relevant option possible right in the toolbar, and build a system that allows it to scale to narrow contexts, including mobile. This will likely require some form of eliding buttons or even segments into the ellipsis menu as the viewport grow narrower.

Or, decide that the block toolbar is a curation mechanism. Put every genuinely useful button there and optimise the design for it, but be judicius in what is considered genuinely useful. The precise specs for what we deem "genuinely useful" is part of the discussion we should have. But crucially: it can't be everything. We draw a line in the sand.

Part of drawing that line could be to make more, or all of the block toolbar options available in the inspector in addition to the block toolbar. There's a related discussion here. If block alignments, for example, were globally available in the block toolbar, we could be intentional and suggest only group blocks get those on the block toolbar. The heuristic could be fairly simple: groups get layout tools, text blocks (Paragraph, Heading, List, Quote) get primarily inline formatting tools.

Use of AI Tools

Opus 5.

@jasmussen
jasmussen requested review from a team and youknowriad October 1, 2026 08:49
@jasmussen jasmussen self-assigned this Oct 1, 2026
@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. labels Oct 1, 2026
@github-actions github-actions Bot added [Package] Block library /packages/block-library [Package] Block editor /packages/block-editor labels Oct 1, 2026
@github-actions

github-actions Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: -7 B (0%)

Total Size: 8.25 MB

📦 View Changed
Filename Size Change
build/scripts/block-library/index.min.js 366 kB -7 B (0%)

142dcfe Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric 73f827b trunk % Change
timeToFirstByte 39.85 ms +13.3% -3.39% 40.9 ms +3.3% -4.16% -2.57%
largestContentfulPaint 68 ms +14.71% -5.88% 68 ms +8.82% -5.88% 0%
lcpMinusTtfb 27.55 ms +14.16% -7.26% 28.35 ms +8.82% -14.29% -2.82%
wpBeforeTemplate 19.2 ms +15.63% -1.82% 19.56 ms +8.08% -3.63% -1.84%
wpTemplate 17.43 ms +7.11% -4.65% 17.56 ms +5.81% -2.51% -0.74%
wpTotal 36.63 ms +13.65% -3.06% 37.89 ms +3.83% -4.17% -3.33%
wpMemoryUsage 7.62 MB +0% -0% 7.59 MB +0% -0% 0.44%
wpDbQueries 17 +0% -0% 17 +0% -0% 0%

front-end-classic-theme

Metric 73f827b trunk % Change
timeToFirstByte 33.55 ms +9.54% -2.09% 33.4 ms +5.24% -4.34% 0.45%
largestContentfulPaint 76 ms +5.26% -5.26% 72 ms +2.78% -0% 5.56%
lcpMinusTtfb 42.05 ms +2.5% -5.11% 39.9 ms +1.25% -3.26% 5.39%
wpBeforeTemplate 17.15 ms +12.71% -2.27% 17.23 ms +6.44% -4.29% -0.46%
wpTemplate 13.33 ms +8.18% -4.05% 13.3 ms +4.44% -4.81% 0.23%
wpTotal 30.89 ms +9.45% -2.4% 30.95 ms +4.94% -4.91% -0.19%
wpMemoryUsage 6.25 MB +0% -0% 6.20 MB +0% -0% 0.69%
wpDbQueries 14 +0% -0% 14 +0% -0% 0%

media-processing

Metric 73f827b trunk % Change
mediaProcessingJpeg 288.96 ms +7.12% -0.69% 284.69 ms +3.03% -0.77% 1.5%
mediaProcessingAvif 4167.95 ms +0.95% -1.14% 4206.88 ms +1.59% -1.19% -0.93%
mediaProcessingJpegToAvif 2808.63 ms +3.63% -0.41% 2840.56 ms +1.9% -1.05% -1.12%

media-upload

Metric 73f827b trunk % Change
jpegUploadProcessing 1411.21 ms +0.28% -1.3% 1394.04 ms +0.59% -0.42% 1.23%
pngUploadProcessing 170.93 ms +5.02% -2.78% 167.53 ms +4.21% -5.7% 2.03%
largeJpegUploadProcessing 1386.34 ms +0.99% -0.56% 1393.55 ms +1.11% -0.87% -0.52%
multipleImageUploadProcessing 1467.04 ms +0.84% -0.98% 1469.02 ms +1.46% -0.44% -0.13%

post-editor

Metric 73f827b trunk % Change
serverResponse 305.96 ms +2.32% -2.67% 304.03 ms +10.37% -9.09% 0.63%
firstPaint 192 ms +7.5% -26.22% 131.13 ms +107.7% -13.34% 46.42%
domContentLoaded 766.07 ms +1.34% -2.86% 740.54 ms +2.51% -1.68% 3.45%
loaded 767.12 ms +1.36% -2.84% 741.72 ms +2.48% -1.69% 3.42%
firstContentfulPaint 327.91 ms +4.07% -2.58% 320.62 ms +2.21% -5.34% 2.27%
firstBlock 2236.52 ms +1.87% -1.1% 2224.79 ms +1.48% -0.82% 0.53%
type 15.83 ms +2.59% -0.57% 15.79 ms +4.75% -2.85% 0.25%
typeWithoutInspector 15.84 ms +1.83% -3.16% 15.63 ms +5.05% -4.09% 1.34%
typeWithTopToolbar 20.71 ms +2.66% -3.43% 20.34 ms +3.93% -3.29% 1.82%
typeContainer 7.5 ms +4.53% -3.47% 7.5 ms +7.73% -6.13% 0%
focus 53.43 ms +3.76% -2.96% 58.9 ms +3.14% -2.51% -9.29%
firstFocus 165.97 ms +0% -0% 172.79 ms +0% -0% -3.95%
selectAll 335.22 ms +0.33% -0.1% 351.24 ms +4.54% -3.59% -4.56%
listViewOpen 45.73 ms +6.8% -7.68% 47.52 ms +6.67% -6.67% -3.77%
inserterOpen 18.45 ms +17.78% -4.28% 19.96 ms +16.23% -11.57% -7.57%
inserterHover 1.92 ms +12.5% -20.83% 1.94 ms +20.1% -14.43% -1.03%
inserterSearch 7.49 ms +7.21% -10.55% 7.76 ms +3.74% -6.83% -3.48%
loadPatterns 476.48 ms +3.32% -2.52% 474.48 ms +0.46% -0.43% 0.42%
wpTotal 298.26 ms +2.31% -2.73% 295.8 ms +10.83% -9.19% 0.83%
wpMemoryUsage 13.16 MB +0% -0% 13.13 MB +0% -0% 0.24%
wpDbQueries 54 +0% -0% 54 +0% -0% 0%

site-editor

Metric 73f827b trunk % Change
serverResponse 293.73 ms +7.93% -5.47% 312.77 ms +2.71% -7.91% -6.09%
firstPaint 268.67 ms +33.6% -33.28% 185.3 ms +35.26% -7.72% 44.99%
domContentLoaded 867.36 ms +0.82% -2.33% 879.26 ms +0.48% -1.51% -1.35%
loaded 868.43 ms +0.81% -2.33% 880.36 ms +0.47% -1.53% -1.36%
firstContentfulPaint 355.06 ms +1.88% -3.57% 353.33 ms +2.32% -1.07% 0.49%
firstBlock 3142.04 ms +0.66% -2.15% 3089.31 ms +1.4% -0.83% 1.71%
type 14.61 ms +6.16% -3.76% 15.39 ms +3.96% -2.6% -5.07%
navigate 93.67 ms +14.17% -7.43% 94.71 ms +5.86% -7.37% -1.1%
loadPatterns 972.27 ms +1.83% -2.01% 980 ms +1.66% -13.78% -0.79%
loadPages 1023.07 ms +1.25% -1.75% 1025.35 ms +2.79% -0.28% -0.22%
wpTotal 285.37 ms +8.06% -5.55% 304.47 ms +2.83% -8.07% -6.27%
wpMemoryUsage 12.14 MB +0% -0% 12.11 MB +0% -0% 0.3%
wpDbQueries 44 +0% -2.27% 44 +0% -2.27% 0%

142dcfe Run

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

should cut and paste individual blocks with collapsed selection in /test/e2e/specs/editor/various/copy-cut-paste.spec.js, passed after 1 failed attempt.
Error: expect(string).toMatchSnapshot(expected) failed

  @@ -1,3 +1,3 @@
   <!-- wp:paragraph -->
  -<p>2Cut - collapsed selection</p>
  +<p>2</p>
   <!-- /wp:paragraph -->


    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/copy-cut-paste.spec.js:45:49

142dcfe Run

@fabiankaegy

Copy link
Copy Markdown
Member

I sympathize with the want of shortening the toolbar, and I think that that's an admirable goal that we should strive towards. I'm just not sure how I feel about the actual implementation detail of this.

Yes, technically speaking, you can use the alignment controls of a group block to control its inner children. However, the way that it's currently working today, where you have to manually opt out of the inner block alignment, is just too difficult for most regular users to grasp. It's more of a power feature to understand the concept of group layout controls, and I'm worried that if we go this direction, it's really going to make this much more difficult for users.

I personally would prefer us to keep all of the options there somehow exposed (even if we make them more hidden in the UI), but allow the alignment controls to still be present on every single block, including the paragraph block.

@jasmussen

Copy link
Copy Markdown
Contributor Author

Moving over a comment I posted on the wrong PR! 🙈

Incidentally that also responds to your feedback, Fabian:

If we wanted to keep the block alignment as an option, it could be an option that lived in the Layout panel for all blocks. Whether we show it by default, or have you add it via the ToolsPanel, we can discuss, and here's a mockup:

Paragraph

Noting that the dropdown could be a ToggleGroupControl (segmented control) instead, but if we did that, we'd miss out on the ability to, in the dropdown, show help text for unavailable widths.

@paaljoachim

paaljoachim commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

Hmmm....One thing that for me feels consistent well kind of anyway (perhaps just a wish). Is having the alignment icon in the toolbar for all blocks where it is needed. Also for blocks that have to do with text having text alignments. As the toolbar is the most obvious place for the options that are most needed or used. Customers can add blocks but adding Group blocks and then inner blocks that is one more step which becomes too advanced for many customers. Moving alignments to the sidebar they become more hidden and not so easily seen.

Btw the alignment through Group block and the toggle for alignment in the sidebar....I still find that confusing.

@jasmussen

Copy link
Copy Markdown
Contributor Author

Opened #83955 as an alternative to this.

@jasmussen
jasmussen force-pushed the try/remove-alignments-from-avatars branch from 41a7821 to 142dcfe Compare October 1, 2026 11:09
@t-hamano

t-hamano commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

Even if we remove a single button from the Paragraph block's toolbar, we will likely encounter the same issue again soon. The toolbar can be easily extended by plugins. In any case, block supports should not be removed from the Paragraph block. These supports have already changed many times in the past.

@jasmussen

Copy link
Copy Markdown
Contributor Author

I appreciate the looks. @youknowriad gave a similar opinion here. I think it's important we have explored this territory, just so we're knowingly moving forward.

In that sense, I think I'll close both of these. What do you think of #83265, though? Still worth keeping?

@jasmussen jasmussen closed this Oct 2, 2026
@t-hamano
t-hamano deleted the try/remove-alignments-from-avatars branch October 2, 2026 10:53
@t-hamano

t-hamano commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

I think #83265 is still worth keeping, as it simply hid unavailable options rather than disabling alignment block support itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants