From cb5967f67836755edd8548f29ac19162d77a3821 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 27 Oct 2022 15:58:10 +0800 Subject: [PATCH] Fix popover positioning --- .../block-alignment-visualizer/index.js | 66 +++++++++++-------- .../block-alignment-visualizer/style.scss | 1 + 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-visualizer/index.js b/packages/block-editor/src/components/block-alignment-visualizer/index.js index d2169a8c6cf94f..373e1c05a6de17 100644 --- a/packages/block-editor/src/components/block-alignment-visualizer/index.js +++ b/packages/block-editor/src/components/block-alignment-visualizer/index.js @@ -229,33 +229,11 @@ export default function BlockAlignmentVisualizer( { { alignments.map( ( alignment ) => ( -
-
- -
- { alignment.label } -
- -
-
+ alignment={ alignment } + justification={ layout.justifyContent } + /> ) ) } @@ -263,6 +241,42 @@ export default function BlockAlignmentVisualizer( { ); } +function BlockAlignmentVisualizerStep( { alignment, justification } ) { + const [ popoverAnchor, setPopoverAnchor ] = useState( null ); + + return ( + <> +
+
+
+ +
+ { alignment.label } +
+ + + ); +} + function Iframe( { children, ...props } ) { const [ iframeDocument, setIframeDocument ] = useState( null ); diff --git a/packages/block-editor/src/components/block-alignment-visualizer/style.scss b/packages/block-editor/src/components/block-alignment-visualizer/style.scss index 513699949efff5..0449ce6f0cb4f9 100644 --- a/packages/block-editor/src/components/block-alignment-visualizer/style.scss +++ b/packages/block-editor/src/components/block-alignment-visualizer/style.scss @@ -17,6 +17,7 @@ .block-editor__alignment-visualizer-step-label-popover .components-popover__content { outline: none; box-shadow: none; + background: none; } .block-editor__alignment-visualizer-step-label {