-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove the default block margins from themes with theme.json file (#3…
- Loading branch information
1 parent
ea2f6f8
commit 3882276
Showing
6 changed files
with
127 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| // This needs specificity to override the editor styles. | ||
| .editor-styles-wrapper .wp-block { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| // Depreacted style needed for the block widths and alignments. | ||
| // for themes that don't support the new layout (theme.json) | ||
| .wp-block { | ||
| max-width: $content-width; | ||
|
|
||
| // Provide every block with a default base margin. This margin provides a consistent spacing | ||
| // between blocks in the editor. | ||
| margin-top: $default-block-margin; | ||
| margin-bottom: $default-block-margin; | ||
|
|
||
| &[data-align="wide"] { | ||
| max-width: $wide-content-width; | ||
| } | ||
|
|
||
| &[data-align="full"] { | ||
| max-width: none; | ||
| } | ||
|
|
||
| // Alignments. | ||
| &[data-align="left"], | ||
| &[data-align="right"] { | ||
| width: 100%; | ||
|
|
||
| // When images are floated, the block itself should collapse to zero height. | ||
| height: 0; | ||
|
|
||
| &::before { | ||
| content: none; | ||
| } | ||
| } | ||
|
|
||
| // Left. | ||
| &[data-align="left"] > * { | ||
| /*!rtl:begin:ignore*/ | ||
| float: left; | ||
| margin-right: 2em; | ||
| /*!rtl:end:ignore*/ | ||
| } | ||
|
|
||
| // Right. | ||
| &[data-align="right"] > * { | ||
| /*!rtl:begin:ignore*/ | ||
| float: right; | ||
| margin-left: 2em; | ||
| /*!rtl:end:ignore*/ | ||
| } | ||
|
|
||
| // Wide and full-wide. | ||
| &[data-align="full"], | ||
| &[data-align="wide"] { | ||
| clear: both; | ||
| } | ||
| } | ||
|
|
||
| // Full Width Blocks | ||
| // specificity required to only target immediate child Blocks of a Group | ||
| .wp-block-group > [data-align="full"] { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| // Full Width Blocks with a background (ie: has padding) | ||
| .wp-block-group.has-background > [data-align="full"] { | ||
| // note: using position `left` causes hoz scrollbars so | ||
| // we opt to use margin instead | ||
| // the 30px matches the hoz padding applied in `theme.scss` | ||
| // added when the Block has a background set | ||
| margin-left: -30px; | ||
|
|
||
| // 60px here is x2 the hoz padding from `theme.scss` added when | ||
| // the Block has a background set | ||
| // note: also duplicated below for full width Groups | ||
| width: calc(100% + 60px); | ||
| } | ||
|
|
||
| /** | ||
| * Group: Full Width Alignment | ||
| */ | ||
| [data-align="full"] .wp-block-group { | ||
| // Non-full Width Blocks | ||
| // specificity required to only target immediate child Blocks of Group | ||
| > .wp-block { | ||
| padding-left: $block-padding; | ||
| padding-right: $block-padding; | ||
|
|
||
| @include break-small() { | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| } | ||
| } | ||
|
|
||
| // Full Width Blocks | ||
| // specificity required to only target immediate child Blocks of Group | ||
| > [data-align="full"] { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| max-width: none; | ||
| } | ||
|
|
||
| // Full Width Blocks with a background (ie: has padding) | ||
| // note: also duplicated above for all Group widths | ||
| &.has-background > [data-align="full"] { | ||
| width: calc(100% + 60px); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters