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.

Sign up for GitHub

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

Jump to bottom

Update block toolbar and settings sidebar image #57203

Merged
merged 2 commits into from Dec 19, 2023
Merged

Update block toolbar and settings sidebar image #57203

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d77430
Update block toolbar and remove settings sidebar image
juanmaguitar Dec 19, 2023
75f01c3
Update docs/getting-started/fundamentals/block-in-the-editor.md
juanmaguitar Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 2 additions & 4 deletions docs/getting-started/fundamentals/block-in-the-editor.md
View file
Open in desktop
Expand Up @@ -48,9 +48,9 @@ A good workflow when using a component for the Block Editor is:

To simplify block customization and ensure a consistent experience for users, there are a number of built-in UI patterns to help generate the editor preview.

### Block Toolbar
![Diagram showing a Block Tookbar and a Settings Sidebar when a block is selected](https://developer.wordpress.org/files/2023/12/block-toolbar-settings-sidebar.png)
juanmaguitar marked this conversation as resolved.
Show resolved Hide resolved

<img alt="Screenshot of the rich text toolbar applied to a Paragraph block inside the block editor" src="https://developer.wordpress.org/files/2023/12/toolbar-text.png" width="60%">
### Block Toolbar

When the user selects a block, a number of control buttons may be shown in a toolbar above the selected block. Some of these block-level controls may be included automatically but you can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar.

Expand Down Expand Up @@ -98,8 +98,6 @@ Note that `BlockControls` is only visible when the block is currently selected a

### Settings Sidebar

<img alt="Screenshot of the inspector panel focused on the settings for a Paragraph block" src="https://developer.wordpress.org/files/2023/12/settings-sidebar.png" width="60%">

The Settings Sidebar is used to display less-often-used settings or settings that require more screen space. The Settings Sidebar should be used for **block-level settings only**.

If you have settings that affects only selected content inside a block (example: the "bold" setting for selected text inside a paragraph): **do not place it inside the Settings Sidebar**. The Settings Sidebar is displayed even when editing a block in HTML mode, so it should only contain block-level settings.
Expand Down