From 1760d92eb321356aeb8e7509c6c2f6b07f56d1c2 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 25 May 2022 17:23:20 +0300 Subject: [PATCH 01/10] adds hover state link mapping to elements --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 7 +++++++ 1 file changed, 7 insertions(+) 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 0331616fb1b9e5..ec2ba6903eff60 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 @@ -17,8 +17,15 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { const __EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; + /** + * The valid elements that can be found under styles. + * + * @since 5.8.0 + * @var string[] + */ const ELEMENTS = array( 'link' => 'a', + 'link:hover' => 'a:hover', 'h1' => 'h1', 'h2' => 'h2', 'h3' => 'h3', From b312c3088ae5fc2f613322c5688ecd16846d68a6 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 26 May 2022 10:00:56 +0300 Subject: [PATCH 02/10] adds the hover state to links to the client side elements API --- packages/blocks/src/api/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index df0f05fdf5fe92..d4273e11b0dd65 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -183,6 +183,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { export const __EXPERIMENTAL_ELEMENTS = { link: 'a', + 'link:hover': 'a:hover', h1: 'h1', h2: 'h2', h3: 'h3', From 1d740e36e2da68931c548b6fd56cd06e1fefc173 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 May 2022 20:16:59 +0100 Subject: [PATCH 03/10] Basic link hover key controls --- packages/block-editor/src/hooks/color.js | 46 +++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 3219e016923f3e..1d2039a06cd237 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -110,6 +110,13 @@ const resetAllLinkFilter = ( attributes ) => ( { ), } ); +const resetAllLinkHoverFilter = ( attributes ) => ( { + style: clearColorFromStyles( + [ 'elements', 'link:hover', 'color', 'text' ], + attributes.style + ), +} ); + /** * Clears all background color related properties including gradients from * supplied block attributes. @@ -216,7 +223,6 @@ export function addSaveProps( props, blockType, attributes ) { backgroundColor || style?.color?.background || ( hasGradient && ( gradient || style?.color?.gradient ) ); - const newClassName = classnames( props.className, textClass, @@ -284,6 +290,10 @@ const getLinkColorFromAttributeValue = ( colors, value ) => { */ export function ColorEdit( props ) { const { name: blockName, attributes } = props; + + if ( blockName === 'core/paragraph' ) { + // debugger; + } // Some color settings have a special handling for deprecated flags in `useSetting`, // so we can't unwrap them by doing const { ... } = useSetting('color') // until https://github.com/WordPress/gutenberg/issues/37094 is fixed. @@ -443,6 +453,26 @@ export function ColorEdit( props ) { }; }; + const onChangeLinkHoverColor = ( value ) => { + const colorObject = getColorObjectByColorValue( allSolids, value ); + const newLinkColorValue = colorObject?.slug + ? `var:preset|color|${ colorObject.slug }` + : value; + + const newStyle = cleanEmptyObject( + immutableSet( + localAttributes.current?.style, + [ 'elements', 'link:hover', 'color', 'text' ], + newLinkColorValue + ) + ); + props.setAttributes( { style: newStyle } ); + localAttributes.current = { + ...localAttributes.current, + ...{ style: newStyle }, + }; + }; + const enableContrastChecking = Platform.OS === 'web' && ! gradient && ! style?.color?.gradient; @@ -508,6 +538,20 @@ export function ColorEdit( props ) { isShownByDefault: defaultColorControls?.link, resetAllFilter: resetAllLinkFilter, }, + { + label: __( 'Link Hover' ), + onColorChange: onChangeLinkHoverColor, + colorValue: getLinkColorFromAttributeValue( + allSolids, + style?.elements?.[ 'link:hover' ]?.color + ?.text + ), + clearable: !! style?.elements?.[ 'link:hover' ] + ?.color?.text, + isShownByDefault: + defaultColorControls?.[ 'link:hover' ], + resetAllFilter: resetAllLinkHoverFilter, + }, ] : [] ), ] } From fc44ad264cb486954df00b9bc04dc9eef32637e0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 May 2022 20:19:09 +0100 Subject: [PATCH 04/10] Adds classname --- packages/block-editor/src/hooks/color.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 1d2039a06cd237..eb691f2f9d85aa 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -238,6 +238,9 @@ export function addSaveProps( props, blockType, attributes ) { 'has-background': serializeHasBackground && hasBackground, 'has-link-color': shouldSerialize( 'link' ) && style?.elements?.link?.color, + 'has-link-hover-color': + shouldSerialize( 'link:hover' ) && + style?.elements?.[ 'link:hover' ]?.color, } ); props.className = newClassName ? newClassName : undefined; From 2e37fa5dbc401c650f15fd613c2b393905dee872 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 May 2022 20:24:08 +0100 Subject: [PATCH 05/10] =?UTF-8?q?Fix=20bug=20where=20post=20comments=20did?= =?UTF-8?q?n=E2=80=99t=20have=20a=20name=20attribute?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/compat/wordpress-6.1/get-global-styles-and-settings.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/compat/wordpress-6.1/get-global-styles-and-settings.php b/lib/compat/wordpress-6.1/get-global-styles-and-settings.php index 64d6a1050791b6..4b969153395002 100644 --- a/lib/compat/wordpress-6.1/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.1/get-global-styles-and-settings.php @@ -12,7 +12,11 @@ function wp_add_global_styles_for_blocks() { $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); // TODO some nodes dont have a name... $block_nodes = $tree->get_styles_block_nodes(); + foreach ( $block_nodes as $metadata ) { + if ( empty( $metadata['name'] ) ) { + continue; + } $block_css = $tree->get_styles_for_block( $metadata ); $block_name = str_replace( 'core/', '', $metadata['name'] ); // These block styles are added on block_render. From 0281d5f52f42446a63c7b967e15e1152f0b877b1 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 26 May 2022 20:44:50 +0100 Subject: [PATCH 06/10] Output link styles on frontend --- lib/block-supports/elements.php | 39 ++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index 9230fd48b1c102..20cac4431a8711 100644 --- a/lib/block-supports/elements.php +++ b/lib/block-supports/elements.php @@ -29,8 +29,9 @@ function gutenberg_render_elements_support( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' ); + $skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link:hover' ); - if ( $skip_link_color_serialization ) { + if ( $skip_link_color_serialization && $skip_link_color_serialization ) { return $block_content; } @@ -38,14 +39,19 @@ function gutenberg_render_elements_support( $block_content, $block ) { if ( ! empty( $block['attrs'] ) ) { $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null ); } + + $link_hover_color = null; + if ( ! empty( $block['attrs'] ) ) { + $link_hover_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link:hover', 'color', 'text' ), null ); + } /* - * For now we only care about link color. + * For now we only care about link color and link hover color. * This code in the future when we have a public API * should take advantage of WP_Theme_JSON_Gutenberg::compute_style_properties * and work for any element and style. */ - if ( null === $link_color ) { + if ( null === $link_color && null === $link_hover_color ) { return $block_content; } @@ -75,7 +81,11 @@ function gutenberg_render_elements_support( $block_content, $block ) { } /** - * Render the elements stylesheet. + * Renders the elements stylesheet for a given block type. + * + * Each block may have styles for it's child HTML elements (currently only a limited subset are supported). + * Render an inline