Skip to content

List Block: Refactor setting panel to use ToolsPanel #69387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

shimotmk
Copy link
Contributor

@shimotmk shimotmk commented Mar 3, 2025

What?

Part of #67813

Make the settings panel more consistent with other blocks

Testing Instructions

  1. Open a post or page.
  2. Insert a list block
  3. Open the settings panel
  4. You can see that you can set it up just like before Ordered List.

Testing Instructions for Keyboard

Screenshots or screencast

Before After
before after
list.mp4

Copy link

github-actions bot commented Mar 3, 2025

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: shimotmk <shimotomoki@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Do you mind rebasing this PR? Somehow, I can't re-run failed CIs.

refactor-list-block-control-panel
@shimotmk shimotmk force-pushed the enhancement/refactor-list-block-control-panel branch from 39f0e0b to 06fe2b1 Compare May 25, 2025 21:07
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I overlooked an important point: the ToolsPanel component is not available in the native app. The CI failure suggests this.

There are two ways to solve this. See #67957 (review)

@t-hamano
Copy link
Contributor

Thanks for the update!

Finally, we should be able to simplify the code like this:

const LIST_STYLE_OPTIONS = [
	{
		label: __( 'Numbers' ),
		value: 'decimal',
	},
	// ...
];

const OrderedListSettings = () => {
	return (
		<InspectorControls>
			{ Platform.isNative ? (
				<PanelBody>
					{ /* // ... */ }
				</PanelBody>
			) : (
				<ToolsPanel>
					{ /* // ... */ }
				</ToolsPanel>
			) }
		</InspectorControls>
	);
};
  • Create a shareable LIST_STYLE_OPTIONS constant
  • The InspectorControls component is the same for both the web and native versions

@shimotmk
Copy link
Contributor Author

Thanks for the review!
Smarter code

@t-hamano t-hamano merged commit 25d9b97 into WordPress:trunk May 26, 2025
84 of 116 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.0 milestone May 26, 2025
@shimotmk shimotmk deleted the enhancement/refactor-list-block-control-panel branch May 26, 2025 20:55
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
* enhancement
refactor-list-block-control-panel

* add Platform.isNative condition

* optimize Platform.isNative

Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Refactor "Settings" panel of List block to use ToolsPanel instead of PanelBody
2 participants