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

Social Icons: add top and bottom margin support #35374

Merged
merged 1 commit into from
Oct 7, 2021

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Oct 6, 2021

Description

This PR adds top and bottom margin support to the Social Icons block 🎉

Here is a film demonstrating margins in action in conjunction with the block spacing support we enabled in #35236

like-me-seymour.mp4

Testing

Opt into margin and blockGap in your theme.json, e.g.,

           "settings": {
                ...
		"spacing": {
			"blockGap": true,
			"margin": true
                         ...

Add a new post, and insert a Social Links icon. Insert as many social media icons as takes your fancy. Add a test URL to each so that they appear on the frontend.

Play around with the block spacing and margins, to be found under the Dimensions Panel in the sidebar controls.

Check that the saved post looks good in the frontend. Also ensure the corresponding inline styles are applied:

element.style {
    --wp--style--block-gap: 68px;
    margin-top: 111px;
    margin-bottom: 111px;
}

Also test in the Site Editor by editing the Layout > Dimensions of the Social Icons block.

Note: there is a known issue with layout styles in the Site Editor/Post Content Block

Types of changes

Opting in to top and bottom margin support for the Social Links block.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@ramonjd ramonjd added the [Block] Social Affects the Social Block - used to display Social Media accounts label Oct 6, 2021
@ramonjd ramonjd requested a review from mkaz as a code owner October 6, 2021 00:44
@ramonjd ramonjd self-assigned this Oct 6, 2021
Copy link
Contributor

@carolinan carolinan left a comment

Choose a reason for hiding this comment

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

Tested in the different editors and global styles, and with different alignments and justifications. Works well.

@stacimc
Copy link
Contributor

stacimc commented Oct 6, 2021

This tested well for me too when setting margin from Global Styles/ block support! I did notice one issue, but it is not Social Icons-specific and I think should be handled separately. What do you think?

If I set margin values in my theme.json for the social icons block, they get overridden by the margin styling from the layout. So in my theme.json I set styles like this:

                        "core/social-links": {
				"spacing": {
					"margin": {
						"top": "20px",
						"bottom": "30px"
					},
				}
			},

When I inspect my social icons, here I see my styles being overridden:
Screen Shot 2021-10-06 at 11 06 43 AM

And here are the margin values that actually get applied:
Screen Shot 2021-10-06 at 11 06 27 AM

@ramonjd
Copy link
Member Author

ramonjd commented Oct 7, 2021

Thanks for testing @stacimc !

If I set margin values in my theme.json for the social icons block, they get overridden by the margin styling from the layout.

Hmm, very interesting. Good spotting.

I can replicate this with the Columns and Social Links blocks where there's a preceding block in the editor and the frontend.

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * + * is very specific.

It's coming from layout.php.

I think should be handled separately. What do you think?

Totally agree. It seems to be affecting any block that opts in to gap support.

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.

LGTM

Copy link
Contributor

@stacimc stacimc 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 writing up the issue @ramonjd!

@ramonjd ramonjd merged commit ce79dc9 into trunk Oct 7, 2021
@ramonjd ramonjd deleted the add/social-links-axial-margin-support branch October 7, 2021 22:42
@github-actions github-actions bot added this to the Gutenberg 11.8 milestone Oct 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants