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

Spacer: add spacing block supports #43366

Merged
merged 1 commit into from
Aug 19, 2022
Merged

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Aug 18, 2022

Related:

What?

Enabling axial margin support for the spacer block.

Why?

To create consistency across blocks.

How?

Adding the relevant block supports in block.json

Testing Instructions

  1. Load the block editor and add a Video block. Add some content or use the example block code below.
  2. Confirm that the dimensions control panel is there and the margin control is shown by default.
  3. Add margins / axial margins.
  4. Save and confirm the styles appear on the frontend.
  5. Test the new support works for the block via theme.json and global styles. See example JSON below.
	"styles": {
		"blocks": {
			"core/spacer": {
				"spacing": {
					"margin": {
						"top": "120px",
						"bottom": "140px"
					}
				}
			}
		}
	}
2022-08-18.19.50.22.mp4

@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. [Block] Spacer Affects the Spacer Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Aug 18, 2022
@ramonjd ramonjd requested a review from ajitbohra as a code owner August 18, 2022 09:56
@ramonjd ramonjd self-assigned this Aug 18, 2022
@apeatling apeatling self-requested a review August 18, 2022 17:55
Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

Everything is working except for the theme.json code. Can you double check that is working for you? The styles did not seem to apply on the front end for me.

@ramonjd
Copy link
Member Author

ramonjd commented Aug 19, 2022

Appears that the individual margin sides at the theme.json block level are a known curiosity: #43365 (comment)

Given that things work in the editor for block supports, which is the major thrust of these PRs, do folks think it's okay to allow support here and address the universal issue elsewhere?

@apeatling
Copy link
Contributor

Yes sounds good

Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

Worked as advertised for me in editor and front-end. Agree that we should merge this and look at the theme.json issue in follow ups.

@ramonjd ramonjd merged commit e30a28d into trunk Aug 19, 2022
@ramonjd ramonjd deleted the add/spacer-block-spacing-support branch August 19, 2022 04:11
@github-actions github-actions bot added this to the Gutenberg 14.0 milestone Aug 19, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Spacer Affects the Spacer Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants