Skip to content
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

ToolsPanel: Add a readme section related to laying out a ToolsPanel #42615

Merged
merged 2 commits into from
Jul 22, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

Related: #42309 (comment)

What?

Adds information relating to laying out elements or controls within a ToolsPanel to the component's readme.

Why?

While the ToolsPanel is laid out via a Grid component internally, it does not yet expose grid props for full control (History: #35621). As such, it's not obvious from the docs how to achieve certain panel layouts.

How?

  • Adds a "ToolsPanel Layout" section to the component's development guidelines.
  • Updates README's usage example to illustrate:
    • a non-ToolsPanelItem e.g. a panel description
    • single column controls
    • full column controls

Note: A storybook example illustrating varied layouts might also be a further step if required. This would likely be best in a follow-up after the ToolsPanel stories have been updated to use the latest approach from the components package, including using Controls in place of Knobs.

Testing Instructions

  1. Proofread updates to README
  2. Bonus points for taking the usage example for a test drive

@aaronrobertshaw aaronrobertshaw added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components labels Jul 22, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Jul 22, 2022
Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

This greatly improves the usefulness of the example 🎉

This also includes updating the usage example to better illustrate layout.
@aaronrobertshaw aaronrobertshaw force-pushed the update/tools-panel-readme-with-layout-example branch from ce60fde to e726b47 Compare July 22, 2022 05:21
@aaronrobertshaw aaronrobertshaw merged commit 8886b23 into trunk Jul 22, 2022
@aaronrobertshaw aaronrobertshaw deleted the update/tools-panel-readme-with-layout-example branch July 22, 2022 06:23
@github-actions github-actions bot added this to the Gutenberg 13.8 milestone Jul 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants