diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 960ea659e8d2e..6cb5ce994fce4 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -98,4 +98,84 @@ public static function get_theme_data( $deprecated = array(), $settings = array( return $with_theme_supports; } + /** + * Gets the styles for blocks from the block.json file. + * + * @return WP_Theme_JSON + */ + public static function get_block_data() { + $registry = WP_Block_Type_Registry::get_instance(); + $blocks = $registry->get_all_registered(); + $config = array( 'version' => 1 ); + foreach ( $blocks as $block_name => $block_type ) { + if ( isset( $block_type->supports['__experimentalStyle'] ) ) { + $config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $block_type->supports['__experimentalStyle'] ); + } + } + + // Core here means it's the lower level part of the styles chain. + // It can be a core or a third-party block. + return new WP_Theme_JSON( $config, 'core' ); + } + + /** + * When given an array, this will remove any keys with the name `//`. + * + * @param array $array The array to filter. + * @return array The filtered array. + */ + private static function remove_JSON_comments( $array ) { + unset( $array['//'] ); + foreach ( $array as $k => $v ) { + if ( is_array( $v ) ) { + $array[ $k ] = static::remove_JSON_comments( $v ); + } + } + + return $array; + } + + /** + * Returns the data merged from multiple origins. + * + * There are three sources of data (origins) for a site: + * default, theme, and custom. The custom's has higher priority + * than the theme's, and the theme's higher than default's. + * + * Unlike the getters {@link get_core_data}, + * {@link get_theme_data}, and {@link get_user_data}, + * this method returns data after it has been merged + * with the previous origins. This means that if the same piece of data + * is declared in different origins (user, theme, and core), + * the last origin overrides the previous. + * + * For example, if the user has set a background color + * for the paragraph block, and the theme has done it as well, + * the user preference wins. + * + * @since 5.8.0 + * @since 5.9.0 Added user data, removed the `$settings` parameter, + * added the `$origin` parameter. + * + * @param string $origin Optional. To what level should we merge data. + * Valid values are 'theme' or 'custom'. Default 'custom'. + * @return WP_Theme_JSON + */ + public static function get_merged_data( $origin = 'custom' ) { + if ( is_array( $origin ) ) { + _deprecated_argument( __FUNCTION__, '5.9' ); + } + + $result = new WP_Theme_JSON_Gutenberg(); + $result->merge( static::get_core_data() ); + $result->merge( static::get_block_data() ); + $result->merge( static::get_theme_data() ); + if ( 'custom' === $origin ) { + $result->merge( static::get_user_data() ); + } + + return $result; + } + + } diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f86030c7460a5..20c20771b4b56 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -89,7 +89,30 @@ "radius": true } }, - "__experimentalSelector": ".wp-block-button__link" + "__experimentalSelector": ".wp-block-button__link", + "__experimentalStyle": { + "border": { + "//": "100% causes an oval, but any explicit but really high value retains the pill shape.", + "radius": "9999px" + }, + "color": { + "text": "#fff", + "background": "#32373c" + }, + "typography": { + "fontSize": "1.125em", + "textDecoration": "none" + }, + "spacing": { + "padding": { + "//": "The extra 2px are added to size solids the same as the outline versions.", + "top": "calc(0.667em + 2px)", + "right": "calc(1.333em + 2px)", + "bottom": "calc(0.667em + 2px)", + "left": "calc(1.333em + 2px)" + } + } + } }, "styles": [ { "name": "fill", "label": "Fill", "isDefault": true }, diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index f03929b0ebfb7..389b86194ad0c 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -4,14 +4,9 @@ $blocks-block__margin: 0.5em; // Prefer the link selector instead of the regular button classname // to support the previous markup in addition to the new one. .wp-block-button__link { - color: $white; - background-color: #32373c; - border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape. box-shadow: none; cursor: pointer; display: inline-block; - font-size: 1.125em; - padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions. text-align: center; text-decoration: none; word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.