Skip to content
This repository has been archived by the owner on Feb 17, 2025. It is now read-only.

Blockbase: Fix alignment styles #3953

Merged
merged 1 commit into from
May 27, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 6 additions & 1 deletion blockbase/assets/ponyfill.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 10 additions & 5 deletions blockbase/sass/base/_alignment.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
.wp-block-post-content > .alignfull {
margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
margin-right: calc(-1 * var(--wp--custom--post-content--padding--right));
width: unset;
width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) )
}

.alignfull p {
padding-left: var(--wp--custom--post-content--padding--left);
padding-right: var(--wp--custom--post-content--padding--right);
}

@include break-mobile {
// limit size of any element that is aligned left/right
// limit size of any element that is aligned left/right
.wp-block[data-align="left"], // This is for the editor
.wp-block[data-align="right"], // This is for the editor
.wp-site-blocks .alignleft,
Expand All @@ -15,9 +20,9 @@
}

// When content is aligned left/right (particularly inside of a container) it is floated left/right
// and needs something to ensure that the content follows the block rather than nestling up beside the floated element.
// and needs something to ensure that the content follows the block rather than nestling up beside the floated element.
// The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299
.wp-block-group:not(.site-header) {
.wp-block-group:not(.site-header) {
overflow: auto;
}

Expand All @@ -26,4 +31,4 @@
// class which would do this for us. I'm not sure why but this centers things appropriately.
.aligncenter {
text-align: center;
}
}