diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json new file mode 100644 index 00000000000000..9a9259b9f60979 --- /dev/null +++ b/experimental-default-global-styles.json @@ -0,0 +1,9 @@ +{ + "global": { + "color": { + "primary": "#52accc", + "background": "white", + "text": "black" + } + } +} diff --git a/lib/global-styles.php b/lib/global-styles.php new file mode 100644 index 00000000000000..8074e454aeb8d0 --- /dev/null +++ b/lib/global-styles.php @@ -0,0 +1,131 @@ + $value ) { + $processed_key = str_replace( '/', '-', $key ); + $separator = $is_start ? '' : '--'; + $new_key = ( $prefix ? $prefix . $separator : '' ) . $processed_key; + + if ( is_array( $value ) ) { + $result = array_merge( + $result, + gutenberg_get_css_vars( $value, $new_key, false ) + ); + } else { + $result[ $new_key ] = $value; + } + } + return $result; +} + +/** + * Function responsible for enqueuing the style that define the global styles css variables. + */ +function gutenberg_enqueue_global_styles_assets() { + if ( ! locate_template( 'experimental-theme.json' ) ) { + return; + } + $default_global_styles_path = dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'; + $default_global_styles = null; + + if ( file_exists( $default_global_styles_path ) ) { + $default_global_styles = json_decode( + file_get_contents( $default_global_styles_path ), + true + ); + } + + $theme_json_path = locate_template( 'experimental-theme.json' ); + $theme_json_global_styles = null; + if ( $theme_json_path ) { + $theme_json_global_styles = json_decode( + file_get_contents( $theme_json_path ), + true + ); + } + + // To-do: Load user customizations from a CPT. + $css_vars = array(); + foreach ( + array( + $default_global_styles, + $theme_json_global_styles, + ) as $global_styles_definition + ) { + if ( ! $global_styles_definition ) { + continue; + } + if ( isset( $global_styles_definition['global'] ) ) { + $css_vars = array_merge( + $css_vars, + gutenberg_get_css_vars( $global_styles_definition['global'], '--wp-' ) + ); + } + if ( isset( $global_styles_definition['blocks'] ) ) { + $css_vars = array_merge( + $css_vars, + gutenberg_get_css_vars( $global_styles_definition['blocks'], '--wp-block-' ) + ); + } + } + + if ( empty( $css_vars ) ) { + return; + } + + $inline_style = ":root {\n"; + foreach ( $css_vars as $var => $value ) { + $inline_style .= "\t" . $var . ': ' . $value . ";\n"; + } + $inline_style .= '}'; + + wp_register_style( 'global-styles', false, array(), true, true ); + wp_add_inline_style( 'global-styles', $inline_style ); + wp_enqueue_style( 'global-styles' ); +} +add_action( 'enqueue_block_assets', 'gutenberg_enqueue_global_styles_assets' ); + +/** + * Adds class wp-gs to the frontend body class if the theme defines a experimental-theme.json. + * + * @param array $classes Existing body classes. + * @return array The filtered array of body classes. + */ +function gutenberg_add_wp_gs_class_front_end( $classes ) { + if ( locate_template( 'experimental-theme.json' ) ) { + return array_merge( $classes, array( 'wp-gs' ) ); + } + return $classes; +} +add_filter( 'body_class', 'gutenberg_add_wp_gs_class_front_end' ); + + +/** + * Adds class wp-gs to the block-editor body class if the theme defines a experimental-theme.json. + * + * @param string $classes Existing body classes separated by space. + * @return string The filtered string of body classes. + */ +function gutenberg_add_wp_gs_class_editor( $classes ) { + global $current_screen; + if ( $current_screen->is_block_editor() && locate_template( 'experimental-theme.json' ) ) { + return $classes . ' wp-gs'; + } + return $classes; +} +add_filter( 'admin_body_class', 'gutenberg_add_wp_gs_class_editor' ); diff --git a/lib/load.php b/lib/load.php index 7076be29f63127..5b641a13278d1e 100644 --- a/lib/load.php +++ b/lib/load.php @@ -64,3 +64,4 @@ function gutenberg_is_experiment_enabled( $name ) { require dirname( __FILE__ ) . '/experiments-page.php'; require dirname( __FILE__ ) . '/customizer.php'; require dirname( __FILE__ ) . '/edit-site-page.php'; +require dirname( __FILE__ ) . '/global-styles.php'; diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index f2ad6bf77b130c..64e5174f287a3e 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -36,6 +36,10 @@ $blocks-button__height: 56px; } } +.wp-gs .wp-block-button__link:not(.has-background) { + background-color: var(--wp-block-core-button--color--background, var(--wp-color--primary, $dark-gray-700)); +} + .is-style-squared .wp-block-button__link { border-radius: 0; }