From c25371fe2c89e0d954e9706857317368a43b4547 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Mon, 2 Feb 2026 10:25:33 -0800 Subject: [PATCH 01/12] feat: add option to toggle off icon/text, and update tests --- src/blocks/my-account-button/README.md | 1 + src/blocks/my-account-button/block.json | 8 ++++ .../class-my-account-button-block.php | 45 ++++++++++++------- src/blocks/my-account-button/edit.js | 37 ++++++++++++--- src/reader-activation-auth/index.js | 5 +++ .../class-test-my-account-button-block.php | 17 +++++-- 6 files changed, 89 insertions(+), 24 deletions(-) diff --git a/src/blocks/my-account-button/README.md b/src/blocks/my-account-button/README.md index 82b1349410..cc4462cac7 100644 --- a/src/blocks/my-account-button/README.md +++ b/src/blocks/my-account-button/README.md @@ -5,6 +5,7 @@ Provides a reader account/sign-in button for sites using Newspack Reader Activat ## Settings - Signed in label (`signedInLabel`): Text shown when the reader is authenticated. - Signed out label (`signedOutLabel`): Text shown when the reader is not authenticated. +- Display: ability to toggle on/off the display of the button's icon or text label. Note: you cannot toggle off both the icon and label at the same time. ## Editor behavior - Use the toolbar toggle (Signed in / Signed out) to edit each label. diff --git a/src/blocks/my-account-button/block.json b/src/blocks/my-account-button/block.json index e4d50aafa9..f04027715f 100644 --- a/src/blocks/my-account-button/block.json +++ b/src/blocks/my-account-button/block.json @@ -20,6 +20,14 @@ "signedOutLabel": { "type": "string", "default": "Sign in" + }, + "showLabel": { + "type": "boolean", + "default": true + }, + "showIcon": { + "type": "boolean", + "default": true } }, "supports": { diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index a7a85a4cd7..748bbc0a54 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -96,10 +96,19 @@ public static function render_block( $attrs ) { ]; $attrs = \wp_parse_args( $attrs, $default_attrs ); - $is_signed_in = \is_user_logged_in(); - $label = $is_signed_in ? $attrs['signedInLabel'] : $attrs['signedOutLabel']; + $is_signed_in = \is_user_logged_in(); + $signed_in_label = '' === trim( (string) $attrs['signedInLabel'] ) ? $default_attrs['signedInLabel'] : $attrs['signedInLabel']; + $signed_out_label = '' === trim( (string) $attrs['signedOutLabel'] ) ? $default_attrs['signedOutLabel'] : $attrs['signedOutLabel']; + $label = $is_signed_in ? $signed_in_label : $signed_out_label; + $show_label = isset( $attrs['showLabel'] ) ? (bool) $attrs['showLabel'] : true; + $show_icon = isset( $attrs['showIcon'] ) ? (bool) $attrs['showIcon'] : true; + + if ( ! $show_label && ! $show_icon ) { + $show_label = true; + } + if ( '' === trim( (string) $label ) ) { - return ''; + $label = $is_signed_in ? $default_attrs['signedInLabel'] : $default_attrs['signedOutLabel']; } $account_url = self::get_account_url(); @@ -118,8 +127,8 @@ public static function render_block( $attrs ) { } $labels = [ - 'signedin' => $attrs['signedInLabel'], - 'signedout' => $attrs['signedOutLabel'], + 'signedin' => $signed_in_label, + 'signedout' => $signed_out_label, ]; $extra_classes = [ @@ -153,20 +162,26 @@ public static function render_block( $attrs ) { $wrapper_div_classes = \array_merge( $wrapper_div_classes, $custom_classes ); } - $wrapper_attributes = \get_block_wrapper_attributes( - [ - 'class' => implode( ' ', $extra_classes ), - 'href' => \esc_url_raw( $href ), - ] - ); + $wrapper_attribute_args = [ + 'class' => implode( ' ', $extra_classes ), + 'href' => \esc_url_raw( $href ), + 'data-wp-logged-in' => $is_signed_in ? '1' : '0', + ]; + $wrapper_attributes = \get_block_wrapper_attributes( $wrapper_attribute_args ); $link = '
'; $link .= '
'; $link .= ''; - $link .= ''; - $link .= ''; + if ( $show_icon ) { + $link .= ''; + } + $label_classes = [ 'newspack-reader__account-link__label' ]; + if ( ! $show_label ) { + $label_classes[] = 'screen-reader-text'; + } + $link .= '' . \esc_html( $label ) . ''; $link .= ''; $link .= '
'; $link .= '
'; diff --git a/src/blocks/my-account-button/edit.js b/src/blocks/my-account-button/edit.js index fcca8703c7..3c95784d46 100644 --- a/src/blocks/my-account-button/edit.js +++ b/src/blocks/my-account-button/edit.js @@ -14,6 +14,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { useState } from '@wordpress/element'; import { BlockControls, + InspectorControls, RichText, useBlockProps, /* eslint-disable @wordpress/no-unsafe-wp-apis */ @@ -22,16 +23,18 @@ import { __experimentalGetSpacingClassesAndStyles as useSpacingProps, /* eslint-enable @wordpress/no-unsafe-wp-apis */ } from '@wordpress/block-editor'; -import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; +import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components'; /** * Internal dependencies */ function MyAccountButtonEdit( { attributes, setAttributes } ) { - const { signedInLabel, signedOutLabel, style, className: customClassName } = attributes; + const { signedInLabel, signedOutLabel, showLabel, showIcon, style, className: customClassName } = attributes; const borderProps = useBorderProps( attributes ); const colorProps = useColorProps( attributes ); const spacingProps = useSpacingProps( attributes ); + const isLabelVisible = showLabel !== false; + const isIconVisible = showIcon !== false; const blockProps = useBlockProps( { className: classnames( 'wp-block-button__link', @@ -57,6 +60,21 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) { const isSignedOutPreview = previewState === 'signedout'; const activeLabel = isSignedOutPreview ? signedOutLabel : signedInLabel; const placeholderText = isSignedOutPreview ? __( 'Sign in', 'newspack-plugin' ) : __( 'My Account', 'newspack-plugin' ); + function setShowLabel( nextValue ) { + if ( ! nextValue && ! isIconVisible ) { + setAttributes( { showLabel: false, showIcon: true } ); + return; + } + setAttributes( { showLabel: nextValue } ); + } + + function setShowIcon( nextValue ) { + if ( ! nextValue && ! isLabelVisible ) { + setAttributes( { showLabel: true, showIcon: false } ); + return; + } + setAttributes( { showIcon: nextValue } ); + } function setButtonText( newText ) { const cleaned = stripHTML( newText ); @@ -67,6 +85,12 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
) : ( <> + + + + + +
- + { isIconVisible && ( + + ) } { const labels = JSON.parse( link.getAttribute( 'data-labels' ) ); const labelEl = link.querySelector( '.newspack-reader__account-link__label' ); if ( labelEl ) { + const isLoggedIn = link.getAttribute( 'data-wp-logged-in' ) === '1'; + if ( isLoggedIn ) { + labelEl.textContent = labels.signedin; + return; + } labelEl.textContent = reader?.authenticated ? labels.signedin : labels.signedout; // Set my account link href if the reader is authenticated. diff --git a/tests/unit-tests/class-test-my-account-button-block.php b/tests/unit-tests/class-test-my-account-button-block.php index 6eece748cc..030ffbedb4 100644 --- a/tests/unit-tests/class-test-my-account-button-block.php +++ b/tests/unit-tests/class-test-my-account-button-block.php @@ -96,16 +96,24 @@ public function test_render_block_signed_in() { } /** - * Test empty labels -- render nothing if a button's state has an empty label. + * Test empty signed-out label falls back to default. */ - public function test_render_block_empty_label() { + public function test_render_block_empty_signed_out_label() { self::$reader_activation_enabled = true; $signed_out_output = do_blocks( '' ); - $this->assertSame( '', trim( $signed_out_output ) ); + $this->assertNotEmpty( $signed_out_output ); + $this->assertStringContainsString( '"signedout":"Sign in"', $signed_out_output ); + } + + /** + * Test empty signed-in label falls back to default. + */ + public function test_render_block_empty_signed_in_label() { + self::$reader_activation_enabled = true; $user_id = self::factory()->user->create( [ @@ -118,7 +126,8 @@ public function test_render_block_empty_label() { '' ); - $this->assertSame( '', trim( $signed_in_output ) ); + $this->assertNotEmpty( $signed_in_output ); + $this->assertStringContainsString( '"signedin":"My Account"', $signed_in_output ); } /** From 9d9a68dd62d1f57df0c6ff7defa52c9aa0101a1e Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Mon, 2 Feb 2026 11:07:18 -0800 Subject: [PATCH 02/12] fix: remove unnecessary check --- .../my-account-button/class-my-account-button-block.php | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index 748bbc0a54..e1f35e5d85 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -107,10 +107,6 @@ public static function render_block( $attrs ) { $show_label = true; } - if ( '' === trim( (string) $label ) ) { - $label = $is_signed_in ? $default_attrs['signedInLabel'] : $default_attrs['signedOutLabel']; - } - $account_url = self::get_account_url(); /** Do not render link for authenticated readers if account page doesn't exist. */ From 84a9ef810953876f65c61fe97c4371785b97b321 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Mon, 2 Feb 2026 11:21:56 -0800 Subject: [PATCH 03/12] feat: add more test coverage for new settings --- .../class-test-my-account-button-block.php | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/tests/unit-tests/class-test-my-account-button-block.php b/tests/unit-tests/class-test-my-account-button-block.php index 030ffbedb4..786a4bd67f 100644 --- a/tests/unit-tests/class-test-my-account-button-block.php +++ b/tests/unit-tests/class-test-my-account-button-block.php @@ -109,6 +109,63 @@ public function test_render_block_empty_signed_out_label() { $this->assertStringContainsString( '"signedout":"Sign in"', $signed_out_output ); } + /** + * Test hidden label applies the screen-reader-text class. + */ + public function test_render_block_hidden_label_adds_screen_reader_text_class() { + self::$reader_activation_enabled = true; + + $output = do_blocks( + '' + ); + + $this->assertNotEmpty( $output ); + $this->assertStringContainsString( 'newspack-reader__account-link__label screen-reader-text', $output ); + } + + /** + * Test hidden icon removes the icon markup. + */ + public function test_render_block_hidden_icon_removes_icon_markup() { + self::$reader_activation_enabled = true; + + $output = do_blocks( + '' + ); + + $this->assertNotEmpty( $output ); + $this->assertStringNotContainsString( 'wp-block-newspack-my-account-button__icon', $output ); + } + + /** + * Test visible icon renders the icon markup. + */ + public function test_render_block_visible_icon_renders_icon_markup() { + self::$reader_activation_enabled = true; + + $output = do_blocks( + '' + ); + + $this->assertNotEmpty( $output ); + $this->assertStringContainsString( 'wp-block-newspack-my-account-button__icon', $output ); + } + + /** + * Test invalid combo (hide label + icon) still renders label and no icon. + */ + public function test_render_block_hide_label_and_icon_renders_label_only() { + self::$reader_activation_enabled = true; + + $output = do_blocks( + '' + ); + + $this->assertNotEmpty( $output ); + $this->assertStringContainsString( 'newspack-reader__account-link__label', $output ); + $this->assertStringNotContainsString( 'wp-block-newspack-my-account-button__icon', $output ); + } + /** * Test empty signed-in label falls back to default. */ From ced713a275b7e0c12c472e31c3e18b43b3057ec6 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Tue, 3 Feb 2026 13:55:47 +0000 Subject: [PATCH 04/12] fix(my-account-button): apply icon margin if no screen-reader-text --- src/blocks/my-account-button/style.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/blocks/my-account-button/style.scss b/src/blocks/my-account-button/style.scss index 5a9fa2b644..485c1474b8 100644 --- a/src/blocks/my-account-button/style.scss +++ b/src/blocks/my-account-button/style.scss @@ -2,13 +2,18 @@ &__icon { display: grid; place-items: center; + } + + svg { + fill: currentcolor; + height: max(24px, 1.5em); + width: max(24px, 1.5em); + } + &:not(:has(.screen-reader-text)) { svg { - fill: currentcolor; - height: max(24px, 1.5em); margin-left: calc( max(4px, 0.25em) * -1); margin-right: calc( max(4px, 0.25em) * -1); - width: max(24px, 1.5em); } } } From d315db9d57cfc77391b29967cd794ca74be37980 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Tue, 3 Feb 2026 14:15:52 +0000 Subject: [PATCH 05/12] feat: replace toggles with styles and classnames --- src/blocks/my-account-button/block.json | 10 +- .../class-my-account-button-block.php | 14 ++- src/blocks/my-account-button/edit.js | 100 ++++++++---------- src/blocks/my-account-button/index.js | 18 ++++ .../class-test-my-account-button-block.php | 26 ++--- webpack.config.js | 1 + 6 files changed, 91 insertions(+), 78 deletions(-) diff --git a/src/blocks/my-account-button/block.json b/src/blocks/my-account-button/block.json index f04027715f..1a0ecac5ac 100644 --- a/src/blocks/my-account-button/block.json +++ b/src/blocks/my-account-button/block.json @@ -21,13 +21,9 @@ "type": "string", "default": "Sign in" }, - "showLabel": { - "type": "boolean", - "default": true - }, - "showIcon": { - "type": "boolean", - "default": true + "className": { + "type": "string", + "default": "" } }, "supports": { diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index e1f35e5d85..7c518af247 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -93,6 +93,7 @@ public static function render_block( $attrs ) { $default_attrs = [ 'signedInLabel' => __( 'My Account', 'newspack-plugin' ), 'signedOutLabel' => __( 'Sign in', 'newspack-plugin' ), + 'className' => '', ]; $attrs = \wp_parse_args( $attrs, $default_attrs ); @@ -100,11 +101,18 @@ public static function render_block( $attrs ) { $signed_in_label = '' === trim( (string) $attrs['signedInLabel'] ) ? $default_attrs['signedInLabel'] : $attrs['signedInLabel']; $signed_out_label = '' === trim( (string) $attrs['signedOutLabel'] ) ? $default_attrs['signedOutLabel'] : $attrs['signedOutLabel']; $label = $is_signed_in ? $signed_in_label : $signed_out_label; - $show_label = isset( $attrs['showLabel'] ) ? (bool) $attrs['showLabel'] : true; - $show_icon = isset( $attrs['showIcon'] ) ? (bool) $attrs['showIcon'] : true; - if ( ! $show_label && ! $show_icon ) { + /** Display mode from block style class in className (default = icon + text). */ + $wrapper_class = (string) $attrs['className']; + if ( \strpos( $wrapper_class, 'is-style-icon-only' ) !== false ) { + $show_label = false; + $show_icon = true; + } elseif ( \strpos( $wrapper_class, 'is-style-text-only' ) !== false ) { $show_label = true; + $show_icon = false; + } else { + $show_label = true; + $show_icon = true; } $account_url = self::get_account_url(); diff --git a/src/blocks/my-account-button/edit.js b/src/blocks/my-account-button/edit.js index 3c95784d46..a4e6129054 100644 --- a/src/blocks/my-account-button/edit.js +++ b/src/blocks/my-account-button/edit.js @@ -14,7 +14,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { useState } from '@wordpress/element'; import { BlockControls, - InspectorControls, RichText, useBlockProps, /* eslint-disable @wordpress/no-unsafe-wp-apis */ @@ -23,20 +22,25 @@ import { __experimentalGetSpacingClassesAndStyles as useSpacingProps, /* eslint-enable @wordpress/no-unsafe-wp-apis */ } from '@wordpress/block-editor'; -import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components'; +import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; -/** - * Internal dependencies - */ -function MyAccountButtonEdit( { attributes, setAttributes } ) { - const { signedInLabel, signedOutLabel, showLabel, showIcon, style, className: customClassName } = attributes; +function MyAccountButtonEdit( { attributes, setAttributes, className: wrapperClassName } ) { + const { signedInLabel, signedOutLabel, style, className: blockClassName } = attributes; const borderProps = useBorderProps( attributes ); const colorProps = useColorProps( attributes ); const spacingProps = useSpacingProps( attributes ); - const isLabelVisible = showLabel !== false; - const isIconVisible = showIcon !== false; + + // Block style comes from the Styles panel (wrapper) or saved className. + const blockWrapperProps = useBlockProps(); + const className = blockWrapperProps?.className ?? wrapperClassName ?? blockClassName ?? ''; + const isIconOnly = className.includes( 'is-style-icon-only' ); + const isTextOnly = className.includes( 'is-style-text-only' ); + const isLabelVisible = ! isIconOnly; + const isIconVisible = ! isTextOnly; + const blockProps = useBlockProps( { className: classnames( + className, 'wp-block-button__link', 'newspack-reader__account-link', 'wp-block-newspack-my-account-button__link', @@ -54,62 +58,48 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) { ...spacingProps.style, }, } ); - const isReaderActivationEnabled = typeof newspack_blocks === 'undefined' || newspack_blocks.has_reader_activation; + const isReaderActivationEnabled = typeof newspack_blocks === 'undefined' || newspack_blocks.has_reader_activation; const [ previewState, setPreviewState ] = useState( 'signedout' ); const isSignedOutPreview = previewState === 'signedout'; const activeLabel = isSignedOutPreview ? signedOutLabel : signedInLabel; const placeholderText = isSignedOutPreview ? __( 'Sign in', 'newspack-plugin' ) : __( 'My Account', 'newspack-plugin' ); - function setShowLabel( nextValue ) { - if ( ! nextValue && ! isIconVisible ) { - setAttributes( { showLabel: false, showIcon: true } ); - return; - } - setAttributes( { showLabel: nextValue } ); - } - function setShowIcon( nextValue ) { - if ( ! nextValue && ! isLabelVisible ) { - setAttributes( { showLabel: true, showIcon: false } ); - return; - } - setAttributes( { showIcon: nextValue } ); + function setButtonText( newText ) { + setAttributes( isSignedOutPreview ? { signedOutLabel: stripHTML( newText ) } : { signedInLabel: stripHTML( newText ) } ); } - function setButtonText( newText ) { - const cleaned = stripHTML( newText ); - setAttributes( isSignedOutPreview ? { signedOutLabel: cleaned } : { signedInLabel: cleaned } ); + if ( ! isReaderActivationEnabled ) { + return
; } - return ! isReaderActivationEnabled ? ( -
- ) : ( + return ( <> - - - - - - - - - setPreviewState( 'signedout' ) } - style={ { paddingLeft: '12px', paddingRight: '12px' } } - > - { __( 'Signed out', 'newspack-plugin' ) } - - setPreviewState( 'signedin' ) } - style={ { paddingLeft: '12px', paddingRight: '12px' } } - > - { __( 'Signed in', 'newspack-plugin' ) } - - - -
+ { isLabelVisible && ( + + + setPreviewState( 'signedout' ) } + style={ { paddingLeft: '12px', paddingRight: '12px' } } + > + { __( 'Signed out', 'newspack-plugin' ) } + + setPreviewState( 'signedin' ) } + style={ { paddingLeft: '12px', paddingRight: '12px' } } + > + { __( 'Signed in', 'newspack-plugin' ) } + + + + ) } +
{ isIconVisible && ( @@ -123,7 +113,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) { aria-label={ __( 'Button text', 'newspack-plugin' ) } placeholder={ placeholderText } value={ activeLabel || '' } - onChange={ value => setButtonText( value ) } + onChange={ setButtonText } withoutInteractiveFormatting />
diff --git a/src/blocks/my-account-button/index.js b/src/blocks/my-account-button/index.js index ac415011d3..c8bd03462b 100644 --- a/src/blocks/my-account-button/index.js +++ b/src/blocks/my-account-button/index.js @@ -9,12 +9,30 @@ import './style.scss'; /** * WordPress dependencies */ +import { registerBlockStyle } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; import { button as icon } from '@wordpress/icons'; const { name } = metadata; export { metadata, name }; +registerBlockStyle( name, { + name: 'default', + label: __( 'Default', 'newspack-plugin' ), + isDefault: true, +} ); + +registerBlockStyle( name, { + name: 'icon-only', + label: __( 'Icon only', 'newspack-plugin' ), +} ); + +registerBlockStyle( name, { + name: 'text-only', + label: __( 'Text only', 'newspack-plugin' ), +} ); + export const settings = { title: metadata.title, icon: { diff --git a/tests/unit-tests/class-test-my-account-button-block.php b/tests/unit-tests/class-test-my-account-button-block.php index 786a4bd67f..a3fff2e41a 100644 --- a/tests/unit-tests/class-test-my-account-button-block.php +++ b/tests/unit-tests/class-test-my-account-button-block.php @@ -110,13 +110,13 @@ public function test_render_block_empty_signed_out_label() { } /** - * Test hidden label applies the screen-reader-text class. + * Test icon-only style applies the screen-reader-text class to the label. */ - public function test_render_block_hidden_label_adds_screen_reader_text_class() { + public function test_render_block_icon_only_style_adds_screen_reader_text_class() { self::$reader_activation_enabled = true; $output = do_blocks( - '' + '' ); $this->assertNotEmpty( $output ); @@ -124,13 +124,13 @@ public function test_render_block_hidden_label_adds_screen_reader_text_class() { } /** - * Test hidden icon removes the icon markup. + * Test text-only style removes the icon markup. */ - public function test_render_block_hidden_icon_removes_icon_markup() { + public function test_render_block_text_only_style_removes_icon_markup() { self::$reader_activation_enabled = true; $output = do_blocks( - '' + '' ); $this->assertNotEmpty( $output ); @@ -138,13 +138,13 @@ public function test_render_block_hidden_icon_removes_icon_markup() { } /** - * Test visible icon renders the icon markup. + * Test default style renders the icon markup. */ - public function test_render_block_visible_icon_renders_icon_markup() { + public function test_render_block_default_style_renders_icon_markup() { self::$reader_activation_enabled = true; $output = do_blocks( - '' + '' ); $this->assertNotEmpty( $output ); @@ -152,18 +152,18 @@ public function test_render_block_visible_icon_renders_icon_markup() { } /** - * Test invalid combo (hide label + icon) still renders label and no icon. + * Test default style (no className) renders both label and icon. */ - public function test_render_block_hide_label_and_icon_renders_label_only() { + public function test_render_block_default_style_renders_label_and_icon() { self::$reader_activation_enabled = true; $output = do_blocks( - '' + '' ); $this->assertNotEmpty( $output ); $this->assertStringContainsString( 'newspack-reader__account-link__label', $output ); - $this->assertStringNotContainsString( 'wp-block-newspack-my-account-button__icon', $output ); + $this->assertStringContainsString( 'wp-block-newspack-my-account-button__icon', $output ); } /** diff --git a/webpack.config.js b/webpack.config.js index ebf5e89673..7d6f9bf642 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -49,6 +49,7 @@ const entry = { 'content-gate-countdown-box-block': path.join( __dirname, 'src', 'blocks', 'content-gate', 'countdown-box', 'index.js' ), 'contribution-meter-block': path.join( __dirname, 'src', 'blocks', 'contribution-meter', 'index.js' ), 'avatar-block': path.join( __dirname, 'src', 'blocks', 'avatar', 'index.js' ), + 'my-account-button-block': path.join( __dirname, 'src', 'blocks', 'my-account-button', 'index.js' ), 'my-account': path.join( __dirname, 'src', 'my-account', 'index.js' ), 'my-account-v0': path.join( __dirname, 'src', 'my-account', 'v0', 'index.js' ), 'my-account-v1': path.join( __dirname, 'src', 'my-account', 'v1', 'index.js' ), From 9fed074727322a14d9e8440c9431537bcd116843 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Tue, 10 Feb 2026 20:26:03 +0000 Subject: [PATCH 06/12] chore: update inline comments --- .../class-my-account-button-block.php | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index 7c518af247..4424effded 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -102,7 +102,7 @@ public static function render_block( $attrs ) { $signed_out_label = '' === trim( (string) $attrs['signedOutLabel'] ) ? $default_attrs['signedOutLabel'] : $attrs['signedOutLabel']; $label = $is_signed_in ? $signed_in_label : $signed_out_label; - /** Display mode from block style class in className (default = icon + text). */ + // Display mode from block style class in className (default = icon + text). $wrapper_class = (string) $attrs['className']; if ( \strpos( $wrapper_class, 'is-style-icon-only' ) !== false ) { $show_label = false; @@ -117,7 +117,7 @@ public static function render_block( $attrs ) { $account_url = self::get_account_url(); - /** Do not render link for authenticated readers if account page doesn't exist. */ + // Do not render link for authenticated readers if account page doesn't exist. if ( empty( $account_url ) && \is_user_logged_in() ) { return ''; } @@ -141,26 +141,25 @@ public static function render_block( $attrs ) { 'newspack-reader__account-link', ]; - /** Get default wrapper attributes to extract custom classes */ + // Get default wrapper attributes to extract custom classes. $default_wrapper_attributes = \get_block_wrapper_attributes(); - /** Extract custom classes (everything except the default block class) */ - $default_block_class = 'wp-block-newspack-my-account-button'; - $custom_classes = []; + // Extract custom classes (everything except the default block class). + $custom_classes = []; - /** Parse class attribute from default wrapper */ + // Parse class attribute from default wrapper. if ( \preg_match( '/class=["\']([^"\']+)["\']/', $default_wrapper_attributes, $matches ) ) { $all_classes = \explode( ' ', $matches[1] ); foreach ( $all_classes as $class ) { $class = \trim( $class ); - /** Only include classes that contain "-size" (e.g., has-small-size) */ + // Only include classes that contain "-size" (e.g., has-small-size). if ( ! empty( $class ) && \strpos( $class, '-size' ) !== false ) { $custom_classes[] = $class; } } } - /** Build wrapper div classes */ + // Build wrapper div classes. $wrapper_div_classes = [ 'wp-block-buttons' ]; if ( ! empty( $custom_classes ) ) { $wrapper_div_classes = \array_merge( $wrapper_div_classes, $custom_classes ); From 05812420815307af49d213a4773694e79da3f681 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Tue, 10 Feb 2026 20:33:24 +0000 Subject: [PATCH 07/12] fix: use blockClassName in favour of useBlockProps --- src/blocks/my-account-button/edit.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/blocks/my-account-button/edit.js b/src/blocks/my-account-button/edit.js index a4e6129054..ff21af2c01 100644 --- a/src/blocks/my-account-button/edit.js +++ b/src/blocks/my-account-button/edit.js @@ -24,23 +24,19 @@ import { } from '@wordpress/block-editor'; import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; -function MyAccountButtonEdit( { attributes, setAttributes, className: wrapperClassName } ) { +function MyAccountButtonEdit( { attributes, setAttributes } ) { const { signedInLabel, signedOutLabel, style, className: blockClassName } = attributes; const borderProps = useBorderProps( attributes ); const colorProps = useColorProps( attributes ); const spacingProps = useSpacingProps( attributes ); - - // Block style comes from the Styles panel (wrapper) or saved className. - const blockWrapperProps = useBlockProps(); - const className = blockWrapperProps?.className ?? wrapperClassName ?? blockClassName ?? ''; - const isIconOnly = className.includes( 'is-style-icon-only' ); - const isTextOnly = className.includes( 'is-style-text-only' ); + const isIconOnly = ( blockClassName || '' ).includes( 'is-style-icon-only' ); + const isTextOnly = ( blockClassName || '' ).includes( 'is-style-text-only' ); const isLabelVisible = ! isIconOnly; const isIconVisible = ! isTextOnly; const blockProps = useBlockProps( { className: classnames( - className, + blockClassName, 'wp-block-button__link', 'newspack-reader__account-link', 'wp-block-newspack-my-account-button__link', From 81ee30dae7ae3a8c3959733a479026e7fdc18ad0 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 10 Feb 2026 14:45:45 -0800 Subject: [PATCH 08/12] fix: update attribute used for the My Account button block logged in --- .../my-account-button/class-my-account-button-block.php | 6 +++--- src/reader-activation-auth/index.js | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index 4424effded..ff5c4f21b3 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -166,9 +166,9 @@ public static function render_block( $attrs ) { } $wrapper_attribute_args = [ - 'class' => implode( ' ', $extra_classes ), - 'href' => \esc_url_raw( $href ), - 'data-wp-logged-in' => $is_signed_in ? '1' : '0', + 'class' => implode( ' ', $extra_classes ), + 'href' => \esc_url_raw( $href ), + 'data-newspack-logged-in' => $is_signed_in ? '1' : '0', ]; $wrapper_attributes = \get_block_wrapper_attributes( $wrapper_attribute_args ); diff --git a/src/reader-activation-auth/index.js b/src/reader-activation-auth/index.js index 280552c77b..3142e86add 100644 --- a/src/reader-activation-auth/index.js +++ b/src/reader-activation-auth/index.js @@ -103,7 +103,8 @@ window.newspackRAS.push( readerActivation => { const labels = JSON.parse( link.getAttribute( 'data-labels' ) ); const labelEl = link.querySelector( '.newspack-reader__account-link__label' ); if ( labelEl ) { - const isLoggedIn = link.getAttribute( 'data-wp-logged-in' ) === '1'; + // Change the label for the My Account button only. + const isLoggedIn = link.getAttribute( 'data-newspack-logged-in' ) === '1'; if ( isLoggedIn ) { labelEl.textContent = labels.signedin; return; From a49f0e01e6800c916676d3bde4477d1cdd08993a Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 10 Feb 2026 14:53:17 -0800 Subject: [PATCH 09/12] fix: improve classname checks --- .../my-account-button/class-my-account-button-block.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index ff5c4f21b3..3719850402 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -103,11 +103,11 @@ public static function render_block( $attrs ) { $label = $is_signed_in ? $signed_in_label : $signed_out_label; // Display mode from block style class in className (default = icon + text). - $wrapper_class = (string) $attrs['className']; - if ( \strpos( $wrapper_class, 'is-style-icon-only' ) !== false ) { + $classes = explode( ' ', (string) $attrs['className'] ); + if ( in_array( 'is-style-icon-only', $classes, true ) ) { $show_label = false; $show_icon = true; - } elseif ( \strpos( $wrapper_class, 'is-style-text-only' ) !== false ) { + } elseif ( in_array( 'is-style-text-only', $classes, true ) ) { $show_label = true; $show_icon = false; } else { From cf6879355928f85588121d6066c2ca2b95d808ff Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 10 Feb 2026 14:57:39 -0800 Subject: [PATCH 10/12] fix: update readme with label editing behaviour --- src/blocks/my-account-button/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/blocks/my-account-button/README.md b/src/blocks/my-account-button/README.md index cc4462cac7..df303d6b9d 100644 --- a/src/blocks/my-account-button/README.md +++ b/src/blocks/my-account-button/README.md @@ -5,7 +5,11 @@ Provides a reader account/sign-in button for sites using Newspack Reader Activat ## Settings - Signed in label (`signedInLabel`): Text shown when the reader is authenticated. - Signed out label (`signedOutLabel`): Text shown when the reader is not authenticated. -- Display: ability to toggle on/off the display of the button's icon or text label. Note: you cannot toggle off both the icon and label at the same time. + +### Display +The button also has the ability to toggle on/off the display of the icon or text label. You cannot toggle off both the icon and label at the same time. + +When only the icon is visible, screenreaders will still be able to read the label, even if it's not visible. If this hidden label needs to be edited, it will need to be toggled back on in the editor, changed, and then hidden again. ## Editor behavior - Use the toolbar toggle (Signed in / Signed out) to edit each label. From 86d6e24551a7aed46ca8d9824cdf2f8e6255fb4f Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Wed, 11 Feb 2026 13:45:48 +0000 Subject: [PATCH 11/12] fix: editor alignment --- .../my-account-button/class-my-account-button-block.php | 2 +- src/blocks/my-account-button/edit.js | 2 +- src/blocks/my-account-button/style.scss | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/blocks/my-account-button/class-my-account-button-block.php b/src/blocks/my-account-button/class-my-account-button-block.php index 3719850402..766fd7a87e 100644 --- a/src/blocks/my-account-button/class-my-account-button-block.php +++ b/src/blocks/my-account-button/class-my-account-button-block.php @@ -160,7 +160,7 @@ public static function render_block( $attrs ) { } // Build wrapper div classes. - $wrapper_div_classes = [ 'wp-block-buttons' ]; + $wrapper_div_classes = [ 'wp-block-buttons', 'is-layout-flex' ]; if ( ! empty( $custom_classes ) ) { $wrapper_div_classes = \array_merge( $wrapper_div_classes, $custom_classes ); } diff --git a/src/blocks/my-account-button/edit.js b/src/blocks/my-account-button/edit.js index ff21af2c01..8579bf6b94 100644 --- a/src/blocks/my-account-button/edit.js +++ b/src/blocks/my-account-button/edit.js @@ -95,7 +95,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) { ) } -
+
{ isIconVisible && ( diff --git a/src/blocks/my-account-button/style.scss b/src/blocks/my-account-button/style.scss index 485c1474b8..789de292f3 100644 --- a/src/blocks/my-account-button/style.scss +++ b/src/blocks/my-account-button/style.scss @@ -16,4 +16,8 @@ margin-right: calc( max(4px, 0.25em) * -1); } } + + .wp-block-buttons > .wp-block-button:has(&) { + display: inline-flex; + } } From b47c2a2c9cd71bc76922534ed696e4bbf0c2ea6a Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Wed, 11 Feb 2026 13:52:17 -0800 Subject: [PATCH 12/12] fix: harden icon/text-only class name checks --- src/blocks/my-account-button/edit.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/blocks/my-account-button/edit.js b/src/blocks/my-account-button/edit.js index 8579bf6b94..edede478d1 100644 --- a/src/blocks/my-account-button/edit.js +++ b/src/blocks/my-account-button/edit.js @@ -29,8 +29,9 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) { const borderProps = useBorderProps( attributes ); const colorProps = useColorProps( attributes ); const spacingProps = useSpacingProps( attributes ); - const isIconOnly = ( blockClassName || '' ).includes( 'is-style-icon-only' ); - const isTextOnly = ( blockClassName || '' ).includes( 'is-style-text-only' ); + const classes = ( blockClassName || '' ).split( ' ' ); + const isIconOnly = classes.includes( 'is-style-icon-only' ); + const isTextOnly = classes.includes( 'is-style-text-only' ); const isLabelVisible = ! isIconOnly; const isIconVisible = ! isTextOnly;