feat(homepage-articles): rename block and reorganise settings (#1943)

Automattic · Nov 15, 2024 · 1af11a4 · 1af11a4
1 parent 043591e
commit 1af11a4
Show file tree

Hide file tree

Showing 8 changed files with 427 additions and 363 deletions.
diff --git a/src/blocks/homepage-articles/edit.tsx b/src/blocks/homepage-articles/edit.tsx
diff --git a/src/blocks/homepage-articles/editor.scss b/src/blocks/homepage-articles/editor.scss
@@ -61,4 +61,54 @@
 			opacity: 0.6;
 		}
 	}
+
+	&__panel {
+		.spacing-sizes-control {
+			.components-range-control__root {
+				> span {
+					margin-top: 0;
+				}
+			}
+		}
+
+		> *:not(.components-panel__body-title) {
+			margin-bottom: 16px;
+			margin-top: 0;
+
+			&:last-of-type {
+				margin-bottom: 8px;
+			}
+		}
+
+		&.is-loop {
+			.autocomplete-tokenfield + .components-checkbox-control {
+				margin-top: -8px;
+			}
+		}
+	}
+
+	&__button-group {
+		flex: 0 0 100%;
+
+		.components-base-control__label {
+			width: 100%;
+		}
+
+		.components-button-group {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
+
+			button {
+				justify-content: center;
+			}
+		}
+	}
+}
+
+.components-base-control__field:empty {
+	display: none;
+
+	+ .components-base-control__help {
+		margin: 0;
+	}
 }
diff --git a/src/blocks/homepage-articles/index.js b/src/blocks/homepage-articles/index.js
@@ -22,7 +22,7 @@ const { name, attributes, category } = metadata;
 // Name must be exported separately.
 export { name };
 
-export const title = __( 'Homepage Posts', 'newspack-blocks' );
+export const title = __( 'Content Loop', 'newspack-blocks' );
 
 export const icon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -48,11 +48,23 @@ export const settings = {
 		__( 'posts', 'newspack-blocks' ),
 		__( 'articles', 'newspack-blocks' ),
 		__( 'latest', 'newspack-blocks' ),
+		__( 'homepage', 'newspack-blocks' ),
+		__( 'query', 'newspack-blocks' ),
 	],
-	description: __( 'A block for displaying homepage posts.', 'newspack-blocks' ),
+	description: __(
+		'An advanced block that allows displaying content based on different parameters and visual configurations.',
+		'newspack-blocks'
+	),
 	styles: [
-		{ name: 'default', label: _x( 'Default', 'block style', 'newspack-blocks' ), isDefault: true },
-		{ name: 'borders', label: _x( 'Borders', 'block style', 'newspack-blocks' ) },
+		{
+			name: 'default',
+			label: _x('Default', 'block style', 'newspack-blocks'),
+			isDefault: true,
+		},
+		{
+			name: 'borders',
+			label: _x('Borders', 'block style', 'newspack-blocks'),
+		},
 	],
 	supports: {
 		html: false,

diff --git a/src/blocks/homepage-articles/utils.ts b/src/blocks/homepage-articles/utils.ts
@@ -268,7 +268,7 @@ export const postsBlockDispatch = (
 ) => {
 	return {
 		// Only editor blocks can trigger reflows.
-		// @ts-ignore It's a string.
+		// @ts-expect-error It's a string.
 		triggerReflow: isEditorBlock ? dispatch( STORE_NAMESPACE ).reflow : () => undefined,
 	};
 };

diff --git a/src/components/autocomplete-tokenfield.js b/src/components/autocomplete-tokenfield.js
@@ -181,6 +181,7 @@ class AutocompleteTokenField extends Component {
 					onChange={ tokens => this.handleOnChange( tokens ) }
 					onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
 					label={ label }
+					__next40pxDefaultSize
 				/>
 				{ loading && <Spinner /> }
 				{ help && <p className="autocomplete-tokenfield__help">{ help }</p> }

diff --git a/src/components/autocomplete-tokenfield.scss b/src/components/autocomplete-tokenfield.scss
@@ -1,18 +1,27 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
 .autocomplete-tokenfield {
+	max-width: 100%;
 	position: relative;
 
 	.components-spinner {
+		bottom: 12px;
 		position: absolute;
-		top: 2em;
 		right: 0;
 	}
 
+	&:has(.autocomplete-tokenfield__help) .components-spinner {
+		bottom: calc(36px + 8px + 12px);
+	}
+
 	/* Workaround for hard-coded help text in FormTokenField. */
 	.components-form-token-field > .components-form-token-field__help {
 		display: none;
 	}
 
 	.autocomplete-tokenfield__help {
-		font-style: italic;
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		margin: 8px 0;
 	}
 }
diff --git a/src/components/editor-panels.js b/src/components/editor-panels.js
@@ -2,29 +2,28 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Spinner, CheckboxControl, PanelBody, PanelRow } from '@wordpress/components';
+import { BaseControl, CheckboxControl, PanelBody, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 const CheckboxesGroup = ( { options, values, onChange } ) => {
 	if ( ! Array.isArray( options ) ) {
 		return <Spinner />;
 	}
 	return options.map( ( { name, slug } ) => (
-		<PanelRow key={ slug }>
-			<CheckboxControl
-				label={ name }
-				checked={ values.indexOf( slug ) > -1 }
-				onChange={ value => {
-					const cleanPostType = [ ...new Set( values ) ];
-					if ( value && cleanPostType.indexOf( slug ) === -1 ) {
-						cleanPostType.push( slug );
-					} else if ( ! value && cleanPostType.indexOf( slug ) > -1 ) {
-						cleanPostType.splice( cleanPostType.indexOf( slug ), 1 );
-					}
-					onChange( cleanPostType );
-				} }
-			/>
-		</PanelRow>
+		<CheckboxControl
+			label={ name }
+			checked={ values.indexOf( slug ) > -1 }
+			onChange={ value => {
+				const cleanPostType = [ ...new Set( values ) ];
+				if ( value && cleanPostType.indexOf( slug ) === -1 ) {
+					cleanPostType.push( slug );
+				} else if ( ! value && cleanPostType.indexOf( slug ) > -1 ) {
+					cleanPostType.splice( cleanPostType.indexOf( slug ), 1 );
+				}
+				onChange( cleanPostType );
+			} }
+			key={ slug }
+		/>
 	) );
 };
 
@@ -50,7 +49,7 @@ export const PostTypesPanel = ( { attributes, setAttributes } ) => {
 	} );
 
 	return (
-		<PanelBody title={ __( 'Post Types', 'newspack-blocks' ) }>
+		<PanelBody title={ __( 'Post Types', 'newspack-blocks' ) } initialOpen={ false }>
 			<CheckboxesGroup
 				options={ availablePostTypes }
 				values={ attributes.postType }
@@ -62,15 +61,8 @@ export const PostTypesPanel = ( { attributes, setAttributes } ) => {
 
 export const PostStatusesPanel = ( { attributes, setAttributes } ) => {
 	return (
-		<PanelBody title={ __( 'Additional Post Statuses', 'newspack-blocks' ) }>
-			<PanelRow>
-				<i>
-					{ __(
-						'Selection here has effect only for editors, regular users will only see published posts.',
-						'newspack-blocks'
-					) }
-				</i>
-			</PanelRow>
+		<PanelBody title={ __( 'Additional Post Statuses', 'newspack-blocks' ) } initialOpen={ false }>
+			<BaseControl help={ __( 'Selection here has effect only for editors, regular users will only see published posts.', 'newspack-blocks' ) } />
 			<CheckboxesGroup
 				values={ attributes.includedPostStatuses }
 				options={ [