Skip to content

Commit 4e8b57b

Browse files
bfintalbfintal
authored
fix: block alignments not inherited properly in tablet and mobile (#2056)
* fix: block alignments not inherited properly in tablet and mobile * fix: button group collapsing alignment inheritance [skip ci] * fix: blog posts typography alignment for tablet and mobile not applied. fixes #2065 * fix: alignment in mobile in editor
1 parent 3860498 commit 4e8b57b

File tree

7 files changed

+58
-1
lines changed

7 files changed

+58
-1
lines changed

‎gulpfile.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,9 @@ gulp.task( 'style-editor', function() {
230230
.pipe( header( '#start-resizable-editor-section{display:none}' ) )
231231
.pipe( postcss( postCSSOptions ) )
232232
.pipe( footer( '#end-resizable-editor-section{display:none}' ) )
233+
// Remove the dummy styles added in src/styles/breakpoints.scss which
234+
// are added to force correct sorting of media queries by mqpacker
235+
.pipe( replace( /.z\s?{\s?opacity:\s?1;?}/g, '' ) )
233236
.pipe( gulp.dest( 'dist/' ) )
234237
} )
235238

@@ -242,6 +245,10 @@ gulp.task( 'style', gulp.series(
242245
.pipe( header( '#start-resizable-editor-section{display:none}' ) )
243246
.pipe( postcss( postCSSOptions ) )
244247
.pipe( footer( '#end-resizable-editor-section{display:none}' ) )
248+
// Remove the dummy styles added in src/styles/breakpoints.scss
249+
// which are added to force correct sorting of media queries by
250+
// mqpacker
251+
.pipe( replace( /.z\s?{\s?opacity:\s?1;?}/g, '' ) )
245252
.pipe( gulp.dest( 'dist/' ) )
246253
},
247254
function generateResponsiveCSS() {

‎src/block-components/typography/attributes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const typographyAttributes = {
5858
default: '',
5959
},
6060
textAlign: {
61+
stkResponsive: true,
6162
type: 'string',
6263
default: '',
6364
},

‎src/block-components/typography/get-typography-classes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export const getTypographyClasses = ( attributes = {}, attrNameTemplate = '%s' )
99
return classnames( {
1010
'stk--is-gradient': attributes[ getAttributeName( 'textColorType' ) ] === 'gradient',
1111
[ `has-text-align-${ attributes[ getAttributeName( 'textAlign' ) ] }` ]: attributes[ getAttributeName( 'textAlign' ) ],
12+
[ `has-text-align-${ attributes[ getAttributeName( 'textAlignTablet' ) ] }-tablet` ]: attributes[ getAttributeName( 'textAlignTablet' ) ],
13+
[ `has-text-align-${ attributes[ getAttributeName( 'textAlignMobile' ) ] }-mobile` ]: attributes[ getAttributeName( 'textAlignMobile' ) ],
1214
'has-text-color': !! attributes[ getAttributeName( 'textColor1' ) ],
1315
[ attributes[ getAttributeName( 'textColorClass' ) ] ]: !! attributes[ getAttributeName( 'textColorClass' ) ],
1416
} )

‎src/dynamic-breakpoints.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
function stackable_get_responsive_css() {
1616
// NOTE: THE VALUE BELOW IS AUTOMATICALLY GENERATED BY THE BUILD PROCESS.
1717
return <<<STK_RESPONSIVE_CSS
18-
#start-resizable-editor-section{display:none}@media only screen and (max-width:767px){.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px 8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}}@media only screen and (min-width:768px){.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--responsive--aligndefault-width,var(--stk-block-width-default-detected,900px)));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--responsive--alignwide-width,var(--stk-block-width-wide-detected,80vw)));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:1024px){.stk-row{flex-wrap:nowrap}.stk--hide-desktop{display:none!important}}@media only screen and (min-width:768px) and (max-width:1023px){.stk--hide-tablet{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}}#end-resizable-editor-section{display:none}
18+
#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){.stk-row{flex-wrap:nowrap}.stk--hide-desktop{display:none!important}}@media only screen and (min-width:768px){.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--responsive--aligndefault-width,var(--stk-block-width-default-detected,900px)));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--responsive--alignwide-width,var(--stk-block-width-wide-detected,80vw)));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk--hide-tablet{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}}@media only screen and (max-width:767px){.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px 8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}}#end-resizable-editor-section{display:none}
1919
STK_RESPONSIVE_CSS;
2020
}
2121
}

‎src/styles/block.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,7 @@
282282
}
283283

284284
@include mobile {
285+
.stk-button-group:is(.stk--collapse-on-tablet),
285286
.stk-button-group:is(.stk--collapse-on-mobile) {
286287
.stk-block:is(.stk-block-button, .stk-block-icon-button) {
287288
margin-inline-start: var(--stk-alignment-margin-left);
@@ -389,6 +390,14 @@
389390
justify-content: var(--stk-alignment-justify-content);
390391
}
391392

393+
// Ensure that our alignments are applied to text.
394+
.stk-block {
395+
&[class*="has-text-align-"],
396+
[class*="has-text-align-"] {
397+
text-align: var(--stk-alignment-text-align, start);
398+
}
399+
}
400+
392401
.has-text-align {
393402
&-center {
394403
@include align-center-styles;

‎src/styles/breakpoints.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,40 @@ $tablet-width: 768px;
2626
@content;
2727
}
2828
}
29+
30+
/**
31+
* The media query combiner we're using arranges the media queries in the wrong
32+
* order. These dummy media queries below will force mqpacker to sort our media
33+
* queries correctly from desktop to mobile (so that tablet and mobile media
34+
* queries would override styles in the correct order).
35+
*
36+
* @see https://www.npmjs.com/package/mqpacker#the-first-win-algorithm
37+
*
38+
* These dummy styles are removed by gulpfile.js in the `style-editor` and
39+
* `style` tasks.
40+
*/
41+
@include desktop {
42+
.z {
43+
opacity: 1;
44+
}
45+
}
46+
@include desktop-tablet {
47+
.z {
48+
opacity: 1;
49+
}
50+
}
51+
@include tablet {
52+
.z {
53+
opacity: 1;
54+
}
55+
}
56+
@include tablet-mobile {
57+
.z {
58+
opacity: 1;
59+
}
60+
}
61+
@include mobile {
62+
.z {
63+
opacity: 1;
64+
}
65+
}

‎src/styles/editor-block.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,7 @@
284284
}
285285

286286
@include mobile {
287+
.stk-button-group:is(.stk--collapse-on-tablet) > .block-editor-inner-blocks > .block-editor-block-list__layout,
287288
.stk-button-group:is(.stk--collapse-on-mobile) > .block-editor-inner-blocks > .block-editor-block-list__layout {
288289
> [data-block] {
289290
margin-inline-start: var(--stk-alignment-margin-left);

0 commit comments

Comments
 (0)