From 1a6af750388efd587afcdb85fd5e6fcf3fed420b Mon Sep 17 00:00:00 2001 From: inc2734 Date: Thu, 4 Jul 2024 21:24:43 +0900 Subject: [PATCH] fix #803 --- src/blocks/directory-structure/block.json | 33 ++++++++++++++++- src/blocks/directory-structure/edit.js | 37 ++++++++++++++++++- .../item/directory/block.json | 12 ++++++ .../directory-structure/item/file/block.json | 12 ++++++ src/blocks/directory-structure/save.js | 10 ++++- src/blocks/directory-structure/style.scss | 11 ++++-- 6 files changed, 106 insertions(+), 9 deletions(-) diff --git a/src/blocks/directory-structure/block.json b/src/blocks/directory-structure/block.json index d4fabe72..2c270ef8 100644 --- 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 index ca419865..f5c7dcc5 100644 --- 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
; + return ( + <> + + + setAttributes( { + iconColor: value, + } ), + label: __( 'Icon color', 'snow-monkey-blocks' ), + }, + ] } + __experimentalIsRenderedInSidebar + { ...useMultipleOriginColorsAndGradients() } + panelId={ clientId } + /> + + +
+ + ); } diff --git a/src/blocks/directory-structure/item/directory/block.json b/src/blocks/directory-structure/item/directory/block.json index 9c85d291..a94eecfb 100644 --- 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 index 0c9b1db9..2904b910 100644 --- 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 index 2de7bf12..968aeac1 100644 --- 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 (
); diff --git a/src/blocks/directory-structure/style.scss b/src/blocks/directory-structure/style.scss index 4690f312..3168592b 100644 --- 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;