BlockStylesPanel: should only be displayed in default editing mode

[yogeshbhutkar]

What?

Closes #69238

This PR adds logic to prevent rendering BlockStylesPanel when the editing mode is not set to default. This fixes the core problem that causes the Block Style Variations to be displayed for the Heading Block when viewed from Document Outline, as described in the parent issue.

Why?

Since other settings within the Block Settings are not displayed in this scenario, showing the Block Style Variations is unnecessary, especially if they cannot be saved.

How?

Similar to how the other Panels such as Color, Typography, Dimensions, Border, and BackgroundImage are only rendered when the Editing Mode is set to default, this PR implements the same condition for rendering the BlockStylesPanel to keep the code logic consistent and achieve the desired outcome.

Ref.

gutenberg/packages/block-editor/src/hooks/style.js

Lines 345 to 347 in 4680ff3

	if ( blockEditingMode !== 'default' ) {
	return null;
	}

Testing Instructions

1. Open the page template in the Site Editor.
2. Add a heading block anywhere on the template, and save.
3. Create a new page.
4. With "Show template" enabled, open the Document Outline.
5. Confirm that the heading you added to the template is listed: Click on it.
6. Confirm you cannot see the Block Style Variations for the Heading Block.
7. Confirm the above Panel shows as expected when editing the Template.

Screenshots

Before	After

[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: carolinan <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

[yogeshbhutkar]

Note: The failing test cases are not related to the changeset introduced in this PR.

[carolinan]

I am not familiar enough with the different editing modes to know wether this was intentionally left out.

[t-hamano]

If we add a useBlockEditingMode check, when the "Show template" is enabled and a block in the content is clicked, the Styles panel won't show up.

We might want to check if the block is in content regardless of the eitingmode.

Does @Mamaduka know of any suitable hooks?

[yogeshbhutkar]

I somehow missed this crucial detail at first. After searching for relevant hooks without success, I tried the following approach, which works as expected:

const isWithinContentBlock = useSelect(
  ( select ) => {
	  const { getBlockParents, getBlockName } =
		  select( blockEditorStore );
	  const parents = getBlockParents( clientId );
	  return parents.some(
		  ( parent ) => getBlockName( parent ) === 'core/post-content'
	  );
  },
  [ clientId ]
);

Please let me know what your thoughts are.

Edit: We might need to use editing mode and a check for within the content block together. Within the site editor for a particular template, isWithinContentBlock will become false, but block editing mode will be default. Is there a better approach?