fix #794

inc2734 · Jul 3, 2024 · 8a3cec3 · 8a3cec3
1 parent 2183d25
commit 8a3cec3
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 6 deletions.
diff --git a/src/blocks/accordion/block.json b/src/blocks/accordion/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/accordion",
 	"title": "Accordion",

diff --git a/src/blocks/accordion/item/block.json b/src/blocks/accordion/item/block.json
@@ -17,6 +17,12 @@
 			"type": "boolean",
 			"default": false
 		},
+		"titleBackgroundColor": {
+			"type": "string"
+		},
+		"titleColor": {
+			"type": "string"
+		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
@@ -32,6 +38,16 @@
 			"default": {
 				"type": "constrained"
 			}
+		},
+		"spacing": {
+			"__experimentalSkipSerialization": true,
+			"margin": false,
+			"padding": true
+		}
+	},
+	"selectors": {
+		"spacing": {
+			"padding": ".smb-accordion__item__body"
 		}
 	},
 	"editorScript": "file:./index.js"

diff --git a/src/blocks/accordion/item/edit.js b/src/blocks/accordion/item/edit.js
@@ -5,6 +5,10 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 } from '@wordpress/block-editor';
 
 import {
@@ -17,18 +21,34 @@ import { __ } from '@wordpress/i18n';
 
 import metadata from './block.json';
 
-export default function ( { attributes, setAttributes, className } ) {
-	const { title, initialState, templateLock } = attributes;
+function Edit( { attributes, setAttributes, className, clientId } ) {
+	const {
+		title,
+		initialState,
+		titleBackgroundColor,
+		titleColor,
+		templateLock,
+	} = attributes;
+
+	const spacingProps = useSpacingProps( attributes );
 
 	const classes = classnames( 'smb-accordion__item', className );
 
 	const blockProps = useBlockProps( {
 		className: classes,
+		style: {
+			'--smb-accordion-item--background-color':
+				titleBackgroundColor || undefined,
+			'--smb-accordion-item--color': titleColor || undefined,
+		},
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'smb-accordion__item__body',
+			style: {
+				...spacingProps.style,
+			},
 		},
 		{ templateLock }
 	);
@@ -72,6 +92,38 @@ export default function ( { attributes, setAttributes, className } ) {
 				</ToolsPanel>
 			</InspectorControls>
 
+			<InspectorControls group="color">
+				<ColorGradientSettingsDropdown
+					panelId={ clientId }
+					__experimentalIsRenderedInSidebar
+					{ ...useMultipleOriginColorsAndGradients() }
+					settings={ [
+						{
+							colorValue: titleBackgroundColor,
+							onColorChange: ( value ) =>
+								setAttributes( {
+									titleBackgroundColor: value,
+								} ),
+							label: __(
+								'Title background color',
+								'snow-monkey-blocks'
+							),
+						},
+						{
+							colorValue: titleColor,
+							onColorChange: ( value ) =>
+								setAttributes( {
+									titleColor: value,
+								} ),
+							label: __(
+								'Title text color',
+								'snow-monkey-blocks'
+							),
+						},
+					] }
+				/>
+			</InspectorControls>
+
 			<div { ...blockProps }>
 				<div className="smb-accordion__item__title">
 					<RichText
@@ -97,3 +149,8 @@ export default function ( { attributes, setAttributes, className } ) {
 		</>
 	);
 }
+
+export default withColors( {
+	titleBackgroundColor: 'background-color',
+	titleColor: 'color',
+} )( Edit );
diff --git a/src/blocks/accordion/item/save.js b/src/blocks/accordion/item/save.js
@@ -4,18 +4,32 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
 
 const { RawHTML } = wp.element;
 
 export default function ( { attributes, className } ) {
-	const { title, initialState } = attributes;
+	const { title, titleBackgroundColor, titleColor, initialState } =
+		attributes;
+
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+
 	const classes = classnames( 'smb-accordion__item', className );
 
 	const myShortcode = `[snow-monkey-blocks-accordion-item-control checked="${ initialState }"]`;
 
 	return (
-		<div { ...useBlockProps.save( { className: classes } ) }>
+		<div
+			{ ...useBlockProps.save( {
+				className: classes,
+				style: {
+					'--smb-accordion-item--background-color':
+						titleBackgroundColor || undefined,
+					'--smb-accordion-item--color': titleColor || undefined,
+				},
+			} ) }
+		>
 			<RawHTML>{ myShortcode }</RawHTML>
 
 			<div className="smb-accordion__item__title">
@@ -31,6 +45,9 @@ export default function ( { attributes, className } ) {
 			<div
 				{ ...useInnerBlocksProps.save( {
 					className: 'smb-accordion__item__body',
+					style: {
+						...spacingProps.style,
+					},
 				} ) }
 			/>
 		</div>

diff --git a/src/blocks/accordion/style.scss b/src/blocks/accordion/style.scss
@@ -3,18 +3,25 @@
 .smb-accordion {
 	--smb-accordion--gap: var(--_margin-1);
 	--smb-accordion--title-background-color: var(--_lighter-color-gray);
+	--smb-accordion--title-color: inherit;
+	--smb-accordion--body-padding: var(--_padding1);
 
 	> * + * {
 		margin-top: var(--smb-accordion--gap);
 	}
 
 	&__item {
+		--smb-accordion-item--background-color: var(--smb-accordion--title-background-color);
+		--smb-accordion-item--color: var(--smb-accordion--title-color);
+		--smb-accordion-item--padding: var(--smb-accordion--body-padding);
+
 		position: relative;
 
 		&__title {
 			display: flex;
 			align-items: center;
-			background-color: var(--smb-accordion--title-background-color);
+			background-color: var(--smb-accordion-item--background-color);
+			color: var(--smb-accordion-item--color);
 			padding: calc(var(--_padding-1) * .5) var(--_padding-1);
 
 			&__label {
@@ -53,7 +60,7 @@
 			position: relative;
 			z-index: 2;
 			display: none;
-			padding: var(--_padding1);
+			padding: var(--smb-accordion--body-padding);
 		}
 	}