Skip to content

Commit d315db9

Browse files
thomasguillotthomasguillot
committed
feat: replace toggles with styles and classnames
1 parent ced713a commit d315db9

File tree

6 files changed

+91
-78
lines changed

6 files changed

+91
-78
lines changed

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,9 @@
2121
"type": "string",
2222
"default": "Sign in"
2323
},
24-
"showLabel": {
25-
"type": "boolean",
26-
"default": true
27-
},
28-
"showIcon": {
29-
"type": "boolean",
30-
"default": true
24+
"className": {
25+
"type": "string",
26+
"default": ""
3127
}
3228
},
3329
"supports": {

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,18 +93,26 @@ public static function render_block( $attrs ) {
9393
$default_attrs = [
9494
'signedInLabel' => __( 'My Account', 'newspack-plugin' ),
9595
'signedOutLabel' => __( 'Sign in', 'newspack-plugin' ),
96+
'className' => '',
9697
];
9798
$attrs = \wp_parse_args( $attrs, $default_attrs );
9899

99100
$is_signed_in = \is_user_logged_in();
100101
$signed_in_label = '' === trim( (string) $attrs['signedInLabel'] ) ? $default_attrs['signedInLabel'] : $attrs['signedInLabel'];
101102
$signed_out_label = '' === trim( (string) $attrs['signedOutLabel'] ) ? $default_attrs['signedOutLabel'] : $attrs['signedOutLabel'];
102103
$label = $is_signed_in ? $signed_in_label : $signed_out_label;
103-
$show_label = isset( $attrs['showLabel'] ) ? (bool) $attrs['showLabel'] : true;
104-
$show_icon = isset( $attrs['showIcon'] ) ? (bool) $attrs['showIcon'] : true;
105104

106-
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 ) {
107111
$show_label = true;
112+
$show_icon = false;
113+
} else {
114+
$show_label = true;
115+
$show_icon = true;
108116
}
109117

110118
$account_url = self::get_account_url();

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

Lines changed: 45 additions & 55 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,20 +22,25 @@ import {
2322
__experimentalGetSpacingClassesAndStyles as useSpacingProps,
2423
/* eslint-enable @wordpress/no-unsafe-wp-apis */
2524
} from '@wordpress/block-editor';
26-
import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
25+
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
2726

28-
/**
29-
* Internal dependencies
30-
*/
31-
function MyAccountButtonEdit( { attributes, setAttributes } ) {
32-
const { signedInLabel, signedOutLabel, showLabel, showIcon, style, className: customClassName } = attributes;
27+
function MyAccountButtonEdit( { attributes, setAttributes, className: wrapperClassName } ) {
28+
const { signedInLabel, signedOutLabel, style, className: blockClassName } = attributes;
3329
const borderProps = useBorderProps( attributes );
3430
const colorProps = useColorProps( attributes );
3531
const spacingProps = useSpacingProps( attributes );
36-
const isLabelVisible = showLabel !== false;
37-
const isIconVisible = showIcon !== false;
32+
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;
40+
3841
const blockProps = useBlockProps( {
3942
className: classnames(
43+
className,
4044
'wp-block-button__link',
4145
'newspack-reader__account-link',
4246
'wp-block-newspack-my-account-button__link',
@@ -54,62 +58,48 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
5458
...spacingProps.style,
5559
},
5660
} );
57-
const isReaderActivationEnabled = typeof newspack_blocks === 'undefined' || newspack_blocks.has_reader_activation;
5861

62+
const isReaderActivationEnabled = typeof newspack_blocks === 'undefined' || newspack_blocks.has_reader_activation;
5963
const [ previewState, setPreviewState ] = useState( 'signedout' );
6064
const isSignedOutPreview = previewState === 'signedout';
6165
const activeLabel = isSignedOutPreview ? signedOutLabel : signedInLabel;
6266
const placeholderText = isSignedOutPreview ? __( 'Sign in', 'newspack-plugin' ) : __( 'My Account', 'newspack-plugin' );
63-
function setShowLabel( nextValue ) {
64-
if ( ! nextValue && ! isIconVisible ) {
65-
setAttributes( { showLabel: false, showIcon: true } );
66-
return;
67-
}
68-
setAttributes( { showLabel: nextValue } );
69-
}
7067

71-
function setShowIcon( nextValue ) {
72-
if ( ! nextValue && ! isLabelVisible ) {
73-
setAttributes( { showLabel: true, showIcon: false } );
74-
return;
75-
}
76-
setAttributes( { showIcon: nextValue } );
68+
function setButtonText( newText ) {
69+
setAttributes( isSignedOutPreview ? { signedOutLabel: stripHTML( newText ) } : { signedInLabel: stripHTML( newText ) } );
7770
}
7871

79-
function setButtonText( newText ) {
80-
const cleaned = stripHTML( newText );
81-
setAttributes( isSignedOutPreview ? { signedOutLabel: cleaned } : { signedInLabel: cleaned } );
72+
if ( ! isReaderActivationEnabled ) {
73+
return <div { ...blockProps } style={ { ...blockProps.style, display: 'none' } } />;
8274
}
8375

84-
return ! isReaderActivationEnabled ? (
85-
<div { ...blockProps } style={ { ...blockProps.style, display: 'none' } } />
86-
) : (
76+
return (
8777
<>
88-
<InspectorControls>
89-
<PanelBody title={ __( 'Display', 'newspack-plugin' ) }>
90-
<ToggleControl label={ __( 'Show label', 'newspack-plugin' ) } checked={ isLabelVisible } onChange={ setShowLabel } />
91-
<ToggleControl label={ __( 'Show icon', 'newspack-plugin' ) } checked={ isIconVisible } onChange={ setShowIcon } />
92-
</PanelBody>
93-
</InspectorControls>
94-
<BlockControls>
95-
<ToolbarGroup>
96-
<ToolbarButton
97-
isPressed={ isSignedOutPreview }
98-
onClick={ () => setPreviewState( 'signedout' ) }
99-
style={ { paddingLeft: '12px', paddingRight: '12px' } }
100-
>
101-
{ __( 'Signed out', 'newspack-plugin' ) }
102-
</ToolbarButton>
103-
<ToolbarButton
104-
isPressed={ ! isSignedOutPreview }
105-
onClick={ () => setPreviewState( 'signedin' ) }
106-
style={ { paddingLeft: '12px', paddingRight: '12px' } }
107-
>
108-
{ __( 'Signed in', 'newspack-plugin' ) }
109-
</ToolbarButton>
110-
</ToolbarGroup>
111-
</BlockControls>
112-
<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 ) }>
113103
<div className="wp-block-button">
114104
<div { ...blockProps }>
115105
{ isIconVisible && (
@@ -123,7 +113,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
123113
aria-label={ __( 'Button text', 'newspack-plugin' ) }
124114
placeholder={ placeholderText }
125115
value={ activeLabel || '' }
126-
onChange={ value => setButtonText( value ) }
116+
onChange={ setButtonText }
127117
withoutInteractiveFormatting
128118
/>
129119
</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)