Skip to content

Commit d6dd2e5

Browse files
tellthemachinestellthemachines
committed
Editor: allow configuring viewport values in theme.json.
Enables a viewport object with `tablet` and `mobile` in theme.json settings and applies its values to style state and block visibility media queries. Props isabel_brison, ramonopoly. Fixes #65596. git-svn-id: https://develop.svn.wordpress.org/trunk@62671 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 585ec6c commit d6dd2e5

8 files changed

Lines changed: 793 additions & 130 deletions

File tree

‎src/wp-includes/block-supports/block-style-variations.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,11 @@ function wp_render_block_style_variation_support_styles( $parsed_block ) {
154154
),
155155
);
156156

157+
// Ensure variation state styles know about any custom viewport breakpoints.
158+
if ( isset( $theme_json['settings']['viewport'] ) ) {
159+
$config['settings']['viewport'] = $theme_json['settings']['viewport'];
160+
}
161+
157162
// Turn off filter that excludes block nodes. They are needed here for the variation's inner block types.
158163
if ( ! is_admin() ) {
159164
remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );

‎src/wp-includes/block-supports/block-visibility.php‎

Lines changed: 12 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -44,60 +44,24 @@ function wp_render_block_visibility_support( $block_content, $block ) {
4444
if ( ! is_array( $viewport_config ) || empty( $viewport_config ) ) {
4545
return $block_content;
4646
}
47-
/*
48-
* Viewport size definitions are in several places in WordPress packages.
49-
* The following are taken from: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss
50-
* The array is in a future, potential JSON format, and will be centralized
51-
* as the feature is developed.
52-
*
53-
* Viewport sizes as array items are defined sequentially. The first item's size is the max value.
54-
* Each subsequent item starts after the previous size (using > operator), and its size is the max.
55-
* The last item starts after the previous size (using > operator), and it has no max.
56-
*/
57-
$viewport_sizes = array(
58-
array(
59-
'name' => 'Mobile',
60-
'slug' => 'mobile',
61-
'size' => '480px',
62-
),
47+
$viewport_settings = wp_get_global_settings( array( 'viewport' ) );
48+
$viewport_media_queries = WP_Theme_JSON::get_viewport_media_queries(
49+
$viewport_settings,
6350
array(
64-
'name' => 'Tablet',
65-
'slug' => 'tablet',
66-
'size' => '782px',
67-
),
68-
array(
69-
'name' => 'Desktop',
70-
'slug' => 'desktop',
71-
/*
72-
* Note: the last item in the $viewport_sizes array does not technically require a 'size' key,
73-
* as the last item's media query is calculated using `width > previous size`.
74-
* The last item is present for validating the attribute values, and in order to indicate
75-
* that this is the final viewport size, and to calculate the previous media query accordingly.
76-
*/
77-
),
51+
'include_desktop' => true,
52+
)
7853
);
7954

8055
/*
81-
* Build media queries from viewport size definitions using the CSS range syntax.
82-
* Could be absorbed into the style engine,
83-
* as well as classname building, and declaration of the display property, if required.
56+
* Viewport media queries are keyed by style-state names (`@mobile`,
57+
* `@tablet`, and `@desktop`). Block visibility metadata and generated
58+
* classes use plain viewport names, so map the keys at this boundary.
8459
*/
85-
$viewport_media_queries = array();
86-
$previous_size = null;
87-
foreach ( $viewport_sizes as $index => $viewport_size ) {
88-
// First item: width <= size.
89-
if ( 0 === $index ) {
90-
$viewport_media_queries[ $viewport_size['slug'] ] = "@media (width <= {$viewport_size['size']})";
91-
} elseif ( count( $viewport_sizes ) - 1 === $index && $previous_size ) {
92-
// Last item: width > previous size.
93-
$viewport_media_queries[ $viewport_size['slug'] ] = "@media (width > $previous_size)";
94-
} else {
95-
// Middle items: previous size < width <= size.
96-
$viewport_media_queries[ $viewport_size['slug'] ] = "@media ({$previous_size} < width <= {$viewport_size['size']})";
97-
}
98-
99-
$previous_size = $viewport_size['size'] ?? null;
60+
$block_visibility_media_queries = array();
61+
foreach ( $viewport_media_queries as $viewport_state => $media_query ) {
62+
$block_visibility_media_queries[ ltrim( $viewport_state, '@' ) ] = $media_query;
10063
}
64+
$viewport_media_queries = $block_visibility_media_queries;
10165

10266
$hidden_on = array();
10367

‎src/wp-includes/block-supports/layout.php‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -955,17 +955,20 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
955955
function wp_render_layout_support_flag( $block_content, $block ) {
956956
static $global_styles = null;
957957

958-
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
959-
$block_supports_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false );
960-
$style_attr = $block['attrs']['style'] ?? array();
961-
$child_layout = $style_attr['layout'] ?? null;
958+
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
959+
$block_supports_layout = block_has_support( $block_type, 'layout', false ) || block_has_support( $block_type, '__experimentalLayout', false );
960+
$style_attr = $block['attrs']['style'] ?? array();
961+
$global_settings = wp_get_global_settings();
962+
$viewport_settings = $global_settings['viewport'] ?? null;
963+
$responsive_media_queries = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings );
964+
$child_layout = $style_attr['layout'] ?? null;
962965

963966
/*
964967
* Collect responsive viewport child layout overrides so that a block with
965968
* only responsive child layout (no base child layout) is still processed.
966969
*/
967970
$viewport_child_layouts = array();
968-
foreach ( WP_Theme_JSON::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
971+
foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
969972
$viewport_child = wp_get_layout_child_values( $style_attr[ $breakpoint ]['layout'] ?? null );
970973

971974
if ( ! empty( $viewport_child ) ) {
@@ -1075,7 +1078,6 @@ function wp_render_layout_support_flag( $block_content, $block ) {
10751078
return $block_content;
10761079
}
10771080

1078-
$global_settings = wp_get_global_settings();
10791081
$fallback_layout = $block_type->supports['layout']['default'] ?? array();
10801082
if ( empty( $fallback_layout ) ) {
10811083
$fallback_layout = $block_type->supports['__experimentalLayout']['default'] ?? array();
@@ -1183,7 +1185,7 @@ function wp_render_layout_support_flag( $block_content, $block ) {
11831185
$block_spacing,
11841186
);
11851187

1186-
foreach ( array_keys( WP_Theme_JSON::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) {
1188+
foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) {
11871189
$viewport_style = $style_attr[ $breakpoint ] ?? null;
11881190
if ( ! is_array( $viewport_style ) ) {
11891191
continue;
@@ -1231,7 +1233,7 @@ function wp_render_layout_support_flag( $block_content, $block ) {
12311233
* Emit responsive container layout styles using the same $container_class
12321234
* selector as the base layout so they target the inner block wrapper.
12331235
*/
1234-
foreach ( WP_Theme_JSON::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
1236+
foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
12351237
$viewport_style = $style_attr[ $breakpoint ] ?? null;
12361238
if ( ! is_array( $viewport_style ) ) {
12371239
continue;

‎src/wp-includes/block-supports/states.php‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -541,9 +541,11 @@ function wp_render_block_states_support( $block_content, $block ) {
541541
return $block_content;
542542
}
543543

544-
$supported_pseudo_states = WP_Theme_JSON::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ?? array();
545-
$style = $block['attrs']['style'] ?? array();
546-
$css_rules = array();
544+
$supported_pseudo_states = WP_Theme_JSON::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ?? array();
545+
$style = $block['attrs']['style'] ?? array();
546+
$css_rules = array();
547+
$viewport_settings = wp_get_global_settings( array( 'viewport' ) );
548+
$responsive_media_queries = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings );
547549

548550
foreach ( $supported_pseudo_states as $pseudo_state ) {
549551
if ( empty( $style[ $pseudo_state ] ) || ! is_array( $style[ $pseudo_state ] ) ) {
@@ -559,7 +561,7 @@ function wp_render_block_states_support( $block_content, $block ) {
559561
);
560562
}
561563

562-
foreach ( WP_Theme_JSON::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
564+
foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
563565
if ( empty( $style[ $breakpoint ] ) || ! is_array( $style[ $breakpoint ] ) ) {
564566
continue;
565567
}

0 commit comments

Comments
 (0)