Skip to content
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

Login/out: add spacing support #45147

Merged
merged 14 commits into from
Sep 27, 2023
Merged

Login/out: add spacing support #45147

merged 14 commits into from
Sep 27, 2023

Conversation

carolinan
Copy link
Contributor

@carolinan carolinan commented Oct 20, 2022

What?

Adds margin and padding support to the login/out block.

Why?

For consistency. Part of #45147.

How?

The PR adds spacing support to block.json.

Testing Instructions

Make sure that the active theme supports spacing, for example, in theme.json.
Create a new post or page.
Add login/out block.
Confirm that there is a dimension panel, and that the margin and padding settings are available but not enabled by default.
Test the margin and padding settings in the editor and front.

-Go to the Site Editor, add a login/out block, and change the margin and padding via the block settings in the Styles sidebar.
-Adjust the spacing and margin via theme.json.

Example theme.json code: add this to styles > blocks:

"core/loginout": {
				"spacing": {
					"padding": {
						"top": "15px",
						"right": "15px",
						"bottom": "15px",
						"left": "15px"
					},
					"margin": {
						"top": "150px",
						"right": "15px",
						"bottom": "150px",
						"left": "15px"
					}
				}
			},

Screenshots or screencast

login-out.mp4
@codesandbox
Copy link

codesandbox bot commented Oct 20, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@carolinan carolinan added [Block] Login/out Affects the Login/out Block [Type] Enhancement A suggestion for improvement. labels Oct 20, 2022
@carolinan carolinan marked this pull request as ready for review October 20, 2022 09:18
@carolinan carolinan added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Nov 3, 2022
@carolinan carolinan added [Status] Blocked Used to indicate that a current effort isn't able to move forward and removed Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code labels Nov 16, 2022
@carolinan carolinan requested a review from ndiego as a code owner May 20, 2023 03:11
@github-actions
Copy link

github-actions bot commented May 20, 2023

Flaky tests detected in 652fae1.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5517930788
📝 Reported issues:

@carolinan carolinan removed the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Aug 7, 2023
@carolinan
Copy link
Contributor Author

carolinan commented Aug 7, 2023

Left and right margin isn't doing anything in the block editor if "Inner blocks use content width" is enabled. How should we handle it? Only enable vertical margin?

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for continuing to chip away at design tool adoption @carolinan 👍

Left and right margin isn't doing anything in the block editor if "Inner blocks use content width" is enabled. How should we handle it? Only enable vertical margin?

Other blocks still adopt support for horizontal margins as individual blocks can be nested within a container block. In that case, the individual block isn't constrained by layout styles.

With regards to this PR, the spacing support styles for this block are working as I'd expect them to.

There's one small tweak I think needs to be made though. With #52256 blocks such as this one are having their dimension controls hidden by default. I think we should do the same here.

I've left the suggested tweak as an inline comment.

packages/block-library/src/loginout/block.json Outdated Show resolved Hide resolved
carolinan and others added 2 commits August 8, 2023 06:29
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM and is working as advertised 👍

The spacing controls are now hidden by default and match other blocks.

Thanks for your patience on this @carolinan 🙇

@carolinan
Copy link
Contributor Author

Got to catch them all... I mean, fix them all ;) Even if it takes time.

@carolinan carolinan merged commit b813d3d into trunk Sep 27, 2023
50 checks passed
@carolinan carolinan deleted the update/loginout-spacing branch September 27, 2023 07:12
@github-actions github-actions bot added this to the Gutenberg 16.8 milestone Sep 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Login/out Affects the Login/out Block [Type] Enhancement A suggestion for improvement.
2 participants