Fix #813

inc2734 · Jul 6, 2024 · 67e48fc · 67e48fc
1 parent 9d38568
commit 67e48fc
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 35 deletions.
diff --git a/src/blocks/rating-box/block.json b/src/blocks/rating-box/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/rating-box",
 	"title": "Rating box",
@@ -14,8 +15,25 @@
 	},
 	"supports": {
 		"html": false,
+		"color": {
+			"background": true,
+			"text": true
+		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		}
 	},
 	"example": {

diff --git a/src/blocks/rating-box/item/block.json b/src/blocks/rating-box/item/block.json
@@ -20,6 +20,18 @@
 		},
 		"color": {
 			"type": "string"
+		},
+		"titleFontSizeSlug": {
+			"type": "string"
+		},
+		"titleFontSize": {
+			"type": "string"
+		},
+		"numericFontSizeSlug": {
+			"type": "string"
+		},
+		"numericFontSize": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/src/blocks/rating-box/item/deprecated.js b/src/blocks/rating-box/item/deprecated.js
@@ -8,6 +8,54 @@ const blockAttributes = metadata.attributes;
 const blockSupports = metadata.supports;
 
 export default [
+	{
+		attributes: {
+			...blockAttributes,
+		},
+
+		supports: {
+			...blockSupports,
+		},
+
+		save( { attributes, className } ) {
+			const { title, rating, color } = attributes;
+
+			const classes = classnames( 'smb-rating-box__item', className );
+
+			const styles = {
+				'--smb-rating-box--rating-background-color': color || undefined,
+			};
+
+			const itemEvaluationRatingStyles = {
+				width: `${ rating * 10 }%`,
+			};
+
+			return (
+				<div
+					{ ...useBlockProps.save( {
+						className: classes,
+						style: styles,
+					} ) }
+				>
+					<div className="smb-rating-box__item__title">
+						<RichText.Content value={ title } />
+					</div>
+
+					<div className="smb-rating-box__item__evaluation">
+						<div className="smb-rating-box__item__evaluation__bar">
+							<div className="smb-rating-box__item__evaluation__numeric">
+								{ rating }
+							</div>
+							<div
+								className="smb-rating-box__item__evaluation__rating"
+								style={ itemEvaluationRatingStyles }
+							/>
+						</div>
+					</div>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

diff --git a/src/blocks/rating-box/item/edit.js b/src/blocks/rating-box/item/edit.js
@@ -1,13 +1,19 @@
 import classnames from 'classnames';
 
 import {
+	FontSizePicker,
 	InspectorControls,
 	RichText,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	useBlockProps,
+	getFontSizeClass,
+	getFontSizeObjectByValue,
+	useSettings,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -19,8 +25,18 @@ import { toNumber } from '@smb/helper';
 
 import metadata from './block.json';
 
-export default function ( { attributes, setAttributes, className } ) {
-	const { title, rating, color } = attributes;
+export default function ( { attributes, setAttributes, className, clientId } ) {
+	const {
+		title,
+		rating,
+		color,
+		titleFontSizeSlug,
+		titleFontSize,
+		numericFontSizeSlug,
+		numericFontSize,
+	} = attributes;
+
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const classes = classnames( 'smb-rating-box__item', className );
 
@@ -37,24 +53,139 @@ export default function ( { attributes, setAttributes, className } ) {
 		style: styles,
 	} );
 
+	const selectedTitleFontSize =
+		fontSizes.find(
+			( fontSize ) =>
+				!! titleFontSizeSlug && fontSize.slug === titleFontSizeSlug
+		)?.size || titleFontSize;
+
+	const selectedNumericFontSize =
+		fontSizes.find(
+			( fontSize ) =>
+				!! numericFontSizeSlug && fontSize.slug === numericFontSizeSlug
+		)?.size || numericFontSize;
+
+	const titleFontSizeClass = !! titleFontSizeSlug
+		? getFontSizeClass( titleFontSizeSlug )
+		: undefined;
+
+	const numericFontSizeClass = !! numericFontSizeSlug
+		? getFontSizeClass( numericFontSizeSlug )
+		: 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/rating-box-item/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>
+
+				<ToolsPanelItem
+					panelId={ clientId }
+					hasValue={ () =>
+						numericFontSizeSlug !== metadata.numericFontSizeSlug ||
+						numericFontSize !== metadata.numericFontSize
+					}
+					isShownByDefault
+					label={ __( 'Numeric font size', 'snow-monkey-blocks' ) }
+					resetAllFilter={ () => ( {
+						numericFontSizeSlug: metadata.numericFontSizeSlug,
+						numericFontSize: metadata.numericFontSize,
+					} ) }
+					onDeselect={ () => {
+						setAttributes( {
+							numericFontSizeSlug: metadata.numericFontSizeSlug,
+							numericFontSize: metadata.numericFontSize,
+						} );
+					} }
+				>
+					<BaseControl
+						label={ __( 'Numeric', 'snow-monkey-blocks' ) }
+						id="snow-monkey-blocks/rating-box-item/numeric-font-size"
+					>
+						<FontSizePicker
+							value={ selectedNumericFontSize }
+							onChange={ ( value ) => {
+								const fontSizeSlug = getFontSizeObjectByValue(
+									fontSizes,
+									value
+								).slug;
+
+								setAttributes( {
+									numericFontSizeSlug:
+										fontSizeSlug || undefined,
+									numericFontSize: ! fontSizeSlug
+										? value
+										: undefined,
+								} );
+							} }
+							withReset={ false }
+							withSlider
+						/>
+					</BaseControl>
+				</ToolsPanelItem>
+			</InspectorControls>
+
+			<InspectorControls group="color">
+				<ColorGradientSettingsDropdown
+					panelId={ clientId }
+					__experimentalIsRenderedInSidebar
+					{ ...useMultipleOriginColorsAndGradients() }
 					settings={ [
 						{
 							colorValue: color,
 							onColorChange: ( value ) =>
 								setAttributes( {
 									color: value,
 								} ),
+							resetAllFilter: () => ( {
+								color: metadata.color,
+							} ),
 							label: __( 'Bar color', 'snow-monkey-blocks' ),
 						},
 					] }
-					__experimentalIsRenderedInSidebar
-				></PanelColorGradientSettings>
+				/>
 			</InspectorControls>
 
 			<InspectorControls>
@@ -89,23 +220,43 @@ export default function ( { attributes, setAttributes, className } ) {
 			</InspectorControls>
 
 			<div { ...blockProps }>
-				<RichText
-					className="smb-rating-box__item__title"
-					placeholder={ __( 'Write title…', 'snow-monkey-blocks' ) }
-					value={ title }
-					multiline={ false }
-					onChange={ ( value ) =>
-						setAttributes( {
-							title: value,
-						} )
-					}
-				/>
+				<div className="smb-rating-box__item__body">
+					<RichText
+						className={ classnames(
+							'smb-rating-box__item__title',
+							titleFontSizeClass
+						) }
+						style={ {
+							fontSize: titleFontSize || undefined,
+						} }
+						placeholder={ __(
+							'Write title…',
+							'snow-monkey-blocks'
+						) }
+						value={ title }
+						multiline={ false }
+						onChange={ ( value ) =>
+							setAttributes( {
+								title: value,
+							} )
+						}
+					/>
+
+					<div
+						className={ classnames(
+							'smb-rating-box__item__numeric',
+							numericFontSizeClass
+						) }
+						style={ {
+							fontSize: numericFontSize || undefined,
+						} }
+					>
+						{ rating }
+					</div>
+				</div>
 
 				<div className="smb-rating-box__item__evaluation">
 					<div className="smb-rating-box__item__evaluation__bar">
-						<div className="smb-rating-box__item__evaluation__numeric">
-							{ rating }
-						</div>
 						<div
 							className="smb-rating-box__item__evaluation__rating"
 							style={ itemEvaluationRatingStyles }