Skip to content

fixed the social icon block alignment issue#43056

Closed
Smit2808 wants to merge 1 commit intoWordPress:trunkfrom
Smit2808:update/social-icons-block-align-center-issue
Closed

fixed the social icon block alignment issue#43056
Smit2808 wants to merge 1 commit intoWordPress:trunkfrom
Smit2808:update/social-icons-block-align-center-issue

Conversation

@Smit2808
Copy link
Copy Markdown
Contributor

@Smit2808 Smit2808 commented Aug 8, 2022

What?

Social icons block has center align issue in some themes like Twenty Twenty-Two and TT1 Blocks. And by discussing with core member @sabernhardt, we conclude that this issue is of block not of the theme.

PR will fix: #43048

How?

In themes like Twenty Twenty-Two and TT1 Blocks, the justify-content: flex-start; style is added to the container class so it was overriding the social icon block center CSS.

/* block-library/style.css */
.wp-block-social-links.aligncenter {
display: flex;
justify-content: center;
}

So to fix this issue, I created a strong hierarchy to override the justify-content: flex-start; style.

Testing Instructions

  1. Activate the Twenty Twenty-Two theme.
  2. Create a new post and insert a social icon block. Note: If you add the social icons block in the Site Editor, the option to align left/center/right is not always available.
  3. Select "Align center" in the dropdown. This does not center the icons in the editor.

Screenshots or screencast

@Smit2808 Smit2808 requested a review from ajitbohra as a code owner August 8, 2022 06:20
@sabernhardt
Copy link
Copy Markdown
Contributor

sabernhardt commented Aug 8, 2022

Thanks for the PR!

  1. CSS rules need a space between the selector and the opening curly brace.
  2. The selector could be less specific. body .wp-block-social-links.aligncenter would be enough, though perhaps .wp-block.wp-block-social-links.aligncenter could be preferable.
  3. This stylesheet had a fix for centered social icons in WordPress 5.9, which needed updating when the wp-block class was moved to the same element as wp-block-social-links. I recommend adding the new selector there instead of at the bottom.

    gutenberg/packages/block-library/src/social-links/editor.scss

    Lines 89 to 92 in 5444cb4

    // Center flex items. This has an equivalent in style.scss.
    .wp-block[data-align="center"] > .wp-block-social-links {
    justify-content: center;
    }

@Smit2808
Copy link
Copy Markdown
Contributor Author

Smit2808 commented Aug 10, 2022

Hi @sabernhardt,

Created new PR #43120. And Done all the changes you told me. Please review it.

Thank you.

@sabernhardt
Copy link
Copy Markdown
Contributor

sabernhardt commented Aug 12, 2022

Thanks! I do not have the setup to review that PR properly, but it looks good to me.

This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Social icons block not centered in the editor when choosing "Align center"

2 participants

@Smit2808 @sabernhardt