feat[my-account-block]: add option to toggle off icon/text, and update tests

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.

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": {

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 = '<div class="' . \esc_attr( implode( ' ', $wrapper_div_classes ) ) . '">';
 		$link .= '<div class="wp-block-button">';
 		$link .= '<a ' . $wrapper_attributes . ' data-labels="' . \esc_attr( \wp_json_encode( $labels ) ) . '" ' . $should_modal_trigger . '>';
-		$link .= '<span class="wp-block-newspack-my-account-button__icon" aria-hidden="true">';
-		$link .= Newspack_UI_Icons::get_svg( 'account' );
-		$link .= '</span>';
-		$link .= '<span class="newspack-reader__account-link__label">' . \esc_html( $label ) . '</span>';
+		if ( $show_icon ) {
+			$link .= '<span class="wp-block-newspack-my-account-button__icon" aria-hidden="true">';
+			$link .= Newspack_UI_Icons::get_svg( 'account' );
+			$link .= '</span>';
+		}
+		$label_classes = [ 'newspack-reader__account-link__label' ];
+		if ( ! $show_label ) {
+			$label_classes[] = 'screen-reader-text';
+		}
+		$link .= '<span class="' . \esc_attr( implode( ' ', $label_classes ) ) . '">' . \esc_html( $label ) . '</span>';
 		$link .= '</a>';
 		$link .= '</div>';
 		$link .= '</div>';

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 } ) {
 		<div { ...blockProps } style={ { ...blockProps.style, display: 'none' } } />
 	) : (
 		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Display', 'newspack-plugin' ) }>
+					<ToggleControl label={ __( 'Show label', 'newspack-plugin' ) } checked={ isLabelVisible } onChange={ setShowLabel } />
+					<ToggleControl label={ __( 'Show icon', 'newspack-plugin' ) } checked={ isIconVisible } onChange={ setShowIcon } />
+				</PanelBody>
+			</InspectorControls>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -88,11 +112,14 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
 			<div className={ classnames( 'wp-block-buttons', customClassName ) }>
 				<div className="wp-block-button">
 					<div { ...blockProps }>
-						<span className="wp-block-newspack-my-account-button__icon" aria-hidden="true">
-							{ icon }
-						</span>
+						{ isIconVisible && (
+							<span className="wp-block-newspack-my-account-button__icon" aria-hidden="true">
+								{ icon }
+							</span>
+						) }
 						<RichText
 							tagName="span"
+							className={ ! isLabelVisible ? 'screen-reader-text' : undefined }
 							aria-label={ __( 'Button text', 'newspack-plugin' ) }
 							placeholder={ placeholderText }
 							value={ activeLabel || '' }

src/reader-activation-auth/index.js

@@ -103,6 +103,11 @@ 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';
+						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.

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(
 			'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":""} /-->'
 		);
 
-		$this->assertSame( '', trim( $signed_out_output ) );
+		$this->assertNotEmpty( $signed_out_output );
+		$this->assertStringContainsString( '&quot;signedout&quot;:&quot;Sign in&quot;', $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() {
 			'<!-- wp:newspack/my-account-button {"signedInLabel":"","signedOutLabel":"Sign in"} /-->'
 		);
 
-		$this->assertSame( '', trim( $signed_in_output ) );
+		$this->assertNotEmpty( $signed_in_output );
+		$this->assertStringContainsString( '&quot;signedin&quot;:&quot;My Account&quot;', $signed_in_output );
 	}
 
 	/**