From bd68408e254279f6fc45ad3a341df90ba0da9da1 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 May 2022 19:08:55 +0200 Subject: [PATCH 1/5] `BorderBoxControl`: fix right border alignment on tablet/mobile viewports --- .../border-box-control-split-controls/component.tsx | 2 ++ .../border-box-control-split-controls/hook.ts | 11 ++++++++++- packages/components/src/border-box-control/styles.ts | 4 ++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx index af6249f7b4ca95..5d83b61424206d 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx +++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx @@ -29,6 +29,7 @@ const BorderBoxControlSplitControls = ( onChange, popoverPlacement, popoverOffset, + rightAlignedClassName, value, __experimentalHasMultipleOrigins, __experimentalIsRenderedInSidebar, @@ -80,6 +81,7 @@ const BorderBoxControlSplitControls = ( { ...sharedBorderControlProps } /> onChange( newBorder, 'right' ) } diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index d7e018d7580ea0..e3d14c827c1b6a 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -30,5 +30,14 @@ export function useBorderBoxControlSplitControls( return cx( styles.CenteredBorderControl, className ); }, [] ); - return { ...otherProps, centeredClassName, className: classes }; + const rightAlignedClassName = useMemo( () => { + return cx( styles.RightBorderControl, className ); + }, [ cx, className, rtl.watch() ] ); + + return { + ...otherProps, + centeredClassName, + className: classes, + rightAlignedClassName, + }; } diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts index eb9a141505e77c..a062df6c33fde2 100644 --- a/packages/components/src/border-box-control/styles.ts +++ b/packages/components/src/border-box-control/styles.ts @@ -74,3 +74,7 @@ export const CenteredBorderControl = css` grid-column: span 2; margin: 0 auto; `; + +export const RightBorderControl = css` + ${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() } +`; From 1b04d6b8bd8bd74c8b415cbe1cca1ad99fa121fb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 May 2022 19:11:30 +0200 Subject: [PATCH 2/5] Fix useMemo missing dependencies --- .../border-box-control-split-controls/hook.ts | 4 ++-- .../border-box-control/border-box-control-visualizer/hook.ts | 2 +- .../src/border-box-control/border-box-control/hook.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index e3d14c827c1b6a..616b3d366d08ff 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -24,11 +24,11 @@ export function useBorderBoxControlSplitControls( const cx = useCx(); const classes = useMemo( () => { return cx( styles.BorderBoxControlSplitControls, className ); - }, [ className, rtl.watch() ] ); + }, [ cx, className, rtl.watch() ] ); const centeredClassName = useMemo( () => { return cx( styles.CenteredBorderControl, className ); - }, [] ); + }, [ cx, className ] ); const rightAlignedClassName = useMemo( () => { return cx( styles.RightBorderControl, className ); diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts index f1b91f3b943b92..d400250118d2e4 100644 --- a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts @@ -29,7 +29,7 @@ export function useBorderBoxControlVisualizer( styles.BorderBoxControlVisualizer( value, __next36pxDefaultSize ), className ); - }, [ className, value, __next36pxDefaultSize, rtl.watch() ] ); + }, [ cx, className, value, __next36pxDefaultSize, rtl.watch() ] ); return { ...otherProps, className: classes, value }; } diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts index f0071f0e87d29e..67e6b98d542a6d 100644 --- a/packages/components/src/border-box-control/border-box-control/hook.ts +++ b/packages/components/src/border-box-control/border-box-control/hook.ts @@ -98,11 +98,11 @@ export function useBorderBoxControl( const cx = useCx(); const classes = useMemo( () => { return cx( styles.BorderBoxControl, className ); - }, [ className ] ); + }, [ cx, className ] ); const linkedControlClassName = useMemo( () => { return cx( styles.LinkedBorderControl ); - }, [] ); + }, [ cx ] ); return { ...otherProps, From 8930b9f9dc17677bd48b63fe60afadf0db7dd6ef Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 May 2022 19:37:57 +0200 Subject: [PATCH 3/5] Make RTL styles dynamic functions --- .../border-box-control-split-controls/hook.ts | 4 ++-- .../border-box-control-visualizer/hook.ts | 2 +- packages/components/src/border-box-control/styles.ts | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index 616b3d366d08ff..1d1393c49291e2 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -23,7 +23,7 @@ export function useBorderBoxControlSplitControls( // Generate class names. const cx = useCx(); const classes = useMemo( () => { - return cx( styles.BorderBoxControlSplitControls, className ); + return cx( styles.borderBoxControlSplitControls(), className ); }, [ cx, className, rtl.watch() ] ); const centeredClassName = useMemo( () => { @@ -31,7 +31,7 @@ export function useBorderBoxControlSplitControls( }, [ cx, className ] ); const rightAlignedClassName = useMemo( () => { - return cx( styles.RightBorderControl, className ); + return cx( styles.rightBorderControl(), className ); }, [ cx, className, rtl.watch() ] ); return { diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts index d400250118d2e4..afa42be5543cbe 100644 --- a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts @@ -26,7 +26,7 @@ export function useBorderBoxControlVisualizer( const cx = useCx(); const classes = useMemo( () => { return cx( - styles.BorderBoxControlVisualizer( value, __next36pxDefaultSize ), + styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ), className ); }, [ cx, className, value, __next36pxDefaultSize, rtl.watch() ] ); diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts index a062df6c33fde2..5c49c51ae6ca51 100644 --- a/packages/components/src/border-box-control/styles.ts +++ b/packages/components/src/border-box-control/styles.ts @@ -43,7 +43,7 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => { return `${ color } ${ borderStyle } ${ clampedWidth }`; }; -export const BorderBoxControlVisualizer = ( +export const borderBoxControlVisualizer = ( borders?: Borders, __next36pxDefaultSize?: boolean ) => { @@ -64,7 +64,7 @@ export const BorderBoxControlVisualizer = ( `; }; -export const BorderBoxControlSplitControls = css` +export const borderBoxControlSplitControls = () => css` position: relative; flex: 1; ${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() } @@ -75,6 +75,6 @@ export const CenteredBorderControl = css` margin: 0 auto; `; -export const RightBorderControl = css` +export const rightBorderControl = () => css` ${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() } `; From 69ae1a8d64b12cd5207676875f967bed61430546 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 May 2022 19:44:54 +0200 Subject: [PATCH 4/5] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e64c24c6b7bbc6..392916944d0f6c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `CheckboxControl`: Add unit tests ([#41165](https://github.com/WordPress/gutenberg/pull/41165)). +### Bug fix + +- `BorderBoxControl`: fix some layout misalignments, especially for RTL users ([#41254](https://github.com/WordPress/gutenberg/pull/41254)). + ## 19.11.0 (2022-05-18) ### Enhancements From 597f95905b7311ca660d16f484916a36b10f5be4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 May 2022 20:07:24 +0200 Subject: [PATCH 5/5] Add eslint ignore regarding the exhaustive deps rule --- .../border-box-control-split-controls/hook.ts | 9 +++++++-- .../border-box-control-visualizer/hook.ts | 5 ++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index 1d1393c49291e2..a6ecb1ff726845 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -22,9 +22,12 @@ export function useBorderBoxControlSplitControls( // Generate class names. const cx = useCx(); + const rtlWatchResult = rtl.watch(); const classes = useMemo( () => { return cx( styles.borderBoxControlSplitControls(), className ); - }, [ cx, className, rtl.watch() ] ); + // rtlWatchResult is needed to refresh styles when the writing direction changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ cx, className, rtlWatchResult ] ); const centeredClassName = useMemo( () => { return cx( styles.CenteredBorderControl, className ); @@ -32,7 +35,9 @@ export function useBorderBoxControlSplitControls( const rightAlignedClassName = useMemo( () => { return cx( styles.rightBorderControl(), className ); - }, [ cx, className, rtl.watch() ] ); + // rtlWatchResult is needed to refresh styles when the writing direction changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ cx, className, rtlWatchResult ] ); return { ...otherProps, diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts index afa42be5543cbe..75fc6a7a367776 100644 --- a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts @@ -24,12 +24,15 @@ export function useBorderBoxControlVisualizer( // Generate class names. const cx = useCx(); + const rtlWatchResult = rtl.watch(); const classes = useMemo( () => { return cx( styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ), className ); - }, [ cx, className, value, __next36pxDefaultSize, rtl.watch() ] ); + // rtlWatchResult is needed to refresh styles when the writing direction changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] ); return { ...otherProps, className: classes, value }; }