|
|
@@ -18,114 +18,27 @@ body {
|
|
|
margin-bottom: var(--wp--custom--margin--vertical);
|
|
|
}
|
|
|
|
|
|
-// Ensure horizontal padding on the page
|
|
|
-.wp-site-blocks {
|
|
|
- padding: 0 var(--wp--custom--margin--horizontal);
|
|
|
-}
|
|
|
-
|
|
|
-.wp-block { // For the editor.
|
|
|
- max-width: var(--wp--custom--width--default);
|
|
|
-}
|
|
|
-
|
|
|
-.wp-block[data-align=wide] { // For the editor.
|
|
|
- max-width: var(--wp--custom--width--wide);
|
|
|
-}
|
|
|
-
|
|
|
-.wp-block[data-align=full] { // For the editor.
|
|
|
- max-width: none;
|
|
|
-}
|
|
|
-
|
|
|
// This is the default with of blocks on the page with not assign alignwide or alignfull
|
|
|
-.wp-block-group .wp-block-group, // When a group is in a group return alignment to default
|
|
|
+.wp-site-blocks *[class*="__inner-container"] > .wp-block-group,
|
|
|
.wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
|
|
|
.wp-site-blocks .wp-block-post-content > * {
|
|
|
max-width: var(--wp--custom--width--default);
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
+ padding: 0 var(--wp--custom--margin--horizontal);
|
|
|
}
|
|
|
|
|
|
// Align the block to be on the "wider" side of things
|
|
|
+.wp-site-blocks *[class*="__inner-container"] > .alignwide,
|
|
|
.wp-site-blocks .alignwide {
|
|
|
width: var(--wp--custom--width--wide);
|
|
|
max-width: 100%;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
}
|
|
|
|
|
|
-// The block or template part should span the full width of the page
|
|
|
+// The block should span the full width of the page
|
|
|
+.wp-site-blocks *[class*="__inner-container"] > .alignfull,
|
|
|
.wp-site-blocks .alignfull {
|
|
|
- transform: translateX(calc(0px - var(--wp--custom--margin--horizontal)));
|
|
|
- width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
|
|
|
- max-width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
|
|
|
- margin-left: 0;
|
|
|
- margin-right: 0;
|
|
|
- box-sizing: content-box;
|
|
|
-}
|
|
|
-
|
|
|
-// If a block is inside of a container and set to alignfull
|
|
|
-// then it should be as wide as the container it's in, however wide that is.
|
|
|
-.wp-site-blocks *[class*="__inner-container"] .alignfull {
|
|
|
- box-sizing: border-box;
|
|
|
- transform: unset;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-// Align Center
|
|
|
-.aligncenter {
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-// Align Left and Right
|
|
|
-@include media(mobile) {
|
|
|
- .block-editor-block-list__layout .alignleft,
|
|
|
- .block-editor-block-list__layout .alignright,
|
|
|
- .wp-site-blocks .alignleft,
|
|
|
- .wp-site-blocks .alignright {
|
|
|
- max-width: calc(var(--wp--custom--width--default) / 2);
|
|
|
- }
|
|
|
-
|
|
|
- // Align Left
|
|
|
- .wp-site-blocks .alignleft {
|
|
|
- /*rtl:ignore*/
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- // Align Right
|
|
|
- .wp-site-blocks .alignright {
|
|
|
- /*rtl:ignore*/
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- // When alignments are applied to top level blocks
|
|
|
- // we need to add more left/right margin as the block is full width.
|
|
|
- .block-editor-block-list__layout > .alignleft, // For the editor.
|
|
|
- .block-editor-block-list__layout > .alignright, // For the editor.
|
|
|
- .wp-site-blocks .wp-block-post-content > .alignleft,
|
|
|
- .wp-site-blocks .wp-block-post-content > .alignright {
|
|
|
- // Content width is the lesser of the viewport width (subtracting margins)
|
|
|
- // or the default site width.
|
|
|
- // This variable is only used for this element.
|
|
|
- --content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
|
|
|
- // The alignment margin is the viewport, subtract the content and divide by two
|
|
|
- // Then subtract the block padding
|
|
|
- --alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
|
|
|
- }
|
|
|
-
|
|
|
- // Align Left
|
|
|
- .block-editor-block-list__layout > .alignleft, // For the editor.
|
|
|
- .wp-site-blocks .wp-block-post-content > .alignleft {
|
|
|
- /*rtl:ignore*/
|
|
|
- margin-left: var(--alignment-margin);
|
|
|
- /*rtl:ignore*/
|
|
|
- margin-right: var(--wp--custom--margin--horizontal);
|
|
|
- }
|
|
|
-
|
|
|
- // Align Right
|
|
|
- .block-editor-block-list__layout > .alignright, // For the editor.
|
|
|
- .wp-site-blocks .wp-block-post-content > .alignright {
|
|
|
- /*rtl:ignore*/
|
|
|
- margin-left: var(--wp--custom--margin--horizontal);
|
|
|
- /*rtl:ignore*/
|
|
|
- margin-right: var(--alignment-margin);
|
|
|
- }
|
|
|
+ max-width: unset;
|
|
|
+ margin-left: unset;
|
|
|
+ margin-right: unset;
|
|
|
}
|
Jason Crist