fix #803

inc2734 · Jul 4, 2024 · 1a6af75 · 1a6af75
1 parent cb069ca
commit 1a6af75
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 9 deletions.
diff --git a/src/blocks/directory-structure/block.json b/src/blocks/directory-structure/block.json
@@ -1,12 +1,16 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
+	"version": "21.0.0",
 	"textdomain": "snow-monkey-blocks",
 	"name": "snow-monkey-blocks/directory-structure",
 	"title": "Directory structure",
 	"description": "Display a list of directories and files",
 	"category": "smb",
 	"attributes": {
+		"iconColor": {
+			"type": "string"
+		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
@@ -15,12 +19,37 @@
 	"supports": {
 		"html": false,
 		"color": {
-			"background": false,
+			"background": true,
 			"link": true,
 			"text": true
 		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": 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/directory-structure/edit.js b/src/blocks/directory-structure/edit.js
@@ -1,12 +1,16 @@
 import classnames from 'classnames';
 
 import {
+	InspectorControls,
 	InnerBlocks,
 	useBlockProps,
 	useInnerBlocksProps,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 } from '@wordpress/block-editor';
 
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 import { useMigrateDoubleHyphenToSingleHyphen } from '@smb/hooks';
 
@@ -15,7 +19,9 @@ const ALLOWED_BLOCKS = [
 	'snow-monkey-blocks/directory-structure-item-file',
 ];
 
-export default function ( { attributes, className, clientId } ) {
+export default function ( { attributes, setAttributes, className, clientId } ) {
+	const { iconColor } = attributes;
+
 	useMigrateDoubleHyphenToSingleHyphen( clientId, [
 		{
 			oldBlockName:
@@ -40,8 +46,13 @@ export default function ( { attributes, className, clientId } ) {
 
 	const classes = classnames( 'smb-directory-structure', className );
 
+	const styles = {
+		'--smb-directory-structure--icon-color': iconColor || undefined,
+	};
+
 	const blockProps = useBlockProps( {
 		className: classes,
+		style: styles,
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -52,5 +63,27 @@ export default function ( { attributes, className, clientId } ) {
 			: InnerBlocks.ButtonBlockAppender,
 	} );
 
-	return <div { ...innerBlocksProps } />;
+	return (
+		<>
+			<InspectorControls group="color">
+				<ColorGradientSettingsDropdown
+					settings={ [
+						{
+							colorValue: iconColor,
+							onColorChange: ( value ) =>
+								setAttributes( {
+									iconColor: value,
+								} ),
+							label: __( 'Icon color', 'snow-monkey-blocks' ),
+						},
+					] }
+					__experimentalIsRenderedInSidebar
+					{ ...useMultipleOriginColorsAndGradients() }
+					panelId={ clientId }
+				/>
+			</InspectorControls>
+
+			<div { ...innerBlocksProps } />
+		</>
+	);
 }
diff --git a/src/blocks/directory-structure/item/directory/block.json b/src/blocks/directory-structure/item/directory/block.json
@@ -36,6 +36,18 @@
 			"background": false,
 			"link": true,
 			"text": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorScript": "file:./index.js"

diff --git a/src/blocks/directory-structure/item/file/block.json b/src/blocks/directory-structure/item/file/block.json
@@ -32,6 +32,18 @@
 			"background": false,
 			"link": true,
 			"text": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorScript": "file:./index.js"

diff --git a/src/blocks/directory-structure/save.js b/src/blocks/directory-structure/save.js
@@ -2,13 +2,19 @@ import classnames from 'classnames';
 
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function ( { className } ) {
+export default function ( { attributes, className } ) {
+	const { iconColor } = attributes;
+
 	const classes = classnames( 'smb-directory-structure', className );
 
+	const styles = {
+		'--smb-directory-structure--icon-color': iconColor || undefined,
+	};
+
 	return (
 		<div
 			{ ...useInnerBlocksProps.save(
-				useBlockProps.save( { className: classes } )
+				useBlockProps.save( { className: classes, style: styles } )
 			) }
 		/>
 	);

diff --git a/src/blocks/directory-structure/style.scss b/src/blocks/directory-structure/style.scss
@@ -4,7 +4,7 @@
 	--smb-directory-structure--background-color: var(--_lightest-color-gray);
 	--smb-directory-structure--padding: var(--_padding1);
 	--smb-directory-structure--gap: var(--_margin-2);
-	--smb-directory-structure--icon-color: currentColor;
+	--smb-directory-structure--icon-color: inherit;
 
 	background-color: var(--smb-directory-structure--background-color);
 	padding: var(--smb-directory-structure--padding);
@@ -16,8 +16,6 @@
 	}
 
 	&__item {
-		--smb-directory-structure--icon-color: currentColor;
-
 		p {
 			display: flex;
 			flex-wrap: nowrap;
@@ -30,6 +28,13 @@
 		width: auto;
 	}
 
+	.svg-inline--fa {
+		display: var(--fa-display, inline-block);
+		height: 1em;
+		overflow: visible;
+		vertical-align: -0.125em;
+	}
+
 	&__item__name {
 		margin-left: .5em;
 		white-space: nowrap;