fix #815

inc2734 · Jul 6, 2024 · 51d9869 · 51d9869
1 parent 78e55f0
commit 51d9869
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 35 deletions.
diff --git a/src/blocks/step/block.json b/src/blocks/step/block.json
@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
+	"version": "21.0.0",
 	"textdomain": "snow-monkey-blocks",
 	"name": "snow-monkey-blocks/step",
 	"title": "Steps",

diff --git a/src/blocks/step/item/free/block.json b/src/blocks/step/item/free/block.json
@@ -17,6 +17,15 @@
 		"numberColor": {
 			"type": "string"
 		},
+		"titleColor": {
+			"type": "string"
+		},
+		"titleFontSizeSlug": {
+			"type": "string"
+		},
+		"titleFontSize": {
+			"type": "string"
+		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]

diff --git a/src/blocks/step/item/free/edit.js b/src/blocks/step/item/free/edit.js
@@ -1,19 +1,40 @@
 import classnames from 'classnames';
 
 import {
+	FontSizePicker,
 	InnerBlocks,
 	InspectorControls,
 	RichText,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	useBlockProps,
 	useInnerBlocksProps,
+	getFontSizeClass,
+	getFontSizeObjectByValue,
+	useSettings,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 
+import {
+	BaseControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
+import metadata from './block.json';
+
 export default function ( { attributes, setAttributes, className, clientId } ) {
-	const { title, numberColor, templateLock } = attributes;
+	const {
+		title,
+		numberColor,
+		titleColor,
+		titleFontSizeSlug,
+		titleFontSize,
+		templateLock,
+	} = attributes;
+
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -26,6 +47,7 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 
 	const styles = {
 		'--smb-step--number-background-color': numberColor || undefined,
+		'--smb-step--title-color': titleColor || undefined,
 	};
 
 	const blockProps = useBlockProps( {
@@ -45,35 +67,107 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 		}
 	);
 
-	const onChangeNumberColor = ( value ) =>
-		setAttributes( {
-			numberColor: value,
-		} );
+	const selectedTitleFontSize =
+		fontSizes.find(
+			( fontSize ) =>
+				!! titleFontSizeSlug && fontSize.slug === titleFontSizeSlug
+		)?.size || titleFontSize;
 
-	const onChangeTitle = ( value ) =>
-		setAttributes( {
-			title: value,
-		} );
+	const titleFontSizeClass = !! titleFontSizeSlug
+		? getFontSizeClass( titleFontSizeSlug )
+		: undefined;
 
 	return (
 		<>
-			<InspectorControls group="styles">
-				<PanelColorGradientSettings
-					title={ __( 'Color', 'snow-monkey-blocks' ) }
-					initialOpen={ false }
+			<InspectorControls group="typography">
+				<ToolsPanelItem
+					panelId={ clientId }
+					hasValue={ () =>
+						titleFontSizeSlug !== metadata.titleFontSizeSlug ||
+						titleFontSize !== metadata.titleFontSize
+					}
+					isShownByDefault
+					label={ __( 'Title font size', 'snow-monkey-blocks' ) }
+					resetAllFilter={ () => ( {
+						titleFontSizeSlug: metadata.titleFontSizeSlug,
+						titleFontSize: metadata.titleFontSize,
+					} ) }
+					onDeselect={ () => {
+						setAttributes( {
+							titleFontSizeSlug: metadata.titleFontSizeSlug,
+							titleFontSize: metadata.titleFontSize,
+						} );
+					} }
+				>
+					<BaseControl
+						label={ __( 'Title', 'snow-monkey-blocks' ) }
+						id="snow-monkey-blocks/step-item-free/title-font-size"
+					>
+						<FontSizePicker
+							value={ selectedTitleFontSize }
+							onChange={ ( value ) => {
+								const fontSizeSlug = getFontSizeObjectByValue(
+									fontSizes,
+									value
+								).slug;
+
+								setAttributes( {
+									titleFontSizeSlug:
+										fontSizeSlug || undefined,
+									titleFontSize: ! fontSizeSlug
+										? value
+										: undefined,
+								} );
+							} }
+							withReset={ false }
+							withSlider
+						/>
+					</BaseControl>
+				</ToolsPanelItem>
+			</InspectorControls>
+
+			<InspectorControls group="color">
+				<ColorGradientSettingsDropdown
+					panelId={ clientId }
+					__experimentalIsRenderedInSidebar
+					{ ...useMultipleOriginColorsAndGradients() }
 					settings={ [
 						{
 							colorValue: numberColor,
-							onColorChange: onChangeNumberColor,
+							onColorChange: ( value ) =>
+								setAttributes( {
+									numberColor: value,
+								} ),
+							resetAllFilter: () => ( {
+								numberColor: metadata.numberColor,
+							} ),
 							label: __( 'Number color', 'snow-monkey-blocks' ),
 						},
+						{
+							colorValue: titleColor,
+							onColorChange: ( value ) =>
+								setAttributes( {
+									titleColor: value,
+								} ),
+							resetAllFilter: () => ( {
+								titleColor: metadata.titleColor,
+							} ),
+							label: __( 'Title color', 'snow-monkey-blocks' ),
+						},
 					] }
-					__experimentalIsRenderedInSidebar
-				></PanelColorGradientSettings>
+				/>
 			</InspectorControls>
 
 			<div { ...blockProps }>
-				<div className="smb-step__item__title">
+				<div
+					className={ classnames(
+						'smb-step__item__title',
+						titleFontSizeClass
+					) }
+					style={ {
+						fontSize: titleFontSize || undefined,
+					} }
+				>
 					<div className="smb-step__item__number" />
 
 					<RichText
@@ -84,7 +178,11 @@ export default function ( { attributes, setAttributes, className, clientId } ) {
 						) }
 						value={ title }
 						multiline={ false }
-						onChange={ onChangeTitle }
+						onChange={ ( value ) =>
+							setAttributes( {
+								title: value,
+							} )
+						}
 					/>
 				</div>
 

diff --git a/src/blocks/step/item/free/index.js b/src/blocks/step/item/free/index.js
@@ -7,7 +7,6 @@ import icon from '../../icon';
 import edit from './edit';
 import save from './save';
 import deprecated from './deprecated';
-import transforms from './transforms';
 
 registerBlockType( metadata.name, {
 	icon: {
@@ -17,5 +16,4 @@ registerBlockType( metadata.name, {
 	edit,
 	save,
 	deprecated,
-	transforms,
 } );
diff --git a/src/blocks/step/item/free/save.js b/src/blocks/step/item/free/save.js
@@ -4,20 +4,35 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	getFontSizeClass,
 } from '@wordpress/block-editor';
 
 export default function ( { attributes, className } ) {
-	const { title, numberColor } = attributes;
+	const { title, numberColor, titleColor, titleFontSizeSlug, titleFontSize } =
+		attributes;
 
 	const classes = classnames( 'smb-step__item', className );
 
 	const styles = {
 		'--smb-step--number-background-color': numberColor || undefined,
+		'--smb-step--title-color': titleColor || undefined,
 	};
 
+	const titleFontSizeClass = !! titleFontSizeSlug
+		? getFontSizeClass( titleFontSizeSlug )
+		: undefined;
+
 	return (
 		<div { ...useBlockProps.save( { className: classes, style: styles } ) }>
-			<div className="smb-step__item__title">
+			<div
+				className={ classnames(
+					'smb-step__item__title',
+					titleFontSizeClass
+				) }
+				style={ {
+					fontSize: titleFontSize || undefined,
+				} }
+			>
 				<div className="smb-step__item__number" />
 				<RichText.Content tagName="span" value={ title } />
 			</div>

diff --git a/src/blocks/step/item/free/transforms.js b/src/blocks/step/item/free/transforms.js
diff --git a/src/blocks/step/style.scss b/src/blocks/step/style.scss
@@ -6,6 +6,7 @@
 	--smb-step--number-size: 2.5rem;
 	--smb-step--number-background-color: var(--wp--preset--color--black);
 	--smb-step--number-color: var(--wp--preset--color--white);
+	--smb-step--title-color: inherit;
 
 	counter-reset: item;
 
@@ -38,6 +39,7 @@
 			align-items: center;
 			margin-bottom: var(--_margin-1);
 			font-weight: bold;
+			color: var(--smb-step--title-color);
 
 			> .smb-step__item__number {
 				position: absolute;