Grid Visualizer - improve styles #64321
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -50,7 +50,6 @@ const GridVisualizerGrid = forwardRef( | |
| const [ gridInfo, setGridInfo ] = useState( () => | ||
| getGridInfo( gridElement ) | ||
| ); | ||
|
|
||
| useEffect( () => { | ||
| const observers = []; | ||
|
|
@@ -68,60 +67,59 @@ const GridVisualizerGrid = forwardRef( | |
| }; | ||
| }, [ gridElement ] ); | ||
|
|
||
| return ( | ||
| <> | ||
| <GridPopunder | ||
| gridClientId={ gridClientId } | ||
| gridInfo={ gridInfo } | ||
| isManualGrid={ isManualGrid } | ||
| /> | ||
| { isManualGrid && ( | ||
| <GridPopover | ||
| ref={ ref } | ||
|
There was a problem hiding this comment. There's a bug here caused by Kapture.2024-08-12.at.15.42.13.mp4There was a problem hiding this comment. Should be fixed in f73ca9f. The annoying aspect is that it means some parts of To properly finish #64162, the auto grid will also need a single appender in the next available cell, so something like this will be needed anyway. There was a problem hiding this comment.
I think we can ignore that tbh. It's better imo to have it consistent across container blocks. |
||
| gridClientId={ gridClientId } | ||
| gridInfo={ gridInfo } | ||
| /> | ||
| ) } | ||
| </> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| /** | ||
| * A popover component that renders in a slot over the grid block. | ||
| * | ||
| * This provides interactive elements of the grid visualization — | ||
| * block inserters and drop zones. | ||
| * | ||
| * @param {Object} props | ||
| * @param {string} props.gridClientId | ||
| * @param {Object} props.gridInfo | ||
| */ | ||
| const GridPopover = forwardRef( ( { gridClientId, gridInfo }, ref ) => { | ||
|
There was a problem hiding this comment.
|
||
| const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false ); | ||
| const [ highlightedRect, setHighlightedRect ] = useState( null ); | ||
|
|
||
| const gridItems = useSelect( | ||
| ( select ) => select( blockEditorStore ).getBlocks( gridClientId ), | ||
| [ gridClientId ] | ||
| ); | ||
|
|
||
| useEffect( () => { | ||
| function onGlobalDrag() { | ||
| setIsDroppingAllowed( true ); | ||
| } | ||
| function onGlobalDragEnd() { | ||
| setIsDroppingAllowed( false ); | ||
| } | ||
| document.addEventListener( 'drag', onGlobalDrag ); | ||
| document.addEventListener( 'dragend', onGlobalDragEnd ); | ||
| return () => { | ||
| document.removeEventListener( 'drag', onGlobalDrag ); | ||
| document.removeEventListener( 'dragend', onGlobalDragEnd ); | ||
| }; | ||
| }, [] ); | ||
|
|
||
| const occupiedRects = useMemo( () => { | ||
| const rects = []; | ||
| for ( const block of gridItems ) { | ||
|
|
@@ -146,56 +144,117 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) { | |
| return rects; | ||
| }, [ gridItems ] ); | ||
|
|
||
| return ( | ||
| <BlockPopoverCover | ||
| __unstablePopoverSlot="__unstable-block-tools-after" | ||
| className={ clsx( 'block-editor-grid-visualizer', { | ||
|
There was a problem hiding this comment. The class names in this file have come out of sync with the component names. It used to be that Also, is it bad that both There was a problem hiding this comment. Good point. I've pushed a commit that updates these. Also removed another unused classname. It's not perfect, but I think good enough right now. |
||
| 'is-dropping-allowed': isDroppingAllowed, | ||
| } ) } | ||
| clientId={ gridClientId } | ||
| > | ||
| <div | ||
| ref={ ref } | ||
| className="block-editor-grid-visualizer__grid" | ||
| style={ gridInfo.style } | ||
| > | ||
| { range( 1, gridInfo.numRows ).map( ( row ) => | ||
| range( 1, gridInfo.numColumns ).map( ( column ) => { | ||
| const isCellOccupied = occupiedRects.some( ( rect ) => | ||
| rect.contains( column, row ) | ||
| ); | ||
| const isHighlighted = | ||
| highlightedRect?.contains( column, row ) ?? false; | ||
|
|
||
| return ( | ||
| <div | ||
| key={ `${ row }-${ column }` } | ||
| className={ clsx( | ||
| 'block-editor-grid-visualizer__cell', | ||
| { | ||
| 'is-highlighted': isHighlighted, | ||
| } | ||
| ) } | ||
| > | ||
| { isCellOccupied ? ( | ||
| <GridVisualizerDropZone | ||
| column={ column } | ||
| row={ row } | ||
| gridClientId={ gridClientId } | ||
| gridInfo={ gridInfo } | ||
| setHighlightedRect={ | ||
| setHighlightedRect | ||
| } | ||
| /> | ||
| ) : ( | ||
| <GridVisualizerAppender | ||
| column={ column } | ||
| row={ row } | ||
| gridClientId={ gridClientId } | ||
| gridInfo={ gridInfo } | ||
| setHighlightedRect={ | ||
| setHighlightedRect | ||
| } | ||
| /> | ||
| ) } | ||
| </div> | ||
| ); | ||
| } ) | ||
| ) } | ||
| </div> | ||
| </BlockPopoverCover> | ||
| ); | ||
| } ); | ||
|
|
||
|
There was a problem hiding this comment. I decided to get rid of In |
||
| /** | ||
| * A popover component that renders inline under the grid block. | ||
| * | ||
| * This provides non-interactive elements of the grid visualization and | ||
| * renders under the block so that the background colors are not atop | ||
| * the block content. | ||
| * | ||
| * @param {Object} props | ||
| * @param {string} props.gridClientId | ||
| * @param {Object} props.gridInfo | ||
| * @param {boolean} props.isManualGrid | ||
| */ | ||
| function GridPopunder( { gridClientId, gridInfo, isManualGrid } ) { | ||
|
There was a problem hiding this comment.
|
||
| const color = gridInfo.currentColor; | ||
| const cellStyle = isManualGrid | ||
| ? { | ||
| backgroundColor: `rgba(var(--wp-admin-theme-color--rgb), 0.2)`, | ||
| border: `1px dashed rgb(var(--wp-admin-theme-color--rgb))`, | ||
| borderRadius: '2px', | ||
| color, | ||
| opacity: 0.2, | ||
| } | ||
| : { | ||
| border: `1px dashed ${ color }`, | ||
| borderRadius: '2px', | ||
| color, | ||
| opacity: 0.2, | ||
| }; | ||
|
|
||
| return ( | ||
| <BlockPopoverCover | ||
| inline | ||
| className="block-editor-grid-visualizer" | ||
| clientId={ gridClientId } | ||
| // Override layout margin and popover's zIndex. | ||
| contentStyle={ { margin: 0, zIndex: 0 } } | ||
| > | ||
| <div | ||
| className="block-editor-grid-visualizer__grid" | ||
| style={ gridInfo.style } | ||
| > | ||
| { Array.from( { length: gridInfo.numItems }, ( _, i ) => ( | ||
| <div | ||
| key={ i } | ||
| className="block-editor-grid-visualizer__cell" | ||
| style={ cellStyle } | ||
| ></div> | ||
| ) ) } | ||
| </div> | ||
| </BlockPopoverCover> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This has all moved into
GridPopover