-
- { icon }
-
+ { isIconVisible && (
+
+ { icon }
+
+ ) }
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/src/blocks/my-account-button/style.scss b/src/blocks/my-account-button/style.scss
index 5a9fa2b644..789de292f3 100644
--- a/src/blocks/my-account-button/style.scss
+++ b/src/blocks/my-account-button/style.scss
@@ -2,13 +2,22 @@
&__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);
}
}
+
+ .wp-block-buttons > .wp-block-button:has(&) {
+ display: inline-flex;
+ }
}
diff --git a/src/reader-activation-auth/index.js b/src/reader-activation-auth/index.js
index 9a159f3584..3142e86add 100644
--- a/src/reader-activation-auth/index.js
+++ b/src/reader-activation-auth/index.js
@@ -103,6 +103,12 @@ window.newspackRAS.push( readerActivation => {
const labels = JSON.parse( link.getAttribute( 'data-labels' ) );
const labelEl = link.querySelector( '.newspack-reader__account-link__label' );
if ( labelEl ) {
+ // 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;
+ }
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..a3fff2e41a 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,81 @@ 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 icon-only style applies the screen-reader-text class to the label.
+ */
+ public function test_render_block_icon_only_style_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 text-only style removes the icon markup.
+ */
+ public function test_render_block_text_only_style_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 default style renders the icon markup.
+ */
+ public function test_render_block_default_style_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 default style (no className) renders both label and icon.
+ */
+ 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->assertStringContainsString( 'wp-block-newspack-my-account-button__icon', $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 +183,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 );
}
/**
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' ),