beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix block alignment in FSE context for friendly business

Browse source
This commit is contained in:
Noah Allen 2019-07-17 17:28:28 -07:00
parent 8e47993070
commit f0e9298692
2 changed files with 82 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
friendly-business/style-editor.css
View file

@ -849,17 +849,29 @@ blockquote {
}
}
/** === Helper Functions === */
/**
Given a string, $alignment, returns the nested FSE block selectors
required for Full Site Editing to look correct. If $alignment is given,
we use it to target wp-blocks with a matching data-align attribute.
If no alignment is given, we target the base wp-block class. In both
of these scenarios, we target top level blocks, and any top level blocks
inside one of the FSE template part blocks.
*/
/** === Editor Frame === */
body {
background: #fffdf6;
}
body .wp-block[data-type="a8c/template"],
body .wp-block[data-align="full"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
body .wp-block[data-align="full"] {
body .wp-block[data-type="a8c/template"],
body .wp-block[data-align="full"],
body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="full"] {
width: calc( 100% + 90px);
max-width: calc( 100% + 90px);
}
@ -876,41 +888,63 @@ body .wp-block[data-align="full"] {
margin-left: 0;
margin-right: 0;
}
body .wp-block[data-align="wide"] {
body .wp-block[data-align="wide"],
body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="wide"] {
width: 100%;
}
body .wp-block[data-align="full"] {
body .wp-block[data-type="a8c/template"],
body .wp-block[data-align="full"],
body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="full"] {
position: relative;
left: calc( -12.5% - 14px);
width: calc( 125% + 116px);
max-width: calc( 125% + 115px);
}
body .wp-block[data-align="right"] {
body .wp-block[data-align="right"],
body .wp-block[data-type="a8c/post-content"] .wp-block[data-align="right"] {
max-width: 125%;
}
}
/** === Content Width === */
.wp-block {
width: calc(100vw - (2 * 1rem));
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.wp-block,
.wp-block[data-type="a8c/post-content"] .wp-block {
width: calc(100vw - (2 * 1rem));
max-width: 100%;
}
@media only screen and (min-width: 768px) {
.wp-block {
.wp-block,
.wp-block[data-type="a8c/post-content"] .wp-block {
width: calc(8 * (100vw / 12));
}
}
@media only screen and (min-width: 1168px) {
.wp-block {
.wp-block,
.wp-block[data-type="a8c/post-content"] .wp-block {
width: calc(6 * (100vw / 12 ));
}
}
.wp-block .wp-block {
.wp-block .wp-block,
.wp-block[data-type="a8c/post-content"] .wp-block .wp-block {
width: 100%;
}
/** === FSE Template Part Blocks === */
.wp-block[data-type="a8c/post-content"] {
width: 100%;
}

46
friendly-business/style-editor.scss
View file

@ -10,18 +10,40 @@ Friendly Business Editor Styles
@import "sass/navigation/menu-main-navigation";
@import "sass/typography/headings";
/** === Helper Functions === */
/**
Given a string, $alignment, returns the nested FSE block selectors
required for Full Site Editing to look correct. If $alignment is given,
we use it to target wp-blocks with a matching data-align attribute.
If no alignment is given, we target the base wp-block class. In both
of these scenarios, we target top level blocks, and any top level blocks
inside one of the FSE template part blocks.
*/
@function get-block-selector($alignment) {
$main-block-selector: ".wp-block";
@if $alignment != "" {
$main-block-selector: ".wp-block[data-align=\"#{$alignment}\"]";
}
@return "
#{$main-block-selector},
.wp-block[data-type=\"a8c/post-content\"] #{$main-block-selector}";
}
/** === Editor Frame === */
body {
background: $color__background-body;
.wp-block[data-type="a8c/template"],
.wp-block[data-align="full"] {
width: 100%;
}
@include media(mobile) {
.wp-block[data-align="full"] {
.wp-block[data-type="a8c/template"],
#{get-block-selector("full")} {
width: calc( 100% + 90px );
max-width: calc( 100% + 90px );
}
@ -41,18 +63,19 @@ body {
margin-right: 0;
}
.wp-block[data-align="wide"] {
#{get-block-selector("wide")} {
width: 100%;
}
.wp-block[data-align="full"] {
.wp-block[data-type="a8c/template"],
#{get-block-selector("full")} {
position: relative;
left: calc( -12.5% - 14px );
width: calc( 125% + 116px );
max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
}
.wp-block[data-align="right"] {
#{get-block-selector("right")} {
max-width: 125%;
}
}
@ -61,10 +84,13 @@ body {
/** === Content Width === */
.wp-block {
width: calc(100vw - (2 * #{$size__spacing-unit}));
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#{get-block-selector("")} {
width: calc(100vw - (2 * #{$size__spacing-unit}));
max-width: 100%;
@include media(tablet) {
width: calc(8 * (100vw / 12));
@ -80,6 +106,12 @@ body {
}
}
/** === FSE Template Part Blocks === */
.wp-block[data-type="a8c/post-content"] {
width: 100%;
}
/** === Base Typography === */
body {