Skip to content

Commit 8d2f75a

Browse files
thomasguillotthomasguillot
committed
feat: use classname
1 parent 0a18d63 commit 8d2f75a

4 files changed

Lines changed: 40 additions & 70 deletions

File tree

‎src/blocks/my-account-button/block.json‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,9 @@
2121
"type": "string",
2222
"default": "Sign in"
2323
},
24-
"showLabel": {
25-
"default": true,
26-
"description": "Whether to show the button text. With showIcon, controls display mode: default (icon + text), icon only, or text only.",
27-
"type": "boolean"
28-
},
29-
"showIcon": {
30-
"default": true,
31-
"description": "Whether to show the account icon. With showLabel, controls display mode: default (icon + text), icon only, or text only.",
32-
"type": "boolean"
24+
"className": {
25+
"type": "string",
26+
"default": ""
3327
}
3428
},
3529
"supports": {

‎src/blocks/my-account-button/class-my-account-button-block.php‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,21 +93,26 @@ public static function render_block( $attrs ) {
9393
$default_attrs = [
9494
'signedInLabel' => __( 'My Account', 'newspack-plugin' ),
9595
'signedOutLabel' => __( 'Sign in', 'newspack-plugin' ),
96-
'showLabel' => true,
97-
'showIcon' => true,
96+
'className' => '',
9897
];
9998
$attrs = \wp_parse_args( $attrs, $default_attrs );
10099

101100
$is_signed_in = \is_user_logged_in();
102101
$signed_in_label = '' === trim( (string) $attrs['signedInLabel'] ) ? $default_attrs['signedInLabel'] : $attrs['signedInLabel'];
103102
$signed_out_label = '' === trim( (string) $attrs['signedOutLabel'] ) ? $default_attrs['signedOutLabel'] : $attrs['signedOutLabel'];
104103
$label = $is_signed_in ? $signed_in_label : $signed_out_label;
105-
$show_label = (bool) $attrs['showLabel'];
106-
$show_icon = (bool) $attrs['showIcon'];
107104

108-
/** Ensure at least one of label or icon is shown (default: icon + text). */
109-
if ( ! $show_label && ! $show_icon ) {
105+
/** Display mode from block style class in className (default = icon + text). */
106+
$wrapper_class = (string) $attrs['className'];
107+
if ( \strpos( $wrapper_class, 'is-style-icon-only' ) !== false ) {
108+
$show_label = false;
109+
$show_icon = true;
110+
} elseif ( \strpos( $wrapper_class, 'is-style-text-only' ) !== false ) {
110111
$show_label = true;
112+
$show_icon = false;
113+
} else {
114+
$show_label = true;
115+
$show_icon = true;
111116
}
112117

113118
$account_url = self::get_account_url();

‎src/blocks/my-account-button/edit.js‎

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { account as icon } from '../../../packages/icons';
1111
import { __ } from '@wordpress/i18n';
1212
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
1313
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
14-
import { useEffect, useState } from '@wordpress/element';
14+
import { useState } from '@wordpress/element';
1515
import {
1616
BlockControls,
1717
RichText,
@@ -24,52 +24,23 @@ import {
2424
} from '@wordpress/block-editor';
2525
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
2626

27-
const styleToMode = [
28-
[ 'is-style-icon-only', 'icon' ],
29-
[ 'is-style-text-only', 'text' ],
30-
[ 'is-style-default', 'default' ],
31-
];
32-
33-
const modeToAttrs = {
34-
icon: { showIcon: true, showLabel: false },
35-
text: { showIcon: false, showLabel: true },
36-
default: { showIcon: true, showLabel: true },
37-
};
38-
39-
function MyAccountButtonEdit( { attributes, setAttributes } ) {
40-
const { signedInLabel, signedOutLabel, showLabel, showIcon, style, className: customClassName } = attributes;
27+
function MyAccountButtonEdit( { attributes, setAttributes, className: wrapperClassName } ) {
28+
const { signedInLabel, signedOutLabel, style, className: blockClassName } = attributes;
4129
const borderProps = useBorderProps( attributes );
4230
const colorProps = useColorProps( attributes );
4331
const spacingProps = useSpacingProps( attributes );
4432

45-
// useBlockProps() returns the wrapper's className (includes block style); we use it to read the style and merge into the link.
46-
const wrapperProps = useBlockProps();
47-
const wrapperClassName = wrapperProps?.className ?? '';
48-
// When no block style is selected there is no is-style-* class; fall back to attributes for display.
49-
const displayModeFromStyle = styleToMode.find( ( [ cls ] ) => wrapperClassName?.includes( cls ) )?.[ 1 ] ?? null;
50-
let displayModeFromAttrs = 'default';
51-
if ( showIcon && ! showLabel ) {
52-
displayModeFromAttrs = 'icon';
53-
} else if ( ! showIcon && showLabel ) {
54-
displayModeFromAttrs = 'text';
55-
}
56-
const displayMode = displayModeFromStyle ?? displayModeFromAttrs;
57-
const isLabelVisible = displayMode !== 'icon';
58-
const isIconVisible = displayMode !== 'text';
59-
60-
useEffect( () => {
61-
if ( displayModeFromStyle === null ) {
62-
return;
63-
}
64-
const next = modeToAttrs[ displayModeFromStyle ];
65-
if ( attributes.showIcon !== next.showIcon || attributes.showLabel !== next.showLabel ) {
66-
setAttributes( next );
67-
}
68-
}, [ displayModeFromStyle, attributes.showIcon, attributes.showLabel, setAttributes ] );
33+
// Block style comes from the Styles panel (wrapper) or saved className.
34+
const blockWrapperProps = useBlockProps();
35+
const className = blockWrapperProps?.className ?? wrapperClassName ?? blockClassName ?? '';
36+
const isIconOnly = className.includes( 'is-style-icon-only' );
37+
const isTextOnly = className.includes( 'is-style-text-only' );
38+
const isLabelVisible = ! isIconOnly;
39+
const isIconVisible = ! isTextOnly;
6940

7041
const blockProps = useBlockProps( {
7142
className: classnames(
72-
wrapperClassName,
43+
className,
7344
'wp-block-button__link',
7445
'newspack-reader__account-link',
7546
'wp-block-newspack-my-account-button__link',
@@ -104,7 +75,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
10475

10576
return (
10677
<>
107-
{ displayMode !== 'icon' && (
78+
{ isLabelVisible && (
10879
<BlockControls>
10980
<ToolbarGroup>
11081
<ToolbarButton
@@ -128,7 +99,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
12899
</ToolbarGroup>
129100
</BlockControls>
130101
) }
131-
<div className={ classnames( 'wp-block-buttons', customClassName ) }>
102+
<div className={ classnames( 'wp-block-buttons', blockClassName ) }>
132103
<div className="wp-block-button">
133104
<div { ...blockProps }>
134105
{ isIconVisible && (

‎tests/unit-tests/class-test-my-account-button-block.php‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -110,60 +110,60 @@ public function test_render_block_empty_signed_out_label() {
110110
}
111111

112112
/**
113-
* Test hidden label applies the screen-reader-text class.
113+
* Test icon-only style applies the screen-reader-text class to the label.
114114
*/
115-
public function test_render_block_hidden_label_adds_screen_reader_text_class() {
115+
public function test_render_block_icon_only_style_adds_screen_reader_text_class() {
116116
self::$reader_activation_enabled = true;
117117

118118
$output = do_blocks(
119-
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in","showLabel":false} /-->'
119+
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in","className":"is-style-icon-only"} /-->'
120120
);
121121

122122
$this->assertNotEmpty( $output );
123123
$this->assertStringContainsString( 'newspack-reader__account-link__label screen-reader-text', $output );
124124
}
125125

126126
/**
127-
* Test hidden icon removes the icon markup.
127+
* Test text-only style removes the icon markup.
128128
*/
129-
public function test_render_block_hidden_icon_removes_icon_markup() {
129+
public function test_render_block_text_only_style_removes_icon_markup() {
130130
self::$reader_activation_enabled = true;
131131

132132
$output = do_blocks(
133-
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in","showIcon":false} /-->'
133+
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in","className":"is-style-text-only"} /-->'
134134
);
135135

136136
$this->assertNotEmpty( $output );
137137
$this->assertStringNotContainsString( 'wp-block-newspack-my-account-button__icon', $output );
138138
}
139139

140140
/**
141-
* Test visible icon renders the icon markup.
141+
* Test default style renders the icon markup.
142142
*/
143-
public function test_render_block_visible_icon_renders_icon_markup() {
143+
public function test_render_block_default_style_renders_icon_markup() {
144144
self::$reader_activation_enabled = true;
145145

146146
$output = do_blocks(
147-
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in","showIcon":true} /-->'
147+
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in"} /-->'
148148
);
149149

150150
$this->assertNotEmpty( $output );
151151
$this->assertStringContainsString( 'wp-block-newspack-my-account-button__icon', $output );
152152
}
153153

154154
/**
155-
* Test invalid combo (hide label + icon) still renders label and no icon.
155+
* Test default style (no className) renders both label and icon.
156156
*/
157-
public function test_render_block_hide_label_and_icon_renders_label_only() {
157+
public function test_render_block_default_style_renders_label_and_icon() {
158158
self::$reader_activation_enabled = true;
159159

160160
$output = do_blocks(
161-
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in","showLabel":false,"showIcon":false} /-->'
161+
'<!-- wp:newspack/my-account-button {"signedInLabel":"My Account","signedOutLabel":"Sign in"} /-->'
162162
);
163163

164164
$this->assertNotEmpty( $output );
165165
$this->assertStringContainsString( 'newspack-reader__account-link__label', $output );
166-
$this->assertStringNotContainsString( 'wp-block-newspack-my-account-button__icon', $output );
166+
$this->assertStringContainsString( 'wp-block-newspack-my-account-button__icon', $output );
167167
}
168168

169169
/**

0 commit comments

Comments
 (0)