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.

Sign up for GitHub

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

Fix legacy button center alignments inside the buttons block #29281

Merged
merged 6 commits into from
Feb 25, 2021
Merged

Fix legacy button center alignments inside the buttons block #29281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d1b4b24
Fix buttons > button alignments in the editor
talldan Feb 24, 2021
9b26ae9
Move style to the right place in stylesheet
talldan Feb 24, 2021
539970f
Fix typo
talldan Feb 24, 2021
bcd9c98
Apply change in front-end too and adjust editor styles to match
talldan Feb 24, 2021
1628a15
Adjust margins
talldan Feb 24, 2021
9561a36
Add some more commentary
talldan Feb 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions packages/block-library/src/buttons/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,34 @@ $blocks-block__margin: 0.5em;
box-shadow: none;
}
}

// Back compat: Inner button blocks previously had their own alignment
// options. Forcing them to 100% width in the flex container replicates
// that these were block level elements that took up the full width.
//
// This back compat rule is ignored if the user decides to use the
// newer justification options on the button block, hence the :not.
//
// Disable the stylelint rule, otherwise this selector is ugly!
/* stylelint-disable indentation */
&:not(
.is-content-justification-space-between,
.is-content-justification-right,
.is-content-justification-left,
.is-content-justification-center
) .wp-block[data-align="center"] {
/* stylelint-enable indentation */
margin-left: auto;
margin-right: auto;
margin-top: 0;
width: 100%;

.wp-block-button {
// Some margin hacks are needed, since margin doesn't seem to
// collapse in the same way when a parent layout it flex.
margin-bottom: 0;
}
}
}

.wp-block[data-align="center"] > .wp-block-buttons {
Expand Down
28 changes: 25 additions & 3 deletions packages/block-library/src/buttons/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,11 @@ $blocks-block__margin: 0.5em;
}
}

// Kept for backward compatibiity.
&.is-content-justification-space-between {
justify-content: space-between;
}

// Kept for backward compatibility.
&.aligncenter {
text-align: center;
}
Expand All @@ -93,7 +97,25 @@ $blocks-block__margin: 0.5em;
}
}

&.is-content-justification-space-between {
justify-content: space-between;
// Back compat: Inner button blocks previously had their own alignment
// options. Forcing them to 100% width in the flex container replicates
// that these were block level elements that took up the full width.
//
// This back compat rule is ignored if the user decides to use the
// newer justification options on the button block, hence the :not.
//
// Disable the stylelint rule, otherwise this selector is ugly!
/* stylelint-disable indentation */
&:not(
.is-content-justification-space-between,
.is-content-justification-right,
.is-content-justification-left,
.is-content-justification-center
) .wp-block-button.aligncenter {
/* stylelint-enable indentation */
margin-left: auto;
margin-right: auto;
margin-bottom: $blocks-block__margin;
width: 100%;
}
}