Skip to content

Commit

Permalink
Hide grid visualizer when grid is template locked or block editing mo…
Browse files Browse the repository at this point in the history
…de is not default (#66065)

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>
* Hide grid visualizer when template locked or block editing mode is not default

* Remove unlocks
  • Loading branch information
talldan authored and ciampo committed Oct 14, 2024
1 parent 7077854 commit 99112d1
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 12 deletions.
32 changes: 23 additions & 9 deletions packages/block-editor/src/hooks/grid-visualizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,34 @@ function GridLayoutSync( props ) {
}

function GridTools( { clientId, layout } ) {
const { isSelected, isDragging } = useSelect( ( select ) => {
const { isBlockSelected, isDraggingBlocks } =
select( blockEditorStore );
const isVisible = useSelect(
( select ) => {
const {
isBlockSelected,
isDraggingBlocks,
getTemplateLock,
getBlockEditingMode,
} = select( blockEditorStore );

return {
isSelected: isBlockSelected( clientId ),
isDragging: isDraggingBlocks(),
};
} );
// These calls are purposely ordered from least expensive to most expensive.
// Hides the visualizer in cases where the user is not or cannot interact with it.
if (
( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
getTemplateLock( clientId ) ||
getBlockEditingMode( clientId ) !== 'default'
) {
return false;
}

return true;
},
[ clientId ]
);

return (
<>
<GridLayoutSync clientId={ clientId } />
{ ( isSelected || isDragging ) && (
{ isVisible && (
<GridVisualizer clientId={ clientId } parentLayout={ layout } />
) }
</>
Expand Down
51 changes: 48 additions & 3 deletions packages/block-editor/src/hooks/layout-child.js
Original file line number Diff line number Diff line change
Expand Up @@ -175,17 +175,62 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
isManualPlacement,
} = parentLayout;

const rootClientId = useSelect(
if ( parentLayoutType !== 'grid' ) {
return null;
}

return (
<GridTools
clientId={ clientId }
style={ style }
setAttributes={ setAttributes }
allowSizingOnChildren={ allowSizingOnChildren }
isManualPlacement={ isManualPlacement }
parentLayout={ parentLayout }
/>
);
}

function GridTools( {
clientId,
style,
setAttributes,
allowSizingOnChildren,
isManualPlacement,
parentLayout,
} ) {
const { rootClientId, isVisible } = useSelect(
( select ) => {
return select( blockEditorStore ).getBlockRootClientId( clientId );
const {
getBlockRootClientId,
getBlockEditingMode,
getTemplateLock,
} = select( blockEditorStore );

const _rootClientId = getBlockRootClientId( clientId );

if (
getTemplateLock( _rootClientId ) ||
getBlockEditingMode( _rootClientId ) !== 'default'
) {
return {
rootClientId: _rootClientId,
isVisible: false,
};
}

return {
rootClientId: _rootClientId,
isVisible: true,
};
},
[ clientId ]
);

// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
const [ resizerBounds, setResizerBounds ] = useState();

if ( parentLayoutType !== 'grid' ) {
if ( ! isVisible ) {
return null;
}

Expand Down

0 comments on commit 99112d1

Please sign in to comment.