Skip to content

Commit 00e4b40

Browse files
ArukuenArukuen
committed
fix: stackable should follow editor breakpoints from theme if valid
1 parent 8c17872 commit 00e4b40

6 files changed

Lines changed: 160 additions & 46 deletions

File tree

‎gulpfile.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -571,15 +571,10 @@ exit;
571571

572572
gulp.task( 'style-editor', function() {
573573
return gulp.src( [ path.resolve( __dirname, './src/**/editor.scss' ), '!' + path.resolve( __dirname, './src/deprecated/**/editor.scss' ) ] )
574-
// Override the breakpoints in the editor in
575-
// src/styles/breakpoints.scss, we do it here because there are various
576-
// files that use the breakpoints and it's easier to override it here.
574+
// The active theme can change the editor preview widths at runtime.
575+
// Use the editor's current device class rather than fixed Sass breakpoints.
577576
.pipe( sassVariables( {
578-
// Match the Block Editor's fixed preview widths. getMediaQuery subtracts 1,
579-
// so these default values target 781px tablet and 479px mobile in WordPress 7.0.
580-
// https://github.com/WordPress/gutenberg/pull/74339
581-
'$desktop-width': 782,
582-
'$tablet-width': 480,
577+
'$use-editor-preview-classes': true,
583578
} ) )
584579
.pipe( sass( sassOptions ).on( 'error', sass.logError ) )
585580
.pipe( concat( 'editor_blocks.css' ) )

‎src/components/block-css/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
getBlockUniqueClassname,
1818
getDependencyAttrnamesFast,
1919
getMediaQuery,
20+
getViewportMediaQuery,
2021
isVersionSupported,
2122
prependClass,
2223
} from './util'
@@ -31,6 +32,7 @@ import {
3132
* External dependencies
3233
*/
3334
import { pick, kebabCase } from 'lodash'
35+
import { settings } from 'stackable'
3436

3537
/**
3638
* WordPress dependencies
@@ -546,7 +548,12 @@ function createCssEdit( selector, rule, value, device = 'desktop', vendorPrefixe
546548
}
547549
)
548550

549-
const mediaQuery = getMediaQuery( device, tabletBreakpoint, mobileBreakpoint )
551+
const editorBreakpoints = settings.stackable_editor_breakpoints || {}
552+
const mediaQuery = getViewportMediaQuery( device, settings.stackable_editor_viewport_breakpoints ) || getMediaQuery(
553+
device,
554+
editorBreakpoints.tablet || tabletBreakpoint,
555+
editorBreakpoints.mobile || mobileBreakpoint
556+
)
550557
if ( mediaQuery ) {
551558
css = `\n${ mediaQuery } {${ css }\n}`
552559
}

‎src/components/block-css/util.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,41 @@ export const getMediaQuery = ( devices = 'desktop', breakDesktop = 1024, breakTa
3333
} else if ( devices === 'mobile' ) {
3434
return '@media screen and (max-width: ' + ( breakTablet - 1 ) + 'px)'
3535
}
36-
return null
36+
return null
37+
}
38+
39+
/**
40+
* Forms a media query string from WordPress theme.json viewport settings.
41+
*
42+
* WordPress 7.1 allows themes to configure these values and uses the same
43+
* ranges for responsive editor previews. Unlike getMediaQuery, these are
44+
* maximum viewport widths rather than the start of the next device range.
45+
*
46+
* @param {string} devices A list of devices: desktop, tablet or mobile.
47+
* @param {Object} viewports WordPress viewport settings.
48+
* @param {string} viewports.tablet Maximum Tablet viewport width.
49+
* @param {string} viewports.mobile Maximum Mobile viewport width.
50+
* @return {string|null} A media query, or null for missing settings.
51+
*/
52+
export const getViewportMediaQuery = ( devices = 'desktop', viewports = {} ) => {
53+
const { tablet, mobile } = viewports
54+
if ( ! tablet || ! mobile ) {
55+
return null
56+
}
57+
58+
if ( devices === 'desktopTablet' ) {
59+
return `@media screen and (width > ${ mobile })`
60+
} else if ( devices === 'desktopOnly' ) {
61+
return `@media screen and (width > ${ tablet })`
62+
} else if ( devices === 'tablet' ) {
63+
return `@media screen and (width <= ${ tablet })`
64+
} else if ( devices === 'tabletOnly' ) {
65+
return `@media screen and (width > ${ mobile }) and (width <= ${ tablet })`
66+
} else if ( devices === 'mobile' ) {
67+
return `@media screen and (width <= ${ mobile })`
68+
}
69+
70+
return null
3771
}
3872

3973
/**

‎src/editor-settings.php‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,22 @@ public function add_settings( $settings ) {
321321
$settings['stackable_enable_heading_default_theme_margins_non_posts'] = get_option( 'stackable_enable_heading_default_theme_margins_non_posts' );
322322
$settings['stackable_icon_list_block_default_icon'] = get_option( 'stackable_icon_list_block_default_icon' );
323323

324+
// WordPress 7.1 allows themes define the Tablet and Mobile editor preview
325+
// breakpoints in theme.json. Keep Stackable's generated editor CSS in sync
326+
// with those previews when the active theme provides valid values.
327+
$viewport_breakpoints = function_exists( 'wp_get_global_settings' ) ? wp_get_global_settings( array( 'viewport' ) ) : array();
328+
if (
329+
is_array( $viewport_breakpoints ) &&
330+
isset( $viewport_breakpoints['tablet'], $viewport_breakpoints['mobile'] ) &&
331+
is_string( $viewport_breakpoints['tablet'] ) &&
332+
is_string( $viewport_breakpoints['mobile'] )
333+
) {
334+
$settings['stackable_editor_viewport_breakpoints'] = array(
335+
'tablet' => $viewport_breakpoints['tablet'],
336+
'mobile' => $viewport_breakpoints['mobile'],
337+
);
338+
}
339+
324340
// Inserter variations are registered before the block Edit component renders,
325341
// so provide the post type here.
326342
$current_screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;

‎src/styles/breakpoints.scss‎

Lines changed: 78 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,75 @@
1-
// These breakpoints are also overridden by gulpfile.js when building styles for
2-
// the editor. We need to define these as integers here because in our
3-
// definition in gulpfile.js, we cannot use px.
1+
// The editor build uses its selected device class instead of viewport media
2+
// queries. The active theme controls the preview width at runtime, so Sass
3+
// cannot safely provide a fixed editor breakpoint.
44
$desktop-width: 1024 !default;
55
$tablet-width: 768 !default;
6+
$use-editor-preview-classes: false !default;
67

7-
@mixin desktop {
8-
@media only screen and (min-width: #{$desktop-width + 0px}) {
8+
@mixin editor-preview-device( $device ) {
9+
@at-root .stk-preview-device-#{ $device } #{ & } {
910
@content;
1011
}
1112
}
13+
14+
@mixin desktop {
15+
@if $use-editor-preview-classes {
16+
@include editor-preview-device( desktop ) {
17+
@content;
18+
}
19+
} @else {
20+
@media only screen and (min-width: #{$desktop-width + 0px}) {
21+
@content;
22+
}
23+
}
24+
}
1225
@mixin desktop-tablet {
13-
@media only screen and (min-width: #{$tablet-width + 0px}) {
14-
@content;
26+
@if $use-editor-preview-classes {
27+
@include editor-preview-device( desktop ) {
28+
@content;
29+
}
30+
@include editor-preview-device( tablet ) {
31+
@content;
32+
}
33+
} @else {
34+
@media only screen and (min-width: #{$tablet-width + 0px}) {
35+
@content;
36+
}
1537
}
1638
}
1739
@mixin tablet {
18-
@media only screen and (min-width: #{$tablet-width + 0px}) and (max-width: #{$desktop-width - 1px}) {
19-
@content;
40+
@if $use-editor-preview-classes {
41+
@include editor-preview-device( tablet ) {
42+
@content;
43+
}
44+
} @else {
45+
@media only screen and (min-width: #{$tablet-width + 0px}) and (max-width: #{$desktop-width - 1px}) {
46+
@content;
47+
}
2048
}
2149
}
2250
@mixin tablet-mobile {
23-
@media only screen and (max-width: #{$desktop-width - 1px}) {
24-
@content;
51+
@if $use-editor-preview-classes {
52+
@include editor-preview-device( tablet ) {
53+
@content;
54+
}
55+
@include editor-preview-device( mobile ) {
56+
@content;
57+
}
58+
} @else {
59+
@media only screen and (max-width: #{$desktop-width - 1px}) {
60+
@content;
61+
}
2562
}
2663
}
2764
@mixin mobile {
28-
@media only screen and (max-width: #{$tablet-width - 1px}) {
29-
@content;
65+
@if $use-editor-preview-classes {
66+
@include editor-preview-device( mobile ) {
67+
@content;
68+
}
69+
} @else {
70+
@media only screen and (max-width: #{$tablet-width - 1px}) {
71+
@content;
72+
}
3073
}
3174
}
3275

@@ -41,28 +84,31 @@ $tablet-width: 768 !default;
4184
* These dummy styles are removed by gulpfile.js in the `style-editor` and
4285
* `style` tasks.
4386
*/
44-
@include desktop {
45-
.z {
46-
opacity: 1;
87+
88+
@if not $use-editor-preview-classes {
89+
@include desktop {
90+
.z {
91+
opacity: 1;
92+
}
4793
}
48-
}
49-
@include desktop-tablet {
50-
.z {
51-
opacity: 1;
94+
@include desktop-tablet {
95+
.z {
96+
opacity: 1;
97+
}
5298
}
53-
}
54-
@include tablet {
55-
.z {
56-
opacity: 1;
99+
@include tablet {
100+
.z {
101+
opacity: 1;
102+
}
57103
}
58-
}
59-
@include tablet-mobile {
60-
.z {
61-
opacity: 1;
104+
@include tablet-mobile {
105+
.z {
106+
opacity: 1;
107+
}
62108
}
63-
}
64-
@include mobile {
65-
.z {
66-
opacity: 1;
109+
@include mobile {
110+
.z {
111+
opacity: 1;
112+
}
67113
}
68114
}

‎src/styles/cssvars.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,22 +75,38 @@ $_cssvars: ();
7575
}
7676

7777
@if length( $tablet ) > 0 {
78-
@include tablet {
79-
:root {
78+
@if $use-editor-preview-classes {
79+
body.stk-preview-device-tablet {
8080
@each $name, $value in $tablet {
8181
--stk-#{ $name }: #{ $value };
8282
}
8383
}
84+
} @else {
85+
@include tablet {
86+
:root {
87+
@each $name, $value in $tablet {
88+
--stk-#{ $name }: #{ $value };
89+
}
90+
}
91+
}
8492
}
8593
}
8694

8795
@if length( $mobile ) > 0 {
88-
@include mobile {
89-
:root {
96+
@if $use-editor-preview-classes {
97+
body.stk-preview-device-mobile {
9098
@each $name, $value in $mobile {
9199
--stk-#{ $name }: #{ $value };
92100
}
93101
}
102+
} @else {
103+
@include mobile {
104+
:root {
105+
@each $name, $value in $mobile {
106+
--stk-#{ $name }: #{ $value };
107+
}
108+
}
109+
}
94110
}
95111
}
96112
}

0 commit comments

Comments
 (0)