Position: Refactor "Position" controls panel to use ToolsPanel instead of PanelBody

[yogeshbhutkar]

Fixes: #67950

What?

This PR introduces the usage of ToolsPanel instead of PanelBody inside the Position block support UI.

Why?

This PR is a part of #67813 which standardizes the usage of ToolsPanel inside Block Support UI.

How?

PanelBody is replaced with the corresponding ToolsPanel component.

Testing Instructions

1. Insert a Group Block.
2. Notice the presence of ToolsPanel component.
3. Try to reset the updated values to test the reset functions.

Screencast

Screen.Recording.2024-12-13.at.4.03.43.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[fabiankaegy]

Before this update the position control also allowed you to update its value when multiple group blocks (blocks that support position) were selected. That code has been removed here.

For a single block this already works well. But we need to also handle multi block selection again :)

[yogeshbhutkar]

Before this update the position control also allowed you to update its value when multiple group blocks (blocks that support position) were selected. That code has been removed here.

For a single block this already works well. But we need to also handle multi block selection again :)

Before this update ( Trunk Branch ):

After this update ( The current PR ):

As demonstrated in the GIFs above, the position control indeed is capable of updating values when multiple group blocks are selected. It's also found to be working with 2 Group Blocks and 1 Row Block together.

Analysis of removed code:

const [ initialOpen, setInitialOpen ] = useState();

// Determine whether the panel should be expanded.
const { multiSelectedBlocks } = useSelect( ( select ) => {
  const { getBlocksByClientId, getSelectedBlockClientIds } =
	  select( blockEditorStore );
  const clientIds = getSelectedBlockClientIds();
  return {
	  multiSelectedBlocks: getBlocksByClientId( clientIds ),
  };
}, [] );

The above block is responsible to return the blocks that are currently selected.

useLayoutEffect( () => {
  // If any selected block has a position set, open the panel by default.
  // The first block's value will still be used within the control though.
  if ( initialOpen === undefined ) {
	  setInitialOpen(
		  multiSelectedBlocks.some(
			  ( { attributes } ) => !! attributes?.style?.position?.type
		  )
	  );
  }
}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );

This block of code toggles the state initialOpen if some of the blocks that are selected have position?.type. i.e., were assigned a position before.

This toggled state is used as an initial value for the initialOpen prop in the previous PanelBody component.

<PanelBody
	className="block-editor-block-inspector__position"
	title={ __( 'Position' ) }
	initialOpen={ initialOpen ?? false }
>
	<InspectorControls.Slot group="position" />
</PanelBody>

But, we don't need the initialOpen prop, hence, the above code is not required when using the ToolsPanel component, and hence was removed. As per my understanding, it has nothing to do with being able to update multiple selected blocks.

Please let me know if I'm missing out something in my approach, but as per the comment, @fabiankaegy mentioned the component now does not support updating position when multiple blocks are selected, but that doesn't seem to be the case and multi-block selection + updation, in my opinion is working properly as demonstrated in the 2nd GIF.

Can you please provide a screencast for my reference, if this doesn't answer the bug that you've mentioned?

CC: @fabiankaegy

[yogeshbhutkar]

Hi @fabiankaegy, circling back to check if the above comment resolves this review. Please let me know if any changes still need to be made.