Skip to content

Commit 666a61a

Browse files
thomasguillotthomasguillot
committed
feat: rework this as styles and classname
1 parent 443a47a commit 666a61a

File tree

6 files changed

+88
-113
lines changed

6 files changed

+88
-113
lines changed

‎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: 42 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
1414
import { useState } from '@wordpress/element';
1515
import {
1616
BlockControls,
17-
InspectorControls,
1817
RichText,
1918
useBlockProps,
2019
/* eslint-disable @wordpress/no-unsafe-wp-apis */
@@ -23,45 +22,25 @@ import {
2322
__experimentalGetSpacingClassesAndStyles as useSpacingProps,
2423
/* eslint-enable @wordpress/no-unsafe-wp-apis */
2524
} from '@wordpress/block-editor';
26-
import {
27-
PanelBody,
28-
ToolbarButton,
29-
ToolbarGroup,
30-
/* eslint-disable @wordpress/no-unsafe-wp-apis */
31-
__experimentalToggleGroupControl as ToggleGroupControl,
32-
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
33-
/* eslint-enable @wordpress/no-unsafe-wp-apis */
34-
} from '@wordpress/components';
25+
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
3526

36-
/**
37-
* Internal dependencies
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 );
44-
const isLabelVisible = showLabel !== false;
45-
const isIconVisible = showIcon !== false;
46-
47-
const displayMode = ( () => {
48-
if ( isIconVisible && ! isLabelVisible ) {
49-
return 'icon';
50-
}
51-
if ( ! isIconVisible && isLabelVisible ) {
52-
return 'text';
53-
}
54-
return 'default';
55-
} )();
5632

57-
const displayModeHelp = {
58-
default: __( 'Displays the icon with text.', 'newspack-plugin' ),
59-
icon: __( 'Displays the icon without text.', 'newspack-plugin' ),
60-
text: __( 'Displays the text without an icon.', 'newspack-plugin' ),
61-
};
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;
6240

6341
const blockProps = useBlockProps( {
6442
className: classnames(
43+
className,
6544
'wp-block-button__link',
6645
'newspack-reader__account-link',
6746
'wp-block-newspack-my-account-button__link',
@@ -86,63 +65,41 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
8665
const activeLabel = isSignedOutPreview ? signedOutLabel : signedInLabel;
8766
const placeholderText = isSignedOutPreview ? __( 'Sign in', 'newspack-plugin' ) : __( 'My Account', 'newspack-plugin' );
8867

89-
function setDisplayMode( value ) {
90-
switch ( value ) {
91-
case 'icon':
92-
setAttributes( { showIcon: true, showLabel: false } );
93-
break;
94-
case 'text':
95-
setAttributes( { showIcon: false, showLabel: true } );
96-
break;
97-
default:
98-
setAttributes( { showIcon: true, showLabel: true } );
99-
}
68+
function setButtonText( newText ) {
69+
setAttributes( isSignedOutPreview ? { signedOutLabel: stripHTML( newText ) } : { signedInLabel: stripHTML( newText ) } );
10070
}
10171

102-
function setButtonText( newText ) {
103-
const cleaned = stripHTML( newText );
104-
setAttributes( isSignedOutPreview ? { signedOutLabel: cleaned } : { signedInLabel: cleaned } );
72+
if ( ! isReaderActivationEnabled ) {
73+
return <div { ...blockProps } style={ { ...blockProps.style, display: 'none' } } />;
10574
}
10675

107-
return ! isReaderActivationEnabled ? (
108-
<div { ...blockProps } style={ { ...blockProps.style, display: 'none' } } />
109-
) : (
76+
return (
11077
<>
111-
<InspectorControls>
112-
<PanelBody title={ __( 'Display', 'newspack-plugin' ) }>
113-
<ToggleGroupControl
114-
help={ displayModeHelp[ displayMode ] }
115-
isBlock
116-
aria-label={ __( 'Button display mode', 'newspack-plugin' ) }
117-
onChange={ setDisplayMode }
118-
value={ displayMode }
119-
__next40pxDefaultSize
120-
>
121-
<ToggleGroupControlOption label={ __( 'Default', 'newspack-plugin' ) } value="default" />
122-
<ToggleGroupControlOption label={ __( 'Icon only', 'newspack-plugin' ) } value="icon" />
123-
<ToggleGroupControlOption label={ __( 'Text only', 'newspack-plugin' ) } value="text" />
124-
</ToggleGroupControl>
125-
</PanelBody>
126-
</InspectorControls>
127-
<BlockControls>
128-
<ToolbarGroup>
129-
<ToolbarButton
130-
isPressed={ isSignedOutPreview }
131-
onClick={ () => setPreviewState( 'signedout' ) }
132-
style={ { paddingLeft: '12px', paddingRight: '12px' } }
133-
>
134-
{ __( 'Signed out', 'newspack-plugin' ) }
135-
</ToolbarButton>
136-
<ToolbarButton
137-
isPressed={ ! isSignedOutPreview }
138-
onClick={ () => setPreviewState( 'signedin' ) }
139-
style={ { paddingLeft: '12px', paddingRight: '12px' } }
140-
>
141-
{ __( 'Signed in', 'newspack-plugin' ) }
142-
</ToolbarButton>
143-
</ToolbarGroup>
144-
</BlockControls>
145-
<div className={ classnames( 'wp-block-buttons', customClassName ) }>
78+
{ isLabelVisible && (
79+
<BlockControls>
80+
<ToolbarGroup>
81+
<ToolbarButton
82+
icon={ false }
83+
isPressed={ isSignedOutPreview }
84+
label={ __( 'Signed out', 'newspack-plugin' ) }
85+
onClick={ () => setPreviewState( 'signedout' ) }
86+
style={ { paddingLeft: '12px', paddingRight: '12px' } }
87+
>
88+
{ __( 'Signed out', 'newspack-plugin' ) }
89+
</ToolbarButton>
90+
<ToolbarButton
91+
icon={ false }
92+
isPressed={ ! isSignedOutPreview }
93+
label={ __( 'Signed in', 'newspack-plugin' ) }
94+
onClick={ () => setPreviewState( 'signedin' ) }
95+
style={ { paddingLeft: '12px', paddingRight: '12px' } }
96+
>
97+
{ __( 'Signed in', 'newspack-plugin' ) }
98+
</ToolbarButton>
99+
</ToolbarGroup>
100+
</BlockControls>
101+
) }
102+
<div className={ classnames( 'wp-block-buttons', blockClassName ) }>
146103
<div className="wp-block-button">
147104
<div { ...blockProps }>
148105
{ isIconVisible && (
@@ -156,7 +113,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
156113
aria-label={ __( 'Button text', 'newspack-plugin' ) }
157114
placeholder={ placeholderText }
158115
value={ activeLabel || '' }
159-
onChange={ value => setButtonText( value ) }
116+
onChange={ setButtonText }
160117
withoutInteractiveFormatting
161118
/>
162119
</div>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,30 @@ import './style.scss';
99
/**
1010
* WordPress dependencies
1111
*/
12+
import { registerBlockStyle } from '@wordpress/blocks';
13+
import { __ } from '@wordpress/i18n';
1214
import { button as icon } from '@wordpress/icons';
1315

1416
const { name } = metadata;
1517

1618
export { metadata, name };
1719

20+
registerBlockStyle( name, {
21+
name: 'default',
22+
label: __( 'Default', 'newspack-plugin' ),
23+
isDefault: true,
24+
} );
25+
26+
registerBlockStyle( name, {
27+
name: 'icon-only',
28+
label: __( 'Icon only', 'newspack-plugin' ),
29+
} );
30+
31+
registerBlockStyle( name, {
32+
name: 'text-only',
33+
label: __( 'Text only', 'newspack-plugin' ),
34+
} );
35+
1836
export const settings = {
1937
title: metadata.title,
2038
icon: {

‎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
/**

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const entry = {
4949
'content-gate-countdown-box-block': path.join( __dirname, 'src', 'blocks', 'content-gate', 'countdown-box', 'index.js' ),
5050
'contribution-meter-block': path.join( __dirname, 'src', 'blocks', 'contribution-meter', 'index.js' ),
5151
'avatar-block': path.join( __dirname, 'src', 'blocks', 'avatar', 'index.js' ),
52+
'my-account-button-block': path.join( __dirname, 'src', 'blocks', 'my-account-button', 'index.js' ),
5253
'my-account': path.join( __dirname, 'src', 'my-account', 'index.js' ),
5354
'my-account-v0': path.join( __dirname, 'src', 'my-account', 'v0', 'index.js' ),
5455
'my-account-v1': path.join( __dirname, 'src', 'my-account', 'v1', 'index.js' ),

0 commit comments

Comments
 (0)