| @@ -41,62 +41,26 @@ | ||
| 41 | 41 | if ( ! is_array( $viewport_config ) || empty( $viewport_config ) ) { |
| 42 | 42 | return $block_content; |
| 43 | 43 | } |
| 44 | 44 | |
| 45 | - /* | |
| 46 | - * Viewport size definitions are in several places in WordPress packages. | |
| 47 | - * The following are taken from: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss | |
| 48 | - * The array is in a future, potential JSON format, and will be centralized | |
| 49 | - * as the feature is developed. | |
| 50 | - * | |
| 51 | - * Viewport sizes as array items are defined sequentially. The first item's size is the max value. | |
| 52 | - * Each subsequent item starts after the previous size (using > operator), and its size is the max. | |
| 53 | - * The last item starts after the previous size (using > operator), and it has no max. | |
| 54 | - */ | |
| 55 | - $viewport_sizes = array( | |
| 45 | + $viewport_settings = gutenberg_get_global_settings( array( 'viewport' ) ); | |
| 46 | + $viewport_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries( | |
| 47 | + $viewport_settings, | |
| 56 | 48 | array( |
| 57 | - 'name' => 'Mobile', | |
| 58 | - 'slug' => 'mobile', | |
| 59 | - 'size' => '480px', | |
| 60 | - ), | |
| 61 | - array( | |
| 62 | - 'name' => 'Tablet', | |
| 63 | - 'slug' => 'tablet', | |
| 64 | - 'size' => '782px', | |
| 65 | - ), | |
| 66 | - array( | |
| 67 | - 'name' => 'Desktop', | |
| 68 | - 'slug' => 'desktop', | |
| 69 | - /* | |
| 70 | - * Note: the last item in the $viewport_sizes array does not technically require a 'size' key, | |
| 71 | - * as the last item's media query is calculated using `width > previous size`. | |
| 72 | - * The last item is present for validating the attribute values, and in order to indicate | |
| 73 | - * that this is the final viewport size, and to calculate the previous media query accordingly. | |
| 74 | - */ | |
| 75 | - ), | |
| 49 | + 'include_desktop' => true, | |
| 50 | + ) | |
| 76 | 51 | ); |
| 77 | 52 | |
| 78 | 53 | /* |
| 79 | - * Build media queries from viewport size definitions using the CSS range syntax. | |
| 80 | - * Could be absorbed into the style engine, | |
| 81 | - * as well as classname building, and declaration of the display property, if required. | |
| 54 | + * Viewport media queries are keyed by style-state names (`@mobile`, | |
| 55 | + * `@tablet`, and `@desktop`). Block visibility metadata and generated | |
| 56 | + * classes use plain viewport names, so map the keys at this boundary. | |
| 82 | 57 | */ |
| 83 | - $viewport_media_queries = array(); | |
| 84 | - $previous_size = null; | |
| 85 | - foreach ( $viewport_sizes as $index => $viewport_size ) { | |
| 86 | - // First item: width <= size. | |
| 87 | - if ( 0 === $index ) { | |
| 88 | - $viewport_media_queries[ $viewport_size['slug'] ] = "@media (width <= {$viewport_size['size']})"; | |
| 89 | - } elseif ( count( $viewport_sizes ) - 1 === $index && $previous_size ) { | |
| 90 | - // Last item: width > previous size. | |
| 91 | - $viewport_media_queries[ $viewport_size['slug'] ] = "@media (width > $previous_size)"; | |
| 92 | - } else { | |
| 93 | - // Middle items: previous size < width <= size. | |
| 94 | - $viewport_media_queries[ $viewport_size['slug'] ] = "@media ({$previous_size} < width <= {$viewport_size['size']})"; | |
| 95 | - } | |
| 96 | - | |
| 97 | - $previous_size = $viewport_size['size'] ?? null; | |
| 58 | + $block_visibility_media_queries = array(); | |
| 59 | + foreach ( $viewport_media_queries as $viewport_state => $media_query ) { | |
| 60 | + $block_visibility_media_queries[ ltrim( $viewport_state, '@' ) ] = $media_query; | |
| 98 | 61 | } |
| 62 | + $viewport_media_queries = $block_visibility_media_queries; | |
| 99 | 63 | |
| 100 | 64 | $hidden_on = array(); |
| 101 | 65 | |
| 102 | 66 | // Collect which viewport the block is hidden on (only known viewport sizes). |
