Skip to content

Commit

Permalink
Update block toolbar and settings sidebar image (#57203)
Browse files Browse the repository at this point in the history
* Update block toolbar and remove settings sidebar image

* Update docs/getting-started/fundamentals/block-in-the-editor.md

Co-authored-by: Nick Diego <nick.diego@automattic.com>

---------

Co-authored-by: Nick Diego <nick.diego@automattic.com>
  • Loading branch information
juanmaguitar and ndiego committed Dec 19, 2023
1 parent a685503 commit b24532c
Showing 1 changed file with 2 additions and 4 deletions.
6 changes: 2 additions & 4 deletions docs/getting-started/fundamentals/block-in-the-editor.md
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 the Block Toolbar and the Settings Sidebar when a Paragraph block is selected](https://developer.wordpress.org/files/2023/12/block-toolbar-settings-sidebar.png)

<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

0 comments on commit b24532c

Please sign in to comment.