From 7b1c4c2a157b51b019ee44d977749e57e8daea06 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sun, 20 Oct 2024 00:09:39 +0900 Subject: [PATCH 1/8] WIP --- src/controls/border-color-control.tsx | 11 +- src/controls/border-radius-control.tsx | 12 +- src/controls/border-spacing-control.tsx | 16 +- src/controls/border-style-control.tsx | 12 +- src/controls/border-width-control.tsx | 12 +- src/controls/color-control.tsx | 6 +- src/controls/padding-control.tsx | 7 +- src/editor.scss | 54 +---- src/elements/table-placeholder.tsx | 8 +- .../global-settings/setting-modal.tsx | 83 ++++--- src/settings/table-caption-settings.tsx | 77 +++--- src/settings/table-cell-settings.tsx | 146 ++++++----- src/settings/table-settings.tsx | 226 +++++++++--------- 13 files changed, 299 insertions(+), 371 deletions(-) diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx index e4448e1..cc05bd1 100644 --- a/src/controls/border-color-control.tsx +++ b/src/controls/border-color-control.tsx @@ -32,7 +32,6 @@ type Props = { id: string; label: string; help?: string; - className?: string; onChange: ( event: any ) => void; values: { top?: Property.BorderTopColor; @@ -55,7 +54,6 @@ export default function BorderColorControl( { id, label = __( 'Border color', 'flexible-table-block' ), help, - className, onChange, values: valuesProp, allowSides = true, @@ -90,8 +88,6 @@ export default function BorderColorControl( { const allInputValue: string | 0 = isMixed ? '' : values.top; - const classNames: string = clsx( 'ftb-border-color-control', className ); - const toggleLinked = () => setIsLinked( ! isLinked ); const handleOnReset = () => { @@ -126,7 +122,12 @@ export default function BorderColorControl( { }; return ( - +
{ label } diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-control.tsx index 4aba896..6a73917 100644 --- a/src/controls/border-radius-control.tsx +++ b/src/controls/border-radius-control.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import clsx from 'clsx'; import type { Property } from 'csstype'; /** @@ -37,7 +36,6 @@ type Props = { id: string; label: string; help?: string; - className?: string; onChange: ( event: any ) => void; values: { topLeft?: Property.BorderTopLeftRadius; @@ -56,7 +54,6 @@ export default function BorderRadiusControl( { id, label = __( 'Border radius', 'flexible-table-block' ), help, - className, onChange, values: valuesProp, allowSides = true, @@ -89,8 +86,6 @@ export default function BorderRadiusControl( { const allInputPlaceholder: string = isMixed ? __( 'Mixed', 'flexible-table-block' ) : ''; const allInputValue: string | 0 = isMixed ? '' : values.topLeft; - const classNames: string = clsx( 'ftb-border-radius-control', className ); - const toggleLinked = () => { setIsLinked( ! isLinked ); setCorner( undefined ); @@ -147,7 +142,12 @@ export default function BorderRadiusControl( { }; return ( - +
{ label } diff --git a/src/controls/border-spacing-control.tsx b/src/controls/border-spacing-control.tsx index 9726c15..59bb8ee 100644 --- a/src/controls/border-spacing-control.tsx +++ b/src/controls/border-spacing-control.tsx @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ @@ -34,7 +29,6 @@ type Props = { id: string; label: string; help?: string; - className?: string; onChange: ( event: any ) => void; values: typeof DEFAULT_VALUES; allowSides?: boolean; @@ -48,7 +42,6 @@ export default function BorderSpacingControl( { id, label = __( 'Border spacing', 'flexible-table-block' ), help, - className, onChange, values: valuesProp, allowSides = true, @@ -74,8 +67,6 @@ export default function BorderSpacingControl( { const allInputPlaceholder: string = isMixed ? __( 'Mixed', 'flexible-table-block' ) : ''; const allInputValue: string | 0 = isMixed ? '' : values.horizontal; - const classNames: string = clsx( 'ftb-border-spacing-control', className ); - const toggleLinked = () => { setIsLinked( ! isLinked ); }; @@ -124,7 +115,12 @@ export default function BorderSpacingControl( { }; return ( - +
{ label } diff --git a/src/controls/border-style-control.tsx b/src/controls/border-style-control.tsx index 60f5811..442c81b 100644 --- a/src/controls/border-style-control.tsx +++ b/src/controls/border-style-control.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import clsx from 'clsx'; import type { PropertyValue } from 'csstype'; /** @@ -35,7 +34,6 @@ type Props = { id: string; label: string; help?: string; - className?: string; onChange: ( event: any ) => void; values: { top?: PropertyValue< string >; @@ -53,7 +51,6 @@ export default function BorderStyleControl( { id, label = __( 'Border style', 'flexible-table-block' ), help, - className, onChange, values: valuesProp, allowSides = true, @@ -80,8 +77,6 @@ export default function BorderStyleControl( { const allInputValue: string | 0 = isMixed ? '' : values.top; - const classNames: string = clsx( 'ftb-border-style-control', className ); - const toggleLinked = () => setIsLinked( ! isLinked ); const handleOnReset = () => { @@ -119,7 +114,12 @@ export default function BorderStyleControl( { }; return ( - +
{ controlLabel } diff --git a/src/controls/border-width-control.tsx b/src/controls/border-width-control.tsx index b58f67c..4ba707a 100644 --- a/src/controls/border-width-control.tsx +++ b/src/controls/border-width-control.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import clsx from 'clsx'; import type { Property } from 'csstype'; /** @@ -37,7 +36,6 @@ type Props = { id: string; label: string; help?: string; - className?: string; onChange: ( event: any ) => void; values: { top?: Property.BorderTopWidth; @@ -56,7 +54,6 @@ export default function BorderWidthControl( { id, label = __( 'Border width', 'flexible-table-block' ), help, - className, onChange, values: valuesProp, allowSides = true, @@ -85,8 +82,6 @@ export default function BorderWidthControl( { const allInputPlaceholder: string = isMixed ? __( 'Mixed', 'flexible-table-block' ) : ''; const allInputValue: string | 0 = isMixed ? '' : values.top; - const classNames: string = clsx( 'ftb-border-width-control', className ); - const toggleLinked = () => { setIsLinked( ! isLinked ); setSide( undefined ); @@ -141,7 +136,12 @@ export default function BorderWidthControl( { }; return ( - +
{ label } diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index 450913f..2e837ca 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -26,7 +26,6 @@ type Props = { id: string; label: string | ReactElement; help?: string; - className?: string; onChange: ( event: any ) => void; colors?: { name: string; @@ -40,7 +39,6 @@ export default function ColorControl( { id, label = __( 'Color', 'flexible-table-block' ), help, - className, onChange, colors: colorsProp = [], value, @@ -57,8 +55,6 @@ export default function ColorControl( { const headingId: string = `${ id }-heading`; - const classNames: string = clsx( 'ftb-color-control', className ); - const handleOnReset = () => onChange( undefined ); const handleOnChange = ( inputValue: Property.Color | undefined ) => onChange( inputValue ); @@ -69,7 +65,7 @@ export default function ColorControl( { return ( - +
{ label } diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx index fc4d346..62e3af2 100644 --- a/src/controls/padding-control.tsx +++ b/src/controls/padding-control.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import clsx from 'clsx'; import type { Property } from 'csstype'; /** @@ -37,7 +36,6 @@ type Props = { id: string; label: string; help?: string; - className?: string; onChange: ( event: any ) => void; values: { top?: Property.PaddingTop; @@ -55,7 +53,6 @@ export default function PaddingControl( { id, label = __( 'Padding', 'flexible-table-block' ), help, - className, onChange, values: valuesProp, allowSides = true, @@ -81,8 +78,6 @@ export default function PaddingControl( { const allInputPlaceholder: string = isMixed ? __( 'Mixed', 'flexible-table-block' ) : ''; const allInputValue: string | 0 = isMixed ? '' : values.top; - const classNames: string = clsx( 'ftb-padding-control', className ); - const toggleLinked = () => { setIsLinked( ! isLinked ); setSide( undefined ); @@ -114,7 +109,7 @@ export default function PaddingControl( { }; return ( - +
{ label } diff --git a/src/editor.scss b/src/editor.scss index a6d55ac..56de166 100644 --- a/src/editor.scss +++ b/src/editor.scss @@ -204,7 +204,6 @@ .components-base-control__field { margin-right: 8px; - margin-bottom: 0; } } @@ -402,13 +401,6 @@ cursor: initial; } -// TODO: Remove this style and replace it with `__next40pxDefaultSize` prop -// when supported WordPress versions are greater than or equal to 6.5. -// See: https://github.com/WordPress/gutenberg/pull/55471 -.ftb-is-next-40px-default-size .components-text-control__input { - height: 40px; -} - // Setting Component Styles .ftb-button-group { display: block; @@ -424,11 +416,6 @@ } } -.ftb-reset-settings-control .components-base-control__field { - display: flex; - justify-content: flex-end; -} - .ftb-base-control-label { display: inline-block; margin-bottom: 8px; @@ -437,45 +424,10 @@ text-transform: uppercase; } -.ftb-base-control-row { - display: flex; - - .components-base-control__field { - margin-bottom: 0; - } - - > *:first-child { - margin-right: 16px; - } -} - -.ftb-base-control-field-row { - display: flex; - - > *:first-child { - margin-right: 16px; - } -} - .ftb-percent-group { - margin-top: 8px; -} - -.ftb-font-size-control, -.ftb-width-control { + margin-top: -8px; - .components-input-control.components-input-control { - max-width: 100px; - margin-bottom: 0; + &:has(+ .components-base-control) { + margin-bottom: 16px; } } - -.ftb-width-control .components-unit-control .components-unit-control__select { - background-color: transparent; - background-image: none; -} - -.ftb-line-height-control .components-text-control__input { - display: block; - max-width: 72px; -} diff --git a/src/elements/table-placeholder.tsx b/src/elements/table-placeholder.tsx index bbe5e50..a220526 100644 --- a/src/elements/table-placeholder.tsx +++ b/src/elements/table-placeholder.tsx @@ -155,31 +155,35 @@ export default function TablePlaceholder( { setAttributes }: Props ) { label={ __( 'Header section', 'flexible-table-block' ) } checked={ !! headerSection } onChange={ onToggleHeaderSection } + __nextHasNoMarginBottom />
- -
- - - - - - -
+ + + + + + + + + + + + + + + - - - -
- - - - - - -
- + + + + + + + + + + + + + + + + - - - { [ 25, 50, 75, 100 ].map( ( perWidth ) => { - const isPressed = cellStylesObj?.width === `${ perWidth }%`; - return ( - - ); - } ) } - - + { [ 25, 50, 75, 100 ].map( ( perWidth ) => { + const isPressed = cellStylesObj?.width === `${ perWidth }%`; + return ( + + ); + } ) } +
- +
{ __( 'Cell alignment', 'flexible-table-block' ) } -
+ ) ) } -
+
@@ -396,19 +391,19 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell ) ) } { selectedCellTags.length === 1 && ( <>
{ selectedCellTags.includes( 'th' ) && ( id attribute', 'flexible-table-block' ), { code: } @@ -416,10 +411,11 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell autoComplete="off" value={ targetCell.id || '' } onChange={ onChangeId } + __nextHasNoMarginBottom + __next40pxDefaultSize /> ) } headers attribute', 'flexible-table-block' ), { code: } @@ -427,9 +423,11 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell autoComplete="off" value={ targetCell.headers || '' } onChange={ onChangeHeaders } + __nextHasNoMarginBottom + __next40pxDefaultSize /> { selectedCellTags.includes( 'th' ) && ( - +
- - - + + + + +
- + - - { + const isPressed = tableStylesObj?.width === `${ perWidth }%`; + return ( + + ); + } ) } + - ); - } ) } - - - - + + + - - { + const isPressed = tableStylesObj?.maxWidth === `${ perWidth }%`; + return ( + + ); + } ) } + - ); - } ) } - - - - + + + - - - { [ 25, 50, 75, 100 ].map( ( perWidth ) => { - const isPressed = tableStylesObj?.minWidth === `${ perWidth }%`; - return ( - - ); - } ) } - - + { [ 25, 50, 75, 100 ].map( ( perWidth ) => { + const isPressed = tableStylesObj?.minWidth === `${ perWidth }%`; + return ( + + ); + } ) } +
Date: Sun, 20 Oct 2024 00:25:01 +0900 Subject: [PATCH 2/8] WIP --- src/controls/border-color-control.tsx | 14 ++++---------- src/controls/border-radius-control.tsx | 14 ++++---------- src/controls/border-spacing-control.tsx | 14 ++++---------- src/controls/border-style-control.tsx | 13 ++++--------- src/controls/border-width-control.tsx | 14 ++++---------- src/controls/color-control.tsx | 9 ++++----- src/controls/padding-control.tsx | 9 ++++----- src/settings/global-settings/setting-modal.tsx | 11 ----------- src/settings/table-caption-settings.tsx | 1 - src/settings/table-cell-settings.tsx | 7 ------- src/settings/table-settings.tsx | 6 ------ 11 files changed, 28 insertions(+), 84 deletions(-) diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx index cc05bd1..fcb019c 100644 --- a/src/controls/border-color-control.tsx +++ b/src/controls/border-color-control.tsx @@ -20,6 +20,7 @@ import { __experimentalText as Text, } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -29,7 +30,6 @@ import { SIDE_CONTROLS } from '../constants'; import type { SideValue } from '../BlockAttributes'; type Props = { - id: string; label: string; help?: string; onChange: ( event: any ) => void; @@ -51,7 +51,6 @@ const DEFAULT_VALUES = { }; export default function BorderColorControl( { - id, label = __( 'Border color', 'flexible-table-block' ), help, onChange, @@ -63,6 +62,8 @@ export default function BorderColorControl( { ...DEFAULT_VALUES, ...valuesProp, }; + const instanceId = useInstanceId( BorderColorControl, 'ftb-border-color-control' ); + const headingId = `${ instanceId }-heading`; const isMixed: boolean = allowSides && @@ -80,8 +81,6 @@ export default function BorderColorControl( { const [ isPickerOpen, setIsPickerOpen ] = useState< boolean >( false ); const [ pickerIndex, setPickerIndex ] = useState< number | undefined >( undefined ); - const headingId: string = `${ id }-heading`; - const linkedLabel: string = isLinked ? __( 'Unlink sides', 'flexible-table-block' ) : __( 'Link sides', 'flexible-table-block' ); @@ -122,12 +121,7 @@ export default function BorderColorControl( { }; return ( - +
{ label } diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-control.tsx index 6a73917..0b2a6a9 100644 --- a/src/controls/border-radius-control.tsx +++ b/src/controls/border-radius-control.tsx @@ -16,6 +16,7 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -33,7 +34,6 @@ const DEFAULT_VALUES = { }; type Props = { - id: string; label: string; help?: string; onChange: ( event: any ) => void; @@ -51,7 +51,6 @@ type ValuesKey = keyof typeof DEFAULT_VALUES; type MaxBorderRadiusKey = keyof typeof MAX_BORDER_RADIUS; export default function BorderRadiusControl( { - id, label = __( 'Border radius', 'flexible-table-block' ), help, onChange, @@ -63,6 +62,8 @@ export default function BorderRadiusControl( { ...DEFAULT_VALUES, ...valuesProp, }; + const instanceId = useInstanceId( BorderRadiusControl, 'ftb-border-radius-control' ); + const headingId = `${ instanceId }-heading`; const isMixed: boolean = allowSides && @@ -77,8 +78,6 @@ export default function BorderRadiusControl( { const [ isLinked, setIsLinked ] = useState< boolean >( true ); const [ corner, setCorner ] = useState< CornerValue | undefined >( undefined ); - const headingId: string = `${ id }-heading`; - const linkedLabel: string = isLinked ? __( 'Unlink sides', 'flexible-table-block' ) : __( 'Link sides', 'flexible-table-block' ); @@ -142,12 +141,7 @@ export default function BorderRadiusControl( { }; return ( - +
{ label } diff --git a/src/controls/border-spacing-control.tsx b/src/controls/border-spacing-control.tsx index 59bb8ee..dba7125 100644 --- a/src/controls/border-spacing-control.tsx +++ b/src/controls/border-spacing-control.tsx @@ -11,6 +11,7 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -26,7 +27,6 @@ const DEFAULT_VALUES = { }; type Props = { - id: string; label: string; help?: string; onChange: ( event: any ) => void; @@ -39,7 +39,6 @@ type ValuesKey = keyof typeof DEFAULT_VALUES; type MaxBorderSpacingKey = keyof typeof MAX_BORDER_SPACING; export default function BorderSpacingControl( { - id, label = __( 'Border spacing', 'flexible-table-block' ), help, onChange, @@ -51,6 +50,8 @@ export default function BorderSpacingControl( { ...DEFAULT_VALUES, ...valuesProp, }; + const instanceId = useInstanceId( BorderSpacingControl, 'ftb-border-spacing-control' ); + const headingId = `${ instanceId }-heading`; const isMixed: boolean = allowSides && ! ( values.horizontal === values.vertical ); @@ -58,8 +59,6 @@ export default function BorderSpacingControl( { const [ isLinked, setIsLinked ] = useState< boolean >( true ); - const headingId: string = `${ id }-heading`; - const linkedLabel: string = isLinked ? __( 'Unlink directions', 'flexible-table-block' ) : __( 'Link directions', 'flexible-table-block' ); @@ -115,12 +114,7 @@ export default function BorderSpacingControl( { }; return ( - +
{ label } diff --git a/src/controls/border-style-control.tsx b/src/controls/border-style-control.tsx index 442c81b..f1e6e87 100644 --- a/src/controls/border-style-control.tsx +++ b/src/controls/border-style-control.tsx @@ -16,6 +16,7 @@ import { __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, __experimentalText as Text, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -31,7 +32,6 @@ const DEFAULT_VALUES = { }; type Props = { - id: string; label: string; help?: string; onChange: ( event: any ) => void; @@ -48,7 +48,6 @@ type Props = { type ValuesKey = keyof typeof DEFAULT_VALUES; export default function BorderStyleControl( { - id, label = __( 'Border style', 'flexible-table-block' ), help, onChange, @@ -60,13 +59,14 @@ export default function BorderStyleControl( { ...DEFAULT_VALUES, ...valuesProp, }; + const instanceId = useInstanceId( BorderStyleControl, 'ftb-border-style-control' ); + const headingId = `${ instanceId }-heading`; const isMixed: boolean = allowSides && ! ( values.top === values.right && values.top === values.bottom && values.top === values.left ); const [ isLinked, setIsLinked ] = useState< boolean >( true ); - const headingId = `${ id }-heading`; const controlLabel: string = isMixed && isLinked ? `${ label } ${ __( '(Mixed)', 'flexible-table-block' ) }` : label; @@ -114,12 +114,7 @@ export default function BorderStyleControl( { }; return ( - +
{ controlLabel } diff --git a/src/controls/border-width-control.tsx b/src/controls/border-width-control.tsx index 4ba707a..46d5a81 100644 --- a/src/controls/border-width-control.tsx +++ b/src/controls/border-width-control.tsx @@ -16,6 +16,7 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -33,7 +34,6 @@ const DEFAULT_VALUES = { }; type Props = { - id: string; label: string; help?: string; onChange: ( event: any ) => void; @@ -51,7 +51,6 @@ type ValuesKey = keyof typeof DEFAULT_VALUES; type MaxBorderWidthKey = keyof typeof MAX_BORDER_WIDTH; export default function BorderWidthControl( { - id, label = __( 'Border width', 'flexible-table-block' ), help, onChange, @@ -63,6 +62,8 @@ export default function BorderWidthControl( { ...DEFAULT_VALUES, ...valuesProp, }; + const instanceId = useInstanceId( BorderWidthControl, 'ftb-border-width-control' ); + const headingId = `${ instanceId }-heading`; const isMixed: boolean = allowSides && @@ -73,8 +74,6 @@ export default function BorderWidthControl( { const [ isLinked, setIsLinked ] = useState< boolean >( true ); const [ side, setSide ] = useState< SideValue | undefined >( undefined ); - const headingId: string = `${ id }-heading`; - const linkedLabel: string = isLinked ? __( 'Unlink sides', 'flexible-table-block' ) : __( 'Link sides', 'flexible-table-block' ); @@ -136,12 +135,7 @@ export default function BorderWidthControl( { }; return ( - +
{ label } diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index 2e837ca..65feb87 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -21,9 +21,9 @@ import { __experimentalText as Text, } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useInstanceId } from '@wordpress/compose'; type Props = { - id: string; label: string | ReactElement; help?: string; onChange: ( event: any ) => void; @@ -36,7 +36,6 @@ type Props = { }; export default function ColorControl( { - id, label = __( 'Color', 'flexible-table-block' ), help, onChange, @@ -50,11 +49,11 @@ export default function ColorControl( { ).getSettings(); return settings?.colors ?? []; }, [] ); + const instanceId = useInstanceId( ColorControl, 'ftb-color-control' ); + const headingId = `${ instanceId }-heading`; const [ isPickerOpen, setIsPickerOpen ] = useState< boolean >( false ); - const headingId: string = `${ id }-heading`; - const handleOnReset = () => onChange( undefined ); const handleOnChange = ( inputValue: Property.Color | undefined ) => onChange( inputValue ); @@ -65,7 +64,7 @@ export default function ColorControl( { return ( - +
{ label } diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx index 62e3af2..143fd58 100644 --- a/src/controls/padding-control.tsx +++ b/src/controls/padding-control.tsx @@ -16,6 +16,7 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -33,7 +34,6 @@ const DEFAULT_VALUES = { }; type Props = { - id: string; label: string; help?: string; onChange: ( event: any ) => void; @@ -50,7 +50,6 @@ type Props = { type ValuesKey = keyof typeof DEFAULT_VALUES; export default function PaddingControl( { - id, label = __( 'Padding', 'flexible-table-block' ), help, onChange, @@ -59,6 +58,8 @@ export default function PaddingControl( { hasIndicator = true, }: Props ) { const values = { ...DEFAULT_VALUES, ...valuesProp }; + const instanceId = useInstanceId( PaddingControl, 'ftb-padding-control' ); + const headingId = `${ instanceId }-heading`; const isMixed: boolean = allowSides && @@ -69,8 +70,6 @@ export default function PaddingControl( { const [ isLinked, setIsLinked ] = useState< boolean >( true ); const [ side, setSide ] = useState< SideValue | undefined >( undefined ); - const headingId: string = `${ id }-heading`; - const linkedLabel: string = isLinked ? __( 'Unlink sides', 'flexible-table-block' ) : __( 'Link sides', 'flexible-table-block' ); @@ -109,7 +108,7 @@ export default function PaddingControl( { }; return ( - +
{ label } diff --git a/src/settings/global-settings/setting-modal.tsx b/src/settings/global-settings/setting-modal.tsx index a706053..75936c7 100644 --- a/src/settings/global-settings/setting-modal.tsx +++ b/src/settings/global-settings/setting-modal.tsx @@ -308,7 +308,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
th tag )', 'flexible-table-block' ), { code: } @@ -372,7 +369,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
td tag )', 'flexible-table-block' ), { code: } @@ -391,7 +387,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
th tag )', @@ -413,7 +408,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
td tag )', @@ -435,7 +429,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
{ @@ -451,7 +444,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
{ @@ -578,7 +568,6 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo <>

{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }

{ 'separate' === tableStylesObj?.borderCollapse && ( Date: Sun, 20 Oct 2024 01:55:14 +0900 Subject: [PATCH 3/8] WIP --- src/controls/border-color-control.tsx | 135 +++++++++++------------ src/controls/border-radius-control.tsx | 14 ++- src/controls/border-spacing-control.tsx | 74 +++++++------ src/controls/border-style-control.tsx | 80 +++++++------- src/controls/border-width-control.tsx | 14 ++- src/controls/color-control.tsx | 36 ++++--- src/controls/color-indicator-button.tsx | 47 ++++++++ src/controls/padding-control.tsx | 14 ++- src/controls/style.scss | 137 +++++------------------- src/controls/styles.tsx | 2 - 10 files changed, 260 insertions(+), 293 deletions(-) create mode 100644 src/controls/color-indicator-button.tsx diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx index fcb019c..5e2fdcf 100644 --- a/src/controls/border-color-control.tsx +++ b/src/controls/border-color-control.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import clsx from 'clsx'; import type { Property } from 'csstype'; /** @@ -15,8 +14,9 @@ import { BaseControl, Button, Popover, - ColorIndicator, ColorPalette, + __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalText as Text, } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; @@ -25,6 +25,7 @@ import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ +import ColorIndicatorButton from './color-indicator-button'; import { SideIndicatorControl } from './indicator-control'; import { SIDE_CONTROLS } from '../constants'; import type { SideValue } from '../BlockAttributes'; @@ -34,12 +35,11 @@ type Props = { help?: string; onChange: ( event: any ) => void; values: { - top?: Property.BorderTopColor; - right?: Property.BorderRightColor; - bottom?: Property.BorderBottomColor; - left?: Property.BorderLeftColor; + top?: Property.Color; + right?: Property.Color; + bottom?: Property.Color; + left?: Property.Color; }; - allowSides?: boolean; hasIndicator?: boolean; }; @@ -55,7 +55,6 @@ export default function BorderColorControl( { help, onChange, values: valuesProp, - allowSides = true, hasIndicator = true, }: Props ) { const values = { @@ -65,9 +64,11 @@ export default function BorderColorControl( { const instanceId = useInstanceId( BorderColorControl, 'ftb-border-color-control' ); const headingId = `${ instanceId }-heading`; - const isMixed: boolean = - allowSides && - ! ( values.top === values.right && values.top === values.bottom && values.top === values.left ); + const isMixed: boolean = ! ( + values.top === values.right && + values.top === values.bottom && + values.top === values.left + ); const colors = useSelect( ( select ) => { const settings = select( @@ -122,64 +123,52 @@ export default function BorderColorControl( { return ( -
-
- { label } + + + + { label } + -
-
-
- { ( isLinked || ! allowSides ) && ( -
- { hasIndicator && } - - { isPickerOpen && ! pickerIndex && ( - - - - ) } -
- ) } - { ! isLinked && - allowSides && - SIDE_CONTROLS.map( ( item, index ) => ( -
+ + + ) } + + ) : ( + + { SIDE_CONTROLS.map( ( item, index ) => ( + { hasIndicator && } - + isNone={ ! values[ item.value ] } + isTransparent={ values[ item.value ] === 'transparent' } + /> { isPickerOpen && pickerIndex === index && ( ) } -
+ ) ) } -
- { allowSides && ( -
-
+ -
+
{ hasIndicator && ( @@ -189,7 +193,7 @@ export default function BorderRadiusControl( { ) ) }
) } -
+ ); } diff --git a/src/controls/border-spacing-control.tsx b/src/controls/border-spacing-control.tsx index dba7125..0cd9101 100644 --- a/src/controls/border-spacing-control.tsx +++ b/src/controls/border-spacing-control.tsx @@ -8,6 +8,8 @@ import { BaseControl, Button, __experimentalText as Text, + __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; @@ -31,7 +33,6 @@ type Props = { help?: string; onChange: ( event: any ) => void; values: typeof DEFAULT_VALUES; - allowSides?: boolean; hasIndicator?: boolean; }; @@ -43,7 +44,6 @@ export default function BorderSpacingControl( { help, onChange, values: valuesProp, - allowSides = true, hasIndicator = true, }: Props ) { const values = { @@ -53,7 +53,7 @@ export default function BorderSpacingControl( { const instanceId = useInstanceId( BorderSpacingControl, 'ftb-border-spacing-control' ); const headingId = `${ instanceId }-heading`; - const isMixed: boolean = allowSides && ! ( values.horizontal === values.vertical ); + const isMixed: boolean = ! ( values.horizontal === values.vertical ); const borderSpacingUnits = useCustomUnits( { availableUnits: BORDER_SPACING_UNITS } ); @@ -115,32 +115,32 @@ export default function BorderSpacingControl( { return ( -
-
- { label } + + + + { label } + -
-
-
- { ( isLinked || ! allowSides ) && ( -
- { hasIndicator && } - -
- ) } - { ! isLinked && - allowSides && - DIRECTION_CONTROLS.map( ( item, index ) => ( -
+ + + { isLinked ? ( + + { hasIndicator && } + + + ) : ( + + { DIRECTION_CONTROLS.map( ( item, index ) => ( + { hasIndicator && } handleOnChange( value, item.value ) } size="__unstable-large" /> -
+ ) ) } -
- { allowSides && ( -
-
+ -
-
-
- { isLinked && ( -
- { hasIndicator && } - - { BORDER_STYLE_CONTROLS.map( ( borderStyle ) => ( - - ) ) } - -
- ) } - { ! isLinked && - SIDE_CONTROLS.map( ( item ) => ( -
+ + + { isLinked ? ( + + { hasIndicator && } + + { BORDER_STYLE_CONTROLS.map( ( borderStyle ) => ( + + ) ) } + + + ) : ( + + { SIDE_CONTROLS.map( ( item ) => ( + { hasIndicator && } ) ) } -
+ ) ) } -
+ + ) } { allowSides && (
-
+ + ); } diff --git a/src/controls/border-width-control.tsx b/src/controls/border-width-control.tsx index 46d5a81..d21272a 100644 --- a/src/controls/border-width-control.tsx +++ b/src/controls/border-width-control.tsx @@ -12,6 +12,8 @@ import { useState } from '@wordpress/element'; import { BaseControl, Button, + __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalText as Text, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, @@ -136,13 +138,15 @@ export default function BorderWidthControl( { return ( -
-
- { label } + + + + { label } + -
+
{ hasIndicator && ( @@ -182,7 +186,7 @@ export default function BorderWidthControl( { ) ) }
) } -
+ ); } diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index 65feb87..823bde4 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import clsx from 'clsx'; import type { Property } from 'csstype'; import type { ReactElement } from 'react'; @@ -15,14 +14,20 @@ import { BaseControl, Button, Popover, - ColorIndicator, ColorPalette, SlotFillProvider, + __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalText as Text, } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { useInstanceId } from '@wordpress/compose'; +/** + * Internal dependencies + */ +import ColorIndicatorButton from './color-indicator-button'; + type Props = { label: string | ReactElement; help?: string; @@ -65,26 +70,25 @@ export default function ColorControl( { return ( -
-
- { label } + + + + { label } + -
+
- + value={ value } + onClick={ handleOnPickerOpen } + isNone={ ! value } + isTransparent={ value === 'transparent' } + /> { isPickerOpen && (
-
+ { /* @ts-ignore Slot is not currently typed on Popover */ } diff --git a/src/controls/color-indicator-button.tsx b/src/controls/color-indicator-button.tsx new file mode 100644 index 0000000..adbb8e1 --- /dev/null +++ b/src/controls/color-indicator-button.tsx @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; +import type { Property } from 'csstype'; + +/** + * WordPress dependencies + */ +import { Button, ColorIndicator } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +type Props = { + label: string; + value?: Property.Color; + isNone: boolean; + isTransparent: boolean; + isMixed?: boolean; + onClick: () => void; +}; + +export default function ColorIndicatorButton( { + label, + value, + isNone, + isTransparent, + isMixed = false, + onClick, +}: Props ) { + return ( + + ); +} diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx index 143fd58..d3cacca 100644 --- a/src/controls/padding-control.tsx +++ b/src/controls/padding-control.tsx @@ -12,6 +12,8 @@ import { useState } from '@wordpress/element'; import { BaseControl, Button, + __experimentalHStack as HStack, + __experimentalVStack as VStack, __experimentalText as Text, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, @@ -109,13 +111,15 @@ export default function PaddingControl( { return ( -
-
- { label } + + + + { label } + -
+
{ hasIndicator && ( @@ -155,7 +159,7 @@ export default function PaddingControl( { ) ) }
) } -
+ ); } diff --git a/src/controls/style.scss b/src/controls/style.scss index 00efd0d..c031ad4 100644 --- a/src/controls/style.scss +++ b/src/controls/style.scss @@ -1,39 +1,3 @@ -// Header common styles. -.ftb-border-radius-control__header, -.ftb-border-width-control__header, -.ftb-border-style-control__header, -.ftb-border-spacing-control__header, -.ftb-border-color-control__header, -.ftb-padding-control__header, -.ftb-color-control__header { - display: flex; - gap: 8px; - align-items: center; - justify-content: space-between; - padding-bottom: 8px; - - .components-text { - font-size: 11px; - font-weight: 500; - line-height: 1.4; - text-transform: uppercase; - } -} - -// Linked button common styles. -.ftb-border-radius-control__header-linked-button, -.ftb-border-width-control__header-linked-button, -.ftb-border-style-control__header-linked-button, -.ftb-border-spacing-control__header-linked-button, -.ftb-border-color-control__header-linked-button, -.ftb-padding-control__header-linked-button, -.ftb-color-control__header-linked-button { - - &.components-button { - display: block; - } -} - // Header control styles. .ftb-border-radius-control__header-control, .ftb-border-width-control__header-control, @@ -119,51 +83,16 @@ } } -// Button controls styles. -.ftb-border-style-control__button-controls { - display: flex; - align-items: flex-start; - justify-content: space-between; - - .ftb-border-style-control__header-linked-button { - margin-top: 6px; - } -} - -.ftb-border-style-control__button-controls-row { - display: flex; - align-items: center; - - &:not(:first-child) { - padding-top: 8px; - } -} - // Controls styles. .ftb-border-color-control__controls, -.ftb-color-control__controls, -.ftb-border-spacing-control__controls { +.ftb-color-control__controls { display: flex; align-items: flex-start; justify-content: space-between; } -.ftb-border-spacing-control__controls { - - .ftb-border-spacing-control__header-linked-button { - margin-top: 8px; - } - - .components-unit-control-wrapper.components-unit-control-wrapper { - max-width: 104px; - margin-bottom: 0; - } -} - // Controls row styles. -.ftb-border-color-control__controls-row, -.ftb-color-control__controls-row, -.ftb-border-spacing-control__controls-row { +.ftb-color-control__controls-row { display: flex; align-items: center; @@ -172,19 +101,12 @@ } } -// Indicator styles. -.ftb-border-color-control__indicator, -.ftb-color-control__indicator { +// Color indicator button styles. +.ftb-color-indicator-button { position: relative; justify-content: center; height: 24px; - &:not(.ftb-border-color-control__indicator--mixed) { - width: 24px; - padding: 0; - border-radius: 50%; - } - .component-color-indicator { position: relative; flex: 1; @@ -192,43 +114,38 @@ margin: 0; border-radius: 50%; } -} - -.ftb-border-color-control__indicator--mixed, -.ftb-color-control__indicator--mixed { - padding-right: 4px; - padding-left: 4px; -} -.ftb-border-color-control__indicator--none, -.ftb-color-control__indicator--none, -.ftb-border-color-control__indicator--transparent, -.ftb-color-control__indicator--transparent { - - .component-color-indicator::before { - position: absolute; - top: 1px; - right: 1px; - bottom: 1px; - left: 1px; - content: ""; + &:not(.is-mixed) { + width: 24px; + padding: 0; border-radius: 50%; } -} -.ftb-border-color-control__indicator--none, -.ftb-color-control__indicator--none { + &.is-mixed { + padding-right: 4px; + padding-left: 4px; + } - .component-color-indicator::before { + &.is-none, + &.is-transparent { + + .component-color-indicator::before { + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + content: ""; + border-radius: 50%; + } + } + + &.is-none .component-color-indicator::before { background-color: #fff; background-image: linear-gradient(to left top, transparent 48%, #cc1818 calc(48% + 1px), #cc1818 calc(52% - 1px), transparent 52%); } -} - -.ftb-border-color-control__indicator--transparent, -.ftb-color-control__indicator--transparent { - .component-color-indicator::before { + &.is-transparent .component-color-indicator::before { z-index: -1; /* stylelint-disable-next-line function-url-quotes */ background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8V6H4v2h2zm2 0V6h2v2H8zm2 8H8v-2h2v2zm2 0v-2h2v2h-2zm0 2v-2h-2v2H8v2h2v-2h2zm2 0v2h-2v-2h2zm2 0h-2v-2h2v2z' fill='%23555D65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z' fill='%23555D65'/%3E%3Cpath d='M18 18v2h-2v-2h2z' fill='%23555D65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z' fill='%23555D65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z' fill='%23555D65'/%3E%3C/svg%3E"); diff --git a/src/controls/styles.tsx b/src/controls/styles.tsx index 5d0c704..f5d33ff 100644 --- a/src/controls/styles.tsx +++ b/src/controls/styles.tsx @@ -6,10 +6,8 @@ import styled from '@emotion/styled'; export const ViewBox = styled.span` position: relative; - display: block; width: 24px; height: 24px; - margin-right: 12px; `; const Side = styled.span< { isFocused: boolean } >` From 7f77b67450653b32da26276fa3b50b4a59292ab7 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sun, 20 Oct 2024 02:09:49 +0900 Subject: [PATCH 4/8] WIP --- src/controls/border-color-control.tsx | 41 +++++++++++------------ src/controls/border-radius-control.tsx | 21 ++++-------- src/controls/border-spacing-control.tsx | 6 ++-- src/controls/border-style-control.tsx | 1 - src/controls/color-control.tsx | 43 ++++++++++++------------- src/controls/padding-control.tsx | 36 +++++++++------------ src/controls/style.scss | 27 ---------------- 7 files changed, 62 insertions(+), 113 deletions(-) diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx index 5e2fdcf..a3750fc 100644 --- a/src/controls/border-color-control.tsx +++ b/src/controls/border-color-control.tsx @@ -15,6 +15,7 @@ import { Button, Popover, ColorPalette, + __experimentalSpacer as Spacer, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalText as Text, @@ -40,7 +41,6 @@ type Props = { bottom?: Property.Color; left?: Property.Color; }; - hasIndicator?: boolean; }; const DEFAULT_VALUES = { @@ -55,7 +55,6 @@ export default function BorderColorControl( { help, onChange, values: valuesProp, - hasIndicator = true, }: Props ) { const values = { ...DEFAULT_VALUES, @@ -135,7 +134,7 @@ export default function BorderColorControl( { { isLinked ? ( - { hasIndicator && } + { isPickerOpen && ! pickerIndex && ( - - + + + + ) } @@ -161,7 +159,7 @@ export default function BorderColorControl( { { SIDE_CONTROLS.map( ( item, index ) => ( - { hasIndicator && } + { isPickerOpen && pickerIndex === index && ( - - handleOnChange( value, item.value ) } - /> + + + handleOnChange( value, item.value ) } + /> + ) } diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-control.tsx index a058139..789c6c1 100644 --- a/src/controls/border-radius-control.tsx +++ b/src/controls/border-radius-control.tsx @@ -45,8 +45,6 @@ type Props = { bottomRight?: Property.BorderBottomRightRadius; bottomLeft?: Property.BorderBottomLeftRadius; }; - allowSides?: boolean; - hasIndicator?: boolean; }; type ValuesKey = keyof typeof DEFAULT_VALUES; @@ -57,8 +55,6 @@ export default function BorderRadiusControl( { help, onChange, values: valuesProp, - allowSides = true, - hasIndicator = true, }: Props ) { const values = { ...DEFAULT_VALUES, @@ -67,13 +63,11 @@ export default function BorderRadiusControl( { const instanceId = useInstanceId( BorderRadiusControl, 'ftb-border-radius-control' ); const headingId = `${ instanceId }-heading`; - const isMixed: boolean = - allowSides && - ! ( - values.topLeft === values.topRight && - values.topLeft === values.bottomRight && - values.topLeft === values.bottomLeft - ); + const isMixed: boolean = ! ( + values.topLeft === values.topRight && + values.topLeft === values.bottomRight && + values.topLeft === values.bottomLeft + ); const borderRadiusUnits = useCustomUnits( { availableUnits: BORDER_RADIUS_UNITS } ); @@ -154,9 +148,7 @@ export default function BorderRadiusControl( {
- { hasIndicator && ( - - ) } + { isLinked && ( ) } -
-
-
- - { isPickerOpen && ( - - - - ) } -
-
-
+ + { isPickerOpen && ( + + + + + + ) } { /* @ts-ignore Slot is not currently typed on Popover */ } diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx index d3cacca..2ea9766 100644 --- a/src/controls/padding-control.tsx +++ b/src/controls/padding-control.tsx @@ -45,8 +45,6 @@ type Props = { bottom?: Property.PaddingBottom; left?: Property.PaddingLeft; }; - allowSides?: boolean; - hasIndicator?: boolean; }; type ValuesKey = keyof typeof DEFAULT_VALUES; @@ -56,16 +54,16 @@ export default function PaddingControl( { help, onChange, values: valuesProp, - allowSides = true, - hasIndicator = true, }: Props ) { const values = { ...DEFAULT_VALUES, ...valuesProp }; const instanceId = useInstanceId( PaddingControl, 'ftb-padding-control' ); const headingId = `${ instanceId }-heading`; - const isMixed: boolean = - allowSides && - ! ( values.top === values.right && values.top === values.bottom && values.top === values.left ); + const isMixed: boolean = ! ( + values.top === values.right && + values.top === values.bottom && + values.top === values.left + ); const paddingUnits = useCustomUnits( { availableUnits: PADDING_UNITS } ); @@ -121,10 +119,8 @@ export default function PaddingControl( {
- { hasIndicator && ( - - ) } - { ( isLinked || ! allowSides ) && ( + + { isLinked && ( ) } - { allowSides && ( -
- { ! isLinked && allowSides && ( + { ! isLinked && (
{ SIDE_CONTROLS.map( ( item ) => ( Date: Sun, 20 Oct 2024 03:05:40 +0900 Subject: [PATCH 5/8] WIP --- src/controls/border-color-control.tsx | 23 +- src/controls/border-radius-control.tsx | 21 +- src/controls/border-spacing-control.tsx | 21 +- src/controls/border-style-control.tsx | 25 +- src/controls/border-width-control.tsx | 21 +- src/controls/color-control.tsx | 26 +- src/controls/padding-control.tsx | 21 +- src/settings/global-settings/help-modal.tsx | 126 +- src/settings/global-settings/index.tsx | 43 +- .../global-settings/setting-modal.tsx | 1075 +++++++++-------- src/settings/global-settings/style.scss | 124 +- 11 files changed, 755 insertions(+), 771 deletions(-) diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx index a3750fc..fb5e1db 100644 --- a/src/controls/border-color-control.tsx +++ b/src/controls/border-color-control.tsx @@ -15,6 +15,9 @@ import { Button, Popover, ColorPalette, + Flex, + FlexBlock, + FlexItem, __experimentalSpacer as Spacer, __experimentalHStack as HStack, __experimentalVStack as VStack, @@ -124,12 +127,18 @@ export default function BorderColorControl( { - - { label } - - + + + + { label } + + + + + + { isLinked ? ( @@ -169,7 +178,7 @@ export default function BorderColorControl( { /> { isPickerOpen && pickerIndex === index && ( - + - - { label } - - + + + + { label } + + + + + +
diff --git a/src/controls/border-spacing-control.tsx b/src/controls/border-spacing-control.tsx index c6ccbdc..cad12a1 100644 --- a/src/controls/border-spacing-control.tsx +++ b/src/controls/border-spacing-control.tsx @@ -7,6 +7,9 @@ import { useState } from '@wordpress/element'; import { BaseControl, Button, + Flex, + FlexBlock, + FlexItem, __experimentalText as Text, __experimentalHStack as HStack, __experimentalVStack as VStack, @@ -115,12 +118,18 @@ export default function BorderSpacingControl( { - - { label } - - + + + + { label } + + + + + + { isLinked ? ( diff --git a/src/controls/border-style-control.tsx b/src/controls/border-style-control.tsx index e276253..715e6fc 100644 --- a/src/controls/border-style-control.tsx +++ b/src/controls/border-style-control.tsx @@ -12,6 +12,9 @@ import { useState } from '@wordpress/element'; import { BaseControl, Button, + Flex, + FlexBlock, + FlexItem, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalToggleGroupControl as ToggleGroupControl, @@ -116,14 +119,20 @@ export default function BorderStyleControl( { - - { isMixed && isLinked - ? `${ label } ${ __( '(Mixed)', 'flexible-table-block' ) }` - : label } - - + + + + { isMixed && isLinked + ? `${ label } ${ __( '(Mixed)', 'flexible-table-block' ) }` + : label } + + + + + + { isLinked ? ( diff --git a/src/controls/border-width-control.tsx b/src/controls/border-width-control.tsx index d21272a..0a9de17 100644 --- a/src/controls/border-width-control.tsx +++ b/src/controls/border-width-control.tsx @@ -12,6 +12,9 @@ import { useState } from '@wordpress/element'; import { BaseControl, Button, + Flex, + FlexBlock, + FlexItem, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalText as Text, @@ -140,12 +143,18 @@ export default function BorderWidthControl( { - - { label } - - + + + + { label } + + + + + +
{ hasIndicator && ( diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index dec2eef..9916afd 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -16,8 +16,10 @@ import { Popover, ColorPalette, SlotFillProvider, + Flex, + FlexBlock, + FlexItem, __experimentalSpacer as Spacer, - __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalText as Text, } from '@wordpress/components'; @@ -72,14 +74,18 @@ export default function ColorControl( { - - - { label } - - - + + + + { label } + + + + + + { isPickerOpen && ( - + - - { label } - - + + + + { label } + + + + + +
diff --git a/src/settings/global-settings/help-modal.tsx b/src/settings/global-settings/help-modal.tsx index 50aae51..3029a24 100644 --- a/src/settings/global-settings/help-modal.tsx +++ b/src/settings/global-settings/help-modal.tsx @@ -8,7 +8,13 @@ import type { Dispatch, SetStateAction } from 'react'; */ import { __ } from '@wordpress/i18n'; import { createInterpolateElement } from '@wordpress/element'; -import { Modal, ExternalLink } from '@wordpress/components'; +import { + Modal, + ExternalLink, + __experimentalVStack as VStack, + __experimentalText as Text, + __experimentalHeading as Heading, +} from '@wordpress/components'; type Props = { setIsHelpModalOpen: Dispatch< SetStateAction< boolean > >; @@ -21,59 +27,71 @@ export default function HelpModal( { setIsHelpModalOpen }: Props ) { className="ftb-global-help-modal" onRequestClose={ () => setIsHelpModalOpen( false ) } > -

{ __( 'About default table style', 'flexible-table-block' ) }

-

- { __( - 'Flexible Table Block is a block that allows you to create tables in various styles. First of all, it is recommended to set the default style of the table from "Global Setting".', - 'flexible-table-block' - ) } -

-

{ __( 'Select multiple cells', 'flexible-table-block' ) }

-

- { createInterpolateElement( - __( - 'Hold Ctrl key to select multiple cells or hold Shift key to select the range. Selecting multiple cells is used to merge cells or to change styles of multiple cells.', - 'flexible-table-block' - ), - { code: } - ) } -

-

{ __( 'About scroll table', 'flexible-table-block' ) }

-

- { __( - 'If table scrolling is enabled, set "Table Width" or "Table Min Width" larger than the content width.', - 'flexible-table-block' - ) } -

-

{ __( 'About accessibility', 'flexible-table-block' ) }

-

- { createInterpolateElement( - __( - 'You can tell screenreaders exactly by properly defining id, headers, and scope attributes for each cell.', - 'flexible-table-block' - ), - { code: } - ) } -

-

- { createInterpolateElement( - __( - 'Refer to this page for the specifications of each attribute.', - 'flexible-table-block' - ), - { - Link: ( - // @ts-ignore - - ), - } - ) } -

+ + + + { __( 'About default table style', 'flexible-table-block' ) } + + + { __( + 'Flexible Table Block is a block that allows you to create tables in various styles. First of all, it is recommended to set the default style of the table from "Global Setting".', + 'flexible-table-block' + ) } + + + + { __( 'Select multiple cells', 'flexible-table-block' ) } + + { createInterpolateElement( + __( + 'Hold Ctrl key to select multiple cells or hold Shift key to select the range. Selecting multiple cells is used to merge cells or to change styles of multiple cells.', + 'flexible-table-block' + ), + { code: } + ) } + + + + { __( 'About scroll table', 'flexible-table-block' ) } + + { __( + 'If table scrolling is enabled, set "Table Width" or "Table Min Width" larger than the content width.', + 'flexible-table-block' + ) } + + + + { __( 'About accessibility', 'flexible-table-block' ) } + + { createInterpolateElement( + __( + 'You can tell screenreaders exactly by properly defining id, headers, and scope attributes for each cell.', + 'flexible-table-block' + ), + { code: } + ) } + + + { createInterpolateElement( + __( + 'Refer to this page for the specifications of each attribute.', + 'flexible-table-block' + ), + { + Link: ( + // @ts-ignore + + ), + } + ) } + + + ); } diff --git a/src/settings/global-settings/index.tsx b/src/settings/global-settings/index.tsx index 6c4f464..418e6e4 100644 --- a/src/settings/global-settings/index.tsx +++ b/src/settings/global-settings/index.tsx @@ -6,7 +6,12 @@ import { useState, useEffect } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; // @ts-ignore: has no exported member import { store as coreStore } from '@wordpress/core-data'; -import { Button, Spinner } from '@wordpress/components'; +import { + Button, + Spinner, + __experimentalSpacer as Spacer, + __experimentalHStack as HStack, +} from '@wordpress/components'; import { cog, help } from '@wordpress/icons'; /** @@ -45,27 +50,29 @@ export default function GlobalSettings() { return ( <> -
- - { ! isGlobalSettingLoaded && } - { isGlobalSettingLoaded && showGlobalSetting && ( + + - ) } -
+ { ! isGlobalSettingLoaded && } + { isGlobalSettingLoaded && showGlobalSetting && ( + + ) } + + { isHelpModalOpen && } { options && isSettingModalOpen && ( isAdministrator || options?.show_global_setting ) && ( setIsSettingModalOpen( false ) } > - { isWaiting && ( -
- -
- ) } - - { ( { name } ) => ( - <> - { name === 'table' && ( - <> -

{ __( 'Default table styles', 'flexible-table-block' ) }

-
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - table_width: sanitizeUnitValue( value ), - }, - } ); - } } - size="__unstable-large" - __unstableInputWidth="100px" - /> + + { isWaiting && ( + + + + ) } + + { ( { name } ) => ( + <> + { name === 'table' && ( + + + { __( 'Default table styles', 'flexible-table-block' ) } + +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + table_width: sanitizeUnitValue( value ), + }, + } ); + } } + size="__unstable-large" + __unstableInputWidth="100px" + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + table_max_width: sanitizeUnitValue( value ), + }, + } ); + } } + size="__unstable-large" + __unstableInputWidth="100px" + /> +
+
+ { + const isAllowedValue = ( + _value: any + ): _value is Properties[ 'borderCollapse' ] => { + return ( + ! value || + BORDER_COLLAPSE_CONTROLS.some( + ( control ) => control.value === _value + ) + ); + }; + if ( isAllowedValue( value ) ) { + const newValue = + currentOptions?.block_style?.table_border_collapse === value + ? undefined + : value; + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + table_border_collapse: newValue, + }, + } ); + } + } } + > + { BORDER_COLLAPSE_CONTROLS.map( ( { icon, label, value } ) => ( + + ) ) } + +
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - table_max_width: sanitizeUnitValue( value ), - }, - } ); - } } - size="__unstable-large" - __unstableInputWidth="100px" - /> + + { __( 'Default striped table styles', 'flexible-table-block' ) } + +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + row_odd_color: value, + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + row_even_color: value, + }, + } ); + } } + /> +
-
- { - const isAllowedValue = ( - _value: any - ): _value is Properties[ 'borderCollapse' ] => { - return ( - ! value || - BORDER_COLLAPSE_CONTROLS.some( - ( control ) => control.value === _value - ) - ); - }; - if ( isAllowedValue( value ) ) { + + ) } + { name === 'cell' && ( + + + { __( 'Default cell styles', 'flexible-table-block' ) } + +
+
+ th tag )', 'flexible-table-block' ), + { code: } + ) } + value={ currentOptions.block_style?.cell_text_color_th } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_text_color_th: value, + }, + } ); + } } + /> +
+
+ td tag )', 'flexible-table-block' ), + { code: } + ) } + value={ currentOptions.block_style?.cell_text_color_td } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_text_color_td: value, + }, + } ); + } } + /> +
+
+ th tag )', + 'flexible-table-block' + ), + { code: } + ) } + value={ currentOptions.block_style?.cell_background_color_th } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_background_color_th: value, + }, + } ); + } } + /> +
+
+ td tag )', + 'flexible-table-block' + ), + { code: } + ) } + value={ currentOptions.block_style?.cell_background_color_td } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_background_color_td: value, + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_padding: cleanEmptyObject( values ), + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_border_width: sanitizeUnitValue( value.top ), + }, + } ); + } } + /> +
+
+ { + const newValue = + currentOptions?.block_style?.cell_border_style === value.top + ? undefined + : value.top; + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_border_style: newValue, + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_border_color: value, + }, + } ); + } } + /> +
+
+ { + if ( typeof value !== 'string' && value !== undefined ) { + return; + } const newValue = - currentOptions?.block_style?.table_border_collapse === value + currentOptions?.block_style?.cell_text_align === value ? undefined : value; setCurrentOptions( { ...currentOptions, block_style: { ...currentOptions.block_style, - table_border_collapse: newValue, + cell_text_align: newValue, }, } ); - } - } } - > - { BORDER_COLLAPSE_CONTROLS.map( ( { icon, label, value } ) => ( - - ) ) } - + } } + > + { TEXT_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( + + ) ) } + +
+
+ { + if ( typeof value !== 'string' && value !== undefined ) { + return; + } + const newValue = + currentOptions?.block_style?.cell_vertical_align === value + ? undefined + : value; + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_vertical_align: newValue, + }, + } ); + } } + > + { VERTICAL_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( + + ) ) } + +
-
-

{ __( 'Default striped table styles', 'flexible-table-block' ) }

-
-
- + ) } + { name === 'responsive' && ( + + + { __( 'Responsive breakpoint (px)', 'flexible-table-block' ) } + + { + setCurrentOptions( { + ...currentOptions, + breakpoint: value ? value : DEFAULT_RESPONSIVE_BREAKPOINT, + } ); + } } + __next40pxDefaultSize + __nextHasNoMarginBottom + /> + + ) } + { name === 'options' && ( + + { + setCurrentOptions( { + ...currentOptions, + show_label_on_section: value, + } ); + } } + __nextHasNoMarginBottom + /> + { + setCurrentOptions( { + ...currentOptions, + show_control_button: value, + } ); + } } + __nextHasNoMarginBottom + /> + { ( currentOptions.show_label_on_section || + currentOptions.show_control_button ) && ( + { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - row_odd_color: value, - }, - } ); - } } - /> -
-
- { setCurrentOptions( { ...currentOptions, - block_style: { - ...currentOptions.block_style, - row_even_color: value, - }, + focus_control_button: value, } ); } } - /> -
-
- - ) } - { name === 'cell' && ( - <> -

{ __( 'Default cell styles', 'flexible-table-block' ) }

-
-
- th tag )', 'flexible-table-block' ), - { code: } - ) } - value={ currentOptions.block_style?.cell_text_color_th } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_text_color_th: value, - }, - } ); - } } - /> -
-
- td tag )', 'flexible-table-block' ), - { code: } - ) } - value={ currentOptions.block_style?.cell_text_color_td } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_text_color_td: value, - }, - } ); - } } - /> -
-
- th tag )', - 'flexible-table-block' - ), - { code: } - ) } - value={ currentOptions.block_style?.cell_background_color_th } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_background_color_th: value, - }, - } ); - } } - /> -
-
- td tag )', - 'flexible-table-block' - ), - { code: } - ) } - value={ currentOptions.block_style?.cell_background_color_td } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_background_color_td: value, - }, - } ); - } } - /> -
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_padding: cleanEmptyObject( values ), - }, - } ); - } } - /> -
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_border_width: sanitizeUnitValue( value.top ), - }, - } ); - } } - /> -
-
- { - const newValue = - currentOptions?.block_style?.cell_border_style === value.top - ? undefined - : value.top; - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_border_style: newValue, - }, - } ); - } } - /> -
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_border_color: value, - }, - } ); - } } - /> -
-
- { - if ( typeof value !== 'string' && value !== undefined ) { - return; - } - const newValue = - currentOptions?.block_style?.cell_text_align === value - ? undefined - : value; - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_text_align: newValue, - }, - } ); - } } - > - { TEXT_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( - - ) ) } - -
-
- { - if ( typeof value !== 'string' && value !== undefined ) { - return; - } - const newValue = - currentOptions?.block_style?.cell_vertical_align === value - ? undefined - : value; - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_vertical_align: newValue, - }, - } ); - } } - > - { VERTICAL_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( - - ) ) } - -
-
- - ) } - { name === 'responsive' && ( - <> -

{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }

- { - setCurrentOptions( { - ...currentOptions, - breakpoint: value ? value : DEFAULT_RESPONSIVE_BREAKPOINT, - } ); - } } - __next40pxDefaultSize - __nextHasNoMarginBottom - /> - - ) } - { name === 'options' && ( - <> - { - setCurrentOptions( { - ...currentOptions, - show_label_on_section: value, - } ); - } } - __nextHasNoMarginBottom - /> - ) } - checked={ !! currentOptions.show_control_button } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - show_control_button: value, - } ); - } } - __nextHasNoMarginBottom - /> - { ( currentOptions.show_label_on_section || - currentOptions.show_control_button ) && ( { setCurrentOptions( { ...currentOptions, - focus_control_button: value, + show_dot_on_th: value, } ); } } __nextHasNoMarginBottom /> - ) } - { - setCurrentOptions( { - ...currentOptions, - show_dot_on_th: value, - } ); - } } - __nextHasNoMarginBottom - /> - { - setCurrentOptions( { - ...currentOptions, - tab_move: value, - } ); - } } - __nextHasNoMarginBottom - /> - { - setCurrentOptions( { - ...currentOptions, - merge_content: value, - } ); - } } - __nextHasNoMarginBottom - /> - { isAdministrator && ( { + setCurrentOptions( { + ...currentOptions, + tab_move: value, + } ); + } } + __nextHasNoMarginBottom + /> + { setCurrentOptions( { ...currentOptions, - show_global_setting: value, + merge_content: value, } ); } } __nextHasNoMarginBottom /> - ) } - - ) } - - ) } - - { noticeInfo?.status && noticeInfo?.message && ( - { - setNoticeInfo( undefined ); - focusModal(); - } } - > - { noticeInfo.message } - - ) } -
- - - -
- + { isAdministrator && ( + { + setCurrentOptions( { + ...currentOptions, + show_global_setting: value, + } ); + } } + __nextHasNoMarginBottom + /> + ) } + + ) } + ) } - -
+ + { noticeInfo?.status && noticeInfo?.message && ( + { + setNoticeInfo( undefined ); + focusModal(); + } } + > + { noticeInfo.message } + + ) } + + + + + + + + + ) } + + + { /* @ts-ignore Slot is not currently typed on Popover */ } diff --git a/src/settings/global-settings/style.scss b/src/settings/global-settings/style.scss index 9e133eb..8b327eb 100644 --- a/src/settings/global-settings/style.scss +++ b/src/settings/global-settings/style.scss @@ -1,15 +1,3 @@ -.ftb-global-setting { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px; - border-top: 1px solid #e0e0e0; - - .components-spinner { - margin: 0; - } -} - .ftb-global-setting-modal { @media (min-width: 600px) { @@ -24,46 +12,6 @@ @media (min-width: 960px) { height: 75%; } - - h2 { - margin-top: 2em; - margin-bottom: 1em; - font-size: 0.9rem; - - &:first-of-type { - margin-top: 0; - } - } - - hr { - margin: 1em 0; - } - - .components-modal__content { - padding-bottom: 40px; - margin-bottom: 60px; - } - - .components-toggle-control { - margin-bottom: 16px; - - .components-base-control__help { - margin-top: 0; - margin-left: 48px; - } - } - - .components-range-control__mark { - background-color: #d7dade; - } - - .components-range-control__mark-label { - color: currentColor; - } - - .components-disabled label { - opacity: 0.3; - } } .ftb-global-setting-modal__tab-panel { @@ -126,55 +74,22 @@ padding: 8px; border: 1px var(--wp-admin-theme-color) solid; - .components-base-control__field { - margin-bottom: 0; - } - @media screen and (max-width: 782px) { width: 100%; } } -.ftb-global-setting-modal__styles-color { - position: relative; - padding-left: 28px; - - .component-color-indicator { - position: absolute; - top: 50%; - left: 0; - margin-top: -8px; - margin-left: 0; - } -} - .ftb-global-setting-modal__buttons { position: absolute; bottom: 0; left: 0; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 60px; + height: 56px; padding: 0 24px; background: #fff; } .ftb-global-setting-modal__confirm-popover .components-popover__content { min-width: 150px; - padding: 8px; - - p { - margin: 0 0 1em; - } -} - -.ftb-global-setting-modal__confirm-popover-buttons { - display: flex; - gap: 8px; - justify-content: space-between; - white-space: nowrap; } .ftb-global-setting-modal__notice { @@ -183,50 +98,15 @@ bottom: 60px; left: 24px; z-index: 6; - padding-top: 0; - padding-bottom: 0; - margin: 0; - - &.is-dismissible { - padding-right: 8px; - - svg { - width: 16px; - height: 16px; - } - } - - .components-button { - align-self: center; - } } .ftb-global-setting-modal__loading { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; z-index: 5; - display: flex; - align-items: center; - justify-content: center; background: rgba(0, 0, 0, 0.2); } .ftb-global-help-modal { max-width: 600px; - - h2 { - margin: 1.5em 0 0.5em; - font-size: 0.9rem; - } - - p { - margin: 0 0 1em; - } - - hr { - margin: 1.5em 0; - } } From 63b98fe63dd0f7a963687608e942f1ae2385ad35 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sun, 20 Oct 2024 14:09:02 +0900 Subject: [PATCH 6/8] WIP --- src/controls/border-radius-control.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-control.tsx index 1ecd217..2f48958 100644 --- a/src/controls/border-radius-control.tsx +++ b/src/controls/border-radius-control.tsx @@ -65,7 +65,7 @@ export default function BorderRadiusControl( { const instanceId = useInstanceId( BorderRadiusControl, 'ftb-border-radius-control' ); const headingId = `${ instanceId }-heading`; - const isMixed: boolean = ! ( + const isMixed = ! ( values.topLeft === values.topRight && values.topLeft === values.bottomRight && values.topLeft === values.bottomLeft From a957a89263f4d7a8e539556f4d3fb97bc745d835 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sun, 20 Oct 2024 14:17:24 +0900 Subject: [PATCH 7/8] Remove popover slot --- src/controls/color-control.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index 8d41951..e8d7ba6 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -102,8 +102,6 @@ export default function ColorControl( { ) } - { /* @ts-ignore Slot is not currently typed on Popover */ } - ); } From 7b3568a105f5c193cc8101dbee6c37f19c577db0 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sun, 20 Oct 2024 18:31:06 +0900 Subject: [PATCH 8/8] Refactor PaddingControl with wordpress components --- src/controls/padding-control.tsx | 76 ++++++++++++++++++++------------ src/controls/style.scss | 51 --------------------- 2 files changed, 49 insertions(+), 78 deletions(-) diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx index 8403a70..f84f824 100644 --- a/src/controls/padding-control.tsx +++ b/src/controls/padding-control.tsx @@ -15,6 +15,8 @@ import { Flex, FlexBlock, FlexItem, + __experimentalGrid as Grid, + __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalText as Text, __experimentalUnitControl as UnitControl, @@ -122,40 +124,60 @@ export default function PaddingControl( { -
- - { isLinked && ( - - ) } + + + + { isLinked && ( +
+ +
+ ) } +
+ { ! isLinked && ( -
- { SIDE_CONTROLS.map( ( item ) => ( - handleOnFocus( item.value ) } - onChange={ ( value ) => handleOnChange( value, item.value ) } - size="__unstable-large" - /> - ) ) } -
+ + { SIDE_CONTROLS.map( ( item ) => { + const gridStyles = ( value: SideValue ) => { + if ( value === 'top' || value === 'bottom' ) { + return { + gridColumn: 'span 2', + margin: '0 auto', + }; + } + if ( value === 'right' ) { + return { gridColumn: 2, display: 'flex', justifyContent: 'flex-end' }; + } + return { gridRow: 2 }; + }; + return ( +
+ handleOnFocus( item.value ) } + onChange={ ( value ) => handleOnChange( value, item.value ) } + size="__unstable-large" + __unstableInputWidth="110px" + /> +
+ ); + } ) } + ) } diff --git a/src/controls/style.scss b/src/controls/style.scss index a2a7c04..a50670e 100644 --- a/src/controls/style.scss +++ b/src/controls/style.scss @@ -1,54 +1,3 @@ -// Header control styles. -.ftb-padding-control__header-control { - display: flex; - align-items: center; - justify-content: space-between; - min-height: 40px !important; - - .components-unit-control-wrapper { - max-width: 104px; - margin-right: auto; - margin-bottom: 0; - } -} - -// Input controls styles. -.ftb-padding-control__input-controls { - display: grid; - gap: 8px; - grid-template-columns: repeat(2, 1fr); - padding-top: 8px; - - .components-unit-control-wrapper.components-unit-control-wrapper { - margin-bottom: 0; - } - - .components-unit-control-wrapper { - - &:nth-child(1) { - margin: 0 auto; - max-width: 116px; - grid-column: span 2; - } - - &:nth-child(2) { - grid-row: 2; - grid-column: 2; - } - - &:nth-child(3) { - margin: 0 auto; - max-width: 116px; - grid-column: span 2; - } - - &:nth-child(4) { - grid-row: 2; - grid-column: 1; - } - } -} - // Color indicator button styles. .ftb-color-indicator-button { position: relative;