From 567978a0c7f51308a89f0c406b3dc3d292d54447 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 2 Jun 2022 18:14:10 +1000 Subject: [PATCH] Testing rule generation for get_styles_for_block --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 15 +- test/emptytheme/theme.json | 352 +++++++++++++++++- 2 files changed, 362 insertions(+), 5 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 5203263639368..8b4ded6b0707c 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -225,8 +225,19 @@ public function get_styles_for_block( $block_metadata ) { $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() ); $selector = $block_metadata['selector']; $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); - $declarations = static::compute_style_properties( $node, $settings ); - $block_rules = static::to_ruleset( $selector, $declarations ); +// $declarations = static::compute_style_properties( $node, $settings ); +// $block_rules = static::to_ruleset( $selector, $declarations ); + $block_rules = ''; + $styles = gutenberg_style_engine_generate( + $node, + array( + 'selector' => $selector, + 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG, + ) + ); + if ( isset( $styles['css'] ) ) { + $block_rules = $styles['css']; + } return $block_rules; } diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index ed2d7b8d0946a..873cce498ff99 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -1,11 +1,357 @@ { "version": 2, + "customTemplates": [ + { + "name": "blank", + "title": "Blank", + "postTypes": [ "page", "post" ] + }, + { + "name": "page-large-header", + "title": "Page (Large Header)", + "postTypes": [ "page" ] + }, + { + "name": "single-no-separators", + "title": "Single Post (No Separators)", + "postTypes": [ "post" ] + }, + { + "name": "page-no-separators", + "title": "Page (No Separators)", + "postTypes": [ "page" ] + } + ], "settings": { "appearanceTools": true, + "color": { + "duotone": [ + { + "colors": [ "#000000", "#ffffff" ], + "slug": "foreground-and-background", + "name": "Foreground and background" + }, + { + "colors": [ "#000000", "#ffe2c7" ], + "slug": "foreground-and-secondary", + "name": "Foreground and secondary" + }, + { + "colors": [ "#000000", "#f6f6f6" ], + "slug": "foreground-and-tertiary", + "name": "Foreground and tertiary" + }, + { + "colors": [ "#1a4548", "#ffffff" ], + "slug": "primary-and-background", + "name": "Primary and background" + }, + { + "colors": [ "#1a4548", "#ffe2c7" ], + "slug": "primary-and-secondary", + "name": "Primary and secondary" + }, + { + "colors": [ "#1a4548", "#f6f6f6" ], + "slug": "primary-and-tertiary", + "name": "Primary and tertiary" + } + ], + "gradients": [ + { + "slug": "vertical-secondary-to-tertiary", + "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--tertiary) 100%)", + "name": "Vertical secondary to tertiary" + }, + { + "slug": "vertical-secondary-to-background", + "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--background) 100%)", + "name": "Vertical secondary to background" + }, + { + "slug": "vertical-tertiary-to-background", + "gradient": "linear-gradient(to bottom,var(--wp--preset--color--tertiary) 0%,var(--wp--preset--color--background) 100%)", + "name": "Vertical tertiary to background" + }, + { + "slug": "diagonal-primary-to-foreground", + "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--foreground) 100%)", + "name": "Diagonal primary to foreground" + }, + { + "slug": "diagonal-secondary-to-background", + "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--secondary) 50%,var(--wp--preset--color--background) 50%)", + "name": "Diagonal secondary to background" + }, + { + "slug": "diagonal-background-to-secondary", + "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--secondary) 50%)", + "name": "Diagonal background to secondary" + }, + { + "slug": "diagonal-tertiary-to-background", + "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--tertiary) 50%,var(--wp--preset--color--background) 50%)", + "name": "Diagonal tertiary to background" + }, + { + "slug": "diagonal-background-to-tertiary", + "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--tertiary) 50%)", + "name": "Diagonal background to tertiary" + } + ], + "palette": [ + { + "slug": "foreground", + "color": "#000000", + "name": "Foreground" + }, + { + "slug": "background", + "color": "#ffffff", + "name": "Background" + }, + { + "slug": "primary", + "color": "#1a4548", + "name": "Primary" + }, + { + "slug": "secondary", + "color": "#ffe2c7", + "name": "Secondary" + }, + { + "slug": "tertiary", + "color": "#F6F6F6", + "name": "Tertiary" + } + ], + "customDuotone": true + }, + "custom": { + "spacing": { + "small": "max(1.25rem, 5vw)", + "medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))", + "large": "clamp(4rem, 10vw, 8rem)", + "outer": "var(--wp--custom--spacing--small, 1.25rem)" + }, + "typography": { + "font-size": { + "huge": "clamp(2.25rem, 4vw, 2.75rem)", + "gigantic": "clamp(2.75rem, 6vw, 3.25rem)", + "colossal": "clamp(3.25rem, 8vw, 6.25rem)" + }, + "line-height": { + "tiny": 1.15, + "small": 1.2, + "medium": 1.4, + "normal": 1.6 + } + } + }, + "spacing": { + "units": [ "%", "px", "em", "rem", "vh", "vw" ] + }, + "typography": { + "dropCap": false, + "fontFamilies": [ + { + "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", + "name": "System Font", + "slug": "system-font" + }, + { + "fontFamily": "\"Source Serif Pro\", serif", + "name": "Source Serif Pro", + "slug": "source-serif-pro" + } + ], + "fontSizes": [ + { + "size": "1rem", + "slug": "small" + }, + { + "size": "1.125rem", + "slug": "medium" + }, + { + "size": "1.75rem", + "slug": "large" + }, + { + "size": "clamp(1.75rem, 3vw, 2.25rem)", + "slug": "x-large" + } + ] + }, "layout": { - "contentSize": "840px", - "wideSize": "1100px" + "contentSize": "650px", + "wideSize": "1000px" + } + }, + "styles": { + "blocks": { + "core/button": { + "border": { + "radius": "0" + }, + "color": { + "background": "var(--wp--preset--color--primary)", + "text": "var(--wp--preset--color--background)" + }, + "typography": { + "fontSize": "var(--wp--preset--font-size--medium)" + } + }, + "core/post-title": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", + "fontWeight": "300", + "lineHeight": "var(--wp--custom--typography--line-height--tiny)", + "fontSize": "var(--wp--custom--typography--font-size--gigantic)" + } + }, + "core/post-comments": { + "spacing": { + "padding": { + "top": "var(--wp--custom--spacing--small)" + } + } + }, + "core/pullquote": { + "border": { + "width": "1px 0" + } + }, + "core/query-title": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", + "fontWeight": "300", + "lineHeight": "var(--wp--custom--typography--line-height--small)", + "fontSize": "var(--wp--custom--typography--font-size--gigantic)" + } + }, + "core/quote": { + "border": { + "width": "1px" + } + }, + "core/site-title": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)", + "lineHeight": "var(--wp--custom--typography--line-height--normal)", + "fontSize": "var(--wp--preset--font-size--medium)", + "fontWeight": "normal" + } + }, + "core/image": { + "color": { + "duotone": "#ffffff" + } + }, + "core/group": { + "spacing": { + "margin": { + "top": "40px" + } + }, + "color": { + "background": "var(--wp--preset--color--primary)", + "text": "var(--wp--preset--color--background)" + } + } + }, + "color": { + "background": "var(--wp--preset--color--background)", + "text": "var(--wp--preset--color--foreground)" + }, + "elements": { + "h1": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", + "fontWeight": "300", + "lineHeight": "var(--wp--custom--typography--line-height--tiny)", + "fontSize": "var(--wp--custom--typography--font-size--colossal)" + } + }, + "h2": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", + "fontWeight": "300", + "lineHeight": "var(--wp--custom--typography--line-height--small)", + "fontSize": "var(--wp--custom--typography--font-size--gigantic)" + } + }, + "h3": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", + "fontWeight": "300", + "lineHeight": "var(--wp--custom--typography--line-height--tiny)", + "fontSize": "var(--wp--custom--typography--font-size--huge)" + } + }, + "h4": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", + "fontWeight": "300", + "lineHeight": "var(--wp--custom--typography--line-height--tiny)", + "fontSize": "var(--wp--preset--font-size--x-large)" + } + }, + "h5": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)", + "fontWeight": "700", + "textTransform": "uppercase", + "lineHeight": "var(--wp--custom--typography--line-height--normal)", + "fontSize": "var(--wp--preset--font-size--medium)" + } + }, + "h6": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)", + "fontWeight": "400", + "textTransform": "uppercase", + "lineHeight": "var(--wp--custom--typography--line-height--normal)", + "fontSize": "var(--wp--preset--font-size--medium)" + } + }, + "link": { + "color": { + "text": "var(--wp--preset--color--foreground)" + } + } + }, + "spacing": { + "blockGap": "1.5rem" + }, + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)", + "lineHeight": "var(--wp--custom--typography--line-height--normal)", + "fontSize": "var(--wp--preset--font-size--medium)" } }, - "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] + "templateParts": [ + { + "name": "header", + "title": "Header", + "area": "header" + }, + { + "name": "header-large-dark", + "title": "Header (Dark, large)", + "area": "header" + }, + { + "name": "header-small-dark", + "title": "Header (Dark, small)", + "area": "header" + }, + { + "name": "footer", + "title": "Footer", + "area": "footer" + } + ] }