Add justification to block toolbar in addition to sidebar #62924

shreya0204 · 2024-06-27T12:53:31Z

What?

Added justification options to the block toolbar for "type constrained" blocks.

Why?

The justification settings for other blocks, such as text blocks, are found in the toolbar. Many users overlook the settings when they are only in the sidebar, expecting them to be in the toolbar. Adding the justification options to the toolbar improves consistency and user experience.

How?

Added Justification toolBarControls of the constrained layout type blocks.

Testing Instructions

Add any "type constrained" block, such as Group or Content.
Check the toolbar to see if the justification option is available there.
Verify that the justification options are functional and behave as expected.

Testing Instructions for Keyboard

Screenshots or screencast

github-actions · 2024-06-27T12:53:47Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Nyiriland.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: Nyiriland.

Co-authored-by: shreya0204 <[email protected]>
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: jasmussen <[email protected]>

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

github-actions · 2024-06-27T12:53:57Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @shreya0204! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

jameskoster · 2024-06-28T09:02:04Z

I was looking for this option just yesterday, so I'm very happy to see this PR! In terms of design everything looks good to me, and the option seems to be working as advertised 👍

noisysocks · 2024-07-03T01:29:58Z

packages/block-editor/src/layouts/constrained.js

+
+	const justificationOptions = [
+		{
+			value: 'left',
+			icon: justifyLeft,
+			label: __( 'Justify items left' ),
+		},
+		{
+			value: 'center',
+			icon: justifyCenter,
+			label: __( 'Justify items center' ),
+		},
+		{
+			value: 'right',
+			icon: justifyRight,
+			label: __( 'Justify items right' ),
+		},
+	];
+
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			label={ __( 'Justification' ) }
+			value={ justifyContent }
+			onChange={ onJustificationChange }
+			className="block-editor-hooks__flex-layout-justification-controls"
+		>
+			{ justificationOptions.map( ( { value, icon, label } ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ value }
+						value={ value }
+						icon={ icon }
+						label={ label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);


I believe this is dead code as isToolbar will always be true. Can you simplify DefaultLayoutJustifyContentControl and remove the isToolbar prop?

Thank you for pointing this out @noisysocks . I have removed the isToolbar props and simplified the component.

jasmussen · 2024-07-03T07:16:47Z

Thanks for the PR!

t-hamano

Thanks for the PR!

I think we need to check that allowJustification is enabled in addition to allowSwitching.

For example, suppose we make the following change to the Group block to disable allowJustification:

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index db7d09c55d..ef578cff97 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -86,7 +86,8 @@
                        }
                },
                "layout": {
-                       "allowSizingOnChildren": true
+                       "allowSizingOnChildren": true,
+                       "allowJustification": false
                },
                "interactivity": {
                        "clientNavigation": true

In this case, even though the justification control will not be displayed in the sidebar, the UI will unintentionally be displayed in the toolbar:

I think we probably need code like this:

const { allowSwitching, allowJustification = true } =
	layoutBlockSupport;
if ( allowSwitching || ! allowJustification ) {
	return null;
}

shreya0204 · 2024-07-04T07:21:30Z

Thank you for the feedback @t-hamano

I've updated the implementation to include checks for both allowSwitching and allowJustification as you suggested.

Please let me know if this adjustment aligns with the expected functionality, or if there are any other modifications or improvements you would recommend.

t-hamano · 2024-07-05T08:16:18Z

Thanks for the update!

I feel this PR is okay to ship because it improves UI consistency, but I am a bit skeptical about whether this UI is really necessary in the Group variations (constrained layout) in the first place. Maybe there is another approach to remove this UI from the block sidebar.

What do you think, @tellthemachines?

tellthemachines · 2024-07-08T01:02:34Z

I am a bit skeptical about whether this UI is really necessary in the Group variations (constrained layout) in the first place.

Given that flex blocks also have the justification controls in both sidebar and block toolbar, I think it's fine to have them in both places here. If that did change, I'd expect it to change across all the layout types.

packages/block-editor/src/layouts/constrained.js

t-hamano

LGTM 🚀

…62924) * refactor: add justification to block toolbar * refactor: remove dead code * refactor: add early return checks * refactor: remove legacy attribute Co-authored-by: shreya0204 <[email protected]> Co-authored-by: noisysocks <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]>

refactor: add justification to block toolbar

69b1814

shreya0204 requested a review from tellthemachines as a code owner June 27, 2024 12:53

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 27, 2024

amitraj2203 added [Type] Enhancement A suggestion for improvement. [Block] Group Affects the Group Block (and row, stack and grid variants) [Block] Post Content Affects the Post Content Block [Feature] Layout Layout block support, its UI controls, and style output. labels Jun 27, 2024

amitraj2203 assigned shreya0204 Jun 27, 2024

jameskoster requested a review from a team June 28, 2024 08:59

jasmussen requested review from a team and SantosGuillamot and removed request for a team July 1, 2024 09:09

noisysocks reviewed Jul 3, 2024

View reviewed changes

shreya0204 added 2 commits July 3, 2024 13:27

Merge branch 'trunk' into update/add-justification-to-block-toolbar

339a821

refactor: remove dead code

7c788fc

t-hamano reviewed Jul 3, 2024

View reviewed changes

shreya0204 added 2 commits July 4, 2024 12:45

Merge branch 'trunk' into update/add-justification-to-block-toolbar

3fbfc01

refactor: add early return checks

ffeb842

tellthemachines reviewed Jul 8, 2024

View reviewed changes

packages/block-editor/src/layouts/constrained.js Outdated Show resolved Hide resolved

refactor: remove legacy attribute

aca5065

t-hamano approved these changes Jul 9, 2024

View reviewed changes

t-hamano merged commit 8784fe9 into WordPress:trunk Jul 9, 2024
61 checks passed

github-actions bot added this to the Gutenberg 18.8 milestone Jul 9, 2024

bph mentioned this pull request Oct 28, 2024

[6.7 Helphub]: Working with Blocks > Block toolbar WordPress/Documentation-Issue-Tracker#1790

Open

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add justification to block toolbar in addition to sidebar #62924

Add justification to block toolbar in addition to sidebar #62924

shreya0204 commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024

jameskoster commented Jun 28, 2024

noisysocks Jul 3, 2024

shreya0204 Jul 3, 2024

jasmussen commented Jul 3, 2024

t-hamano left a comment

shreya0204 commented Jul 4, 2024

t-hamano commented Jul 5, 2024

tellthemachines commented Jul 8, 2024

t-hamano left a comment

Add justification to block toolbar in addition to sidebar #62924

Add justification to block toolbar in addition to sidebar #62924

Conversation

shreya0204 commented Jun 27, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Jun 27, 2024 • edited Loading

Unlinked Accounts

github-actions bot commented Jun 27, 2024

jameskoster commented Jun 28, 2024

noisysocks Jul 3, 2024

Choose a reason for hiding this comment

shreya0204 Jul 3, 2024

Choose a reason for hiding this comment

jasmussen commented Jul 3, 2024

t-hamano left a comment

Choose a reason for hiding this comment

shreya0204 commented Jul 4, 2024

t-hamano commented Jul 5, 2024

tellthemachines commented Jul 8, 2024

t-hamano left a comment

Choose a reason for hiding this comment

shreya0204 commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading