swap out icon select for icon control (#142)

Automattic · Jun 14, 2024 · d9c41be · d9c41be
1 parent 4c0de6b
commit d9c41be
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 37 deletions.
diff --git a/...cks/src/components/controls/iconSelect.js → ...ks/src/components/controls/iconControl.js b/...cks/src/components/controls/iconSelect.js → ...ks/src/components/controls/iconControl.js
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { SelectControl, TextControl } from '@wordpress/components';
 
 import * as icons from '@wordpress/icons';
 
@@ -10,16 +11,25 @@ const iconOptions = Object.keys(icons).map((key) =>
 );
 
 export default function( { attributes, setAttributes } ) {
-	const { icon } = attributes;
+	const { icon, iconSize } = attributes;
 
 	return (
+		<>
 		<SelectControl
-			label="Icon"
+				label={__('Icon')}
 			value={ icon }
 			options={ iconOptions }
 			onChange={ ( newVal ) => {
 				setAttributes( { icon: newVal } );
 			} }
-		/>
+			/>
+			<TextControl
+				label={ __( 'size' ) }
+				value={ iconSize }
+				onChange={ ( newVal ) => {
+					setAttributes( { iconSize: newVal } );
+				} }
+			/>
+		</>
 	);
 }
diff --git a/plugin/blocks/src/components/icon/edit.js b/plugin/blocks/src/components/icon/edit.js
@@ -11,7 +11,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody,TextControl } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import * as icons from '@wordpress/icons';
 
 const Icon = icons.Icon;
@@ -22,23 +22,16 @@ const Icon = icons.Icon;
  * Internal dependencies
  */
 
-import IconSelect from '../controls/iconSelect.js';
+import IconControl from '../controls/iconControl.js';
 
 export default function ( { attributes, setAttributes, className } ) {
-	const { icon, size } = attributes;
+	const { icon, iconSize } = attributes;
 	const blockProps = useBlockProps();
 
 	const controls = (
 		<InspectorControls>
 			<PanelBody label={ __( 'Settings' ) }>
-				<IconSelect { ...{ attributes, setAttributes } } />
-				<TextControl
-					label={ __( 'size' ) }
-					value={ size }
-					onChange={ ( newVal ) => {
-						setAttributes( { size: newVal } );
-					} }
-				/>
+				<IconControl { ...{ attributes, setAttributes } } />
 			</PanelBody>
 		</InspectorControls>
 	);
@@ -54,7 +47,7 @@ export default function ( { attributes, setAttributes, className } ) {
 					'wpcloud-block-icon'
 				) }
 				icon={ icons[ icon ] }
-				size={ size || 24 }
+				size={ iconSize}
 			/>
 		</>
 	);

diff --git a/plugin/blocks/src/components/more-menu/block.json b/plugin/blocks/src/components/more-menu/block.json
@@ -23,6 +23,10 @@
 			"type": "string",
 			"default": "moreVertical"
 		},
+		"iconSize": {
+			"type": "string",
+			"default": "24"
+		},
 		"position":{
 			"type": "string",
 			"default": "right"

diff --git a/plugin/blocks/src/components/more-menu/edit.js b/plugin/blocks/src/components/more-menu/edit.js
@@ -21,7 +21,7 @@ const Icon = icons.Icon;
 /**
  * Internal dependencies
  */
-import IconSelect from '../controls/iconSelect.js';
+import IconControl from '../controls/iconControl.js';
 import './editor.scss';
 
 /**
@@ -38,7 +38,7 @@ export default function Edit( {
 	clientId,
 	isSelected
 } ) {
-	const { showMenu, icon, position } = attributes;
+	const { showMenu, icon, iconSize, position } = attributes;
 	const blockProps = useBlockProps();
 
 	const isChildSelected = useSelect( ( select ) =>
@@ -58,7 +58,7 @@ export default function Edit( {
 	const controls = (
 		<InspectorControls>
 			<PanelBody title={__('Form Settings')}>
-				<IconSelect { ...{ attributes, setAttributes } } />
+				<IconControl { ...{ attributes, setAttributes } } />
 				<ToggleControl
 					label={ __( 'Show Menu' ) }
 					checked={ showMenu }
@@ -104,7 +104,7 @@ export default function Edit( {
 							} );
 						} }
 					>
-						<Icon icon={ icons[icon] } />
+					<Icon icon={icons[icon]} size={iconSize} />
 					</div>
 					<div
 						{ ...innerBlocksProps }

diff --git a/plugin/blocks/src/components/more-menu/save.js b/plugin/blocks/src/components/more-menu/save.js
@@ -11,7 +11,7 @@ import * as icons from '@wordpress/icons';
 const { Icon } = icons;
 
 export default function save({ attributes }) {
-	const { icon, position } = attributes;
+	const { icon, iconSize, position } = attributes;
 	const blockProps = useBlockProps.save();
 	const positionCss = position == 'left' ? {right: 0} : {left: 0};
 	return (
@@ -23,7 +23,7 @@ export default function save({ attributes }) {
 			) }
 		>
 			<button className="wpcloud-more-menu__button">
-				<Icon icon={ icons[icon] } />
+				<Icon icon={icons[icon]} size={iconSize} />
 			</button>
 			<nav
 				className="wpcloud-more-menu__nav is-closed"

diff --git a/theme/parts/header.html b/theme/parts/header.html
@@ -1,15 +1,3 @@
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}}},"backgroundColor":"wpcloud-background-tertiary","layout":{"type":"constrained","wideSize":"95vw"}} -->
-<div class="wp-block-group alignwide has-wpcloud-background-tertiary-background-color has-background" style="padding-top:20px;padding-bottom:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
-<div class="wp-block-group alignwide"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
-<div class="wp-block-group"><!-- wp:site-logo {"width":156,"shouldSyncIcon":true} /-->
-
-<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
-<div class="wp-block-group"></div>
-<!-- /wp:group --></div>
-<!-- /wp:group --></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
-<!-- wp:spacer {"height":"60px"} -->
-<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"16px","bottom":"16px"}}},"backgroundColor":"background-secondary","layout":{"type":"constrained","wideSize":"95vw"}} -->
+<div class="wp-block-group alignwide has-background-secondary-background-color has-background" style="padding-top:16px;padding-bottom:16px"><!-- wp:site-logo {"width":188,"shouldSyncIcon":true} /--></div>
+<!-- /wp:group -->