From f186960f101aee9717c2d7a1c2b03737cd904a83 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 5 May 2026 14:34:16 -0700 Subject: [PATCH 1/3] fix: make colour label changes more contained to social links block --- src/blocks/author-profile-social/edit.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/blocks/author-profile-social/edit.jsx b/src/blocks/author-profile-social/edit.jsx index 07d56054e3..738d4a93f8 100644 --- a/src/blocks/author-profile-social/edit.jsx +++ b/src/blocks/author-profile-social/edit.jsx @@ -52,9 +52,10 @@ const resolveColor = ( presetSlug, customValue ) => { * @param {Object} props.attributes Block attributes. * @param {Function} props.setAttributes Function to update attributes. * @param {string} props.clientId Block client ID. + * @param {boolean} props.isSelected Whether the block is currently selected. * @return {JSX.Element} The edit component. */ -export default function Edit( { attributes, setAttributes, clientId } ) { +export default function Edit( { attributes, setAttributes, clientId, isSelected } ) { const AuthorContext = getSharedAuthorContext(); const author = useContext( AuthorContext ); const { iconSize, style: styleAttr, textColor, backgroundColor, className } = attributes; @@ -67,7 +68,12 @@ export default function Edit( { attributes, setAttributes, clientId } ) { const iconBackground = ! isBrand ? resolveColor( backgroundColor, styleAttr?.color?.background ) : undefined; // Hide color panel when "Brand" is active; rename labels when "Default". + // Only run while this block is selected — otherwise the global sidebar + // query leaks the relabel/hide into every other block's color panel. useEffect( () => { + if ( ! isSelected ) { + return; + } const sidebar = document.querySelector( '.interface-complementary-area' ); if ( ! sidebar ) { return; @@ -105,7 +111,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) { observer.observe( sidebar, { childList: true, subtree: true } ); return () => observer.disconnect(); - }, [ isBrand ] ); + }, [ isBrand, isSelected ] ); const blockProps = useBlockProps( { className: 'author-profile-social__list', From 1c8a4900d1005af8367aba4b48a3d5314e0da9bb Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 5 May 2026 15:59:18 -0700 Subject: [PATCH 2/3] fix: refactor Author Profile icon colour pic ker to match Core's Social Icons approach --- src/blocks/author-profile-social/block.json | 25 +++- .../class-author-profile-social-block.php | 44 ++---- src/blocks/author-profile-social/edit.jsx | 134 ++++++++---------- 3 files changed, 89 insertions(+), 114 deletions(-) diff --git a/src/blocks/author-profile-social/block.json b/src/blocks/author-profile-social/block.json index 033fef3447..98e4a70898 100644 --- a/src/blocks/author-profile-social/block.json +++ b/src/blocks/author-profile-social/block.json @@ -19,6 +19,24 @@ "iconSize": { "type": "number", "default": 24 + }, + "iconColor": { + "type": "string" + }, + "customIconColor": { + "type": "string" + }, + "iconColorValue": { + "type": "string" + }, + "iconBackgroundColor": { + "type": "string" + }, + "customIconBackgroundColor": { + "type": "string" + }, + "iconBackgroundColorValue": { + "type": "string" } }, "styles": [ @@ -26,13 +44,6 @@ { "name": "brand", "label": "Brand" } ], "supports": { - "color": { - "enableContrastChecker": false, - "background": true, - "text": true, - "link": false, - "__experimentalSkipSerialization": [ "text", "background" ] - }, "html": false, "layout": { "allowSwitching": false, diff --git a/src/blocks/author-profile-social/class-author-profile-social-block.php b/src/blocks/author-profile-social/class-author-profile-social-block.php index b50da7f31f..b90e9681dc 100644 --- a/src/blocks/author-profile-social/class-author-profile-social-block.php +++ b/src/blocks/author-profile-social/class-author-profile-social-block.php @@ -221,8 +221,6 @@ private static function render_social_flat( array $attributes, WP_Block $block, /** * Get wrapper attributes (class, style, etc.) for the block. - * Sets block context so core includes default class, custom className, and other supports. - * Color serialization is skipped via block.json so colors are applied only as CSS vars. * * @param WP_Block $block Block instance. * @param array $attributes Block attributes. @@ -230,49 +228,30 @@ private static function render_social_flat( array $attributes, WP_Block $block, * @return string HTML attributes for the wrapper element. */ private static function get_block_wrapper_attributes( WP_Block $block, array $attributes, int $icon_size ): string { - $previous = \WP_Block_Supports::$block_to_render ?? null; - \WP_Block_Supports::$block_to_render = $block->parsed_block; - - $wrapper_attributes = get_block_wrapper_attributes( + return get_block_wrapper_attributes( [ 'class' => 'author-profile-social__list', 'style' => self::get_wrapper_style( $attributes, $icon_size ), ] ); - - \WP_Block_Supports::$block_to_render = $previous; - - return $wrapper_attributes; - } - - /** - * Convert a preset token (var:preset|type|slug) to a CSS variable reference. - * - * @param string $value Raw value, e.g. "var:preset|color|primary" or "#fff". - * @return string CSS value, e.g. "var(--wp--preset--color--primary)" or "#fff". - */ - private static function preset_to_css( string $value ): string { - if ( preg_match( '/^var:preset\|([^|]+)\|(.+)$/', $value, $matches ) ) { - return sprintf( 'var(--wp--preset--%s--%s)', $matches[1], $matches[2] ); - } - return $value; } /** - * Resolve a color value from attributes (preset slug or custom style token). + * Resolve a color value from the block's icon color attributes. + * Prefers the preset slug (so theme switches reflect new palette values) + * and falls back to the saved hex/CSS value when no preset is set. * * @param array $attributes Block attributes. - * @param string $preset_key Top-level preset attribute key (e.g. "textColor"). - * @param string $style_key Key under style.color (e.g. "text"). + * @param string $preset_key Preset slug attribute key (e.g. "iconColor"). + * @param string $value_key Resolved CSS value attribute key (e.g. "iconColorValue"). * @return string|null CSS color value or null. */ - private static function resolve_color( array $attributes, string $preset_key, string $style_key ): ?string { + private static function resolve_color( array $attributes, string $preset_key, string $value_key ): ?string { if ( ! empty( $attributes[ $preset_key ] ) && is_string( $attributes[ $preset_key ] ) ) { return sprintf( 'var(--wp--preset--color--%s)', $attributes[ $preset_key ] ); } - $custom = $attributes['style']['color'][ $style_key ] ?? null; - if ( ! empty( $custom ) && is_string( $custom ) ) { - return self::preset_to_css( $custom ); + if ( ! empty( $attributes[ $value_key ] ) && is_string( $attributes[ $value_key ] ) ) { + return $attributes[ $value_key ]; } return null; } @@ -281,7 +260,6 @@ private static function resolve_color( array $attributes, string $preset_key, st * Build wrapper inline style with CSS variables for icon sizing and color. * Margin is handled natively by get_block_wrapper_attributes(). * Gap is handled by WP layout support (outputs scoped