Skip to content

Commit 0a18d63

Browse files
thomasguillotthomasguillot
committed
feat: rework this as styles
1 parent 443a47a commit 0a18d63

3 files changed

Lines changed: 86 additions & 81 deletions

File tree

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

Lines changed: 67 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ 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 { useState } from '@wordpress/element';
14+
import { useEffect, 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,54 @@ 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';
26+
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+
};
3538

36-
/**
37-
* Internal dependencies
38-
*/
3939
function MyAccountButtonEdit( { attributes, setAttributes } ) {
4040
const { signedInLabel, signedOutLabel, showLabel, showIcon, style, className: customClassName } = attributes;
4141
const borderProps = useBorderProps( attributes );
4242
const colorProps = useColorProps( attributes );
4343
const spacingProps = useSpacingProps( attributes );
44-
const isLabelVisible = showLabel !== false;
45-
const isIconVisible = showIcon !== false;
4644

47-
const displayMode = ( () => {
48-
if ( isIconVisible && ! isLabelVisible ) {
49-
return 'icon';
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;
5063
}
51-
if ( ! isIconVisible && isLabelVisible ) {
52-
return 'text';
64+
const next = modeToAttrs[ displayModeFromStyle ];
65+
if ( attributes.showIcon !== next.showIcon || attributes.showLabel !== next.showLabel ) {
66+
setAttributes( next );
5367
}
54-
return 'default';
55-
} )();
56-
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-
};
68+
}, [ displayModeFromStyle, attributes.showIcon, attributes.showLabel, setAttributes ] );
6269

6370
const blockProps = useBlockProps( {
6471
className: classnames(
72+
wrapperClassName,
6573
'wp-block-button__link',
6674
'newspack-reader__account-link',
6775
'wp-block-newspack-my-account-button__link',
@@ -86,62 +94,40 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
8694
const activeLabel = isSignedOutPreview ? signedOutLabel : signedInLabel;
8795
const placeholderText = isSignedOutPreview ? __( 'Sign in', 'newspack-plugin' ) : __( 'My Account', 'newspack-plugin' );
8896

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-
}
97+
function setButtonText( newText ) {
98+
setAttributes( isSignedOutPreview ? { signedOutLabel: stripHTML( newText ) } : { signedInLabel: stripHTML( newText ) } );
10099
}
101100

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

107-
return ! isReaderActivationEnabled ? (
108-
<div { ...blockProps } style={ { ...blockProps.style, display: 'none' } } />
109-
) : (
105+
return (
110106
<>
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>
107+
{ displayMode !== 'icon' && (
108+
<BlockControls>
109+
<ToolbarGroup>
110+
<ToolbarButton
111+
icon={ false }
112+
isPressed={ isSignedOutPreview }
113+
label={ __( 'Signed out', 'newspack-plugin' ) }
114+
onClick={ () => setPreviewState( 'signedout' ) }
115+
style={ { paddingLeft: '12px', paddingRight: '12px' } }
116+
>
117+
{ __( 'Signed out', 'newspack-plugin' ) }
118+
</ToolbarButton>
119+
<ToolbarButton
120+
icon={ false }
121+
isPressed={ ! isSignedOutPreview }
122+
label={ __( 'Signed in', 'newspack-plugin' ) }
123+
onClick={ () => setPreviewState( 'signedin' ) }
124+
style={ { paddingLeft: '12px', paddingRight: '12px' } }
125+
>
126+
{ __( 'Signed in', 'newspack-plugin' ) }
127+
</ToolbarButton>
128+
</ToolbarGroup>
129+
</BlockControls>
130+
) }
145131
<div className={ classnames( 'wp-block-buttons', customClassName ) }>
146132
<div className="wp-block-button">
147133
<div { ...blockProps }>
@@ -156,7 +142,7 @@ function MyAccountButtonEdit( { attributes, setAttributes } ) {
156142
aria-label={ __( 'Button text', 'newspack-plugin' ) }
157143
placeholder={ placeholderText }
158144
value={ activeLabel || '' }
159-
onChange={ value => setButtonText( value ) }
145+
onChange={ setButtonText }
160146
withoutInteractiveFormatting
161147
/>
162148
</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: {

‎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)