diff --git a/docs/getting-started/fundamentals/block-in-the-editor.md b/docs/getting-started/fundamentals/block-in-the-editor.md index 99f5d26304a7..56ba72c283bd 100644 --- a/docs/getting-started/fundamentals/block-in-the-editor.md +++ b/docs/getting-started/fundamentals/block-in-the-editor.md @@ -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) -Screenshot of the rich text toolbar applied to a Paragraph block inside the block editor +### 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. @@ -98,8 +98,6 @@ Note that `BlockControls` is only visible when the block is currently selected a ### Settings Sidebar -Screenshot of the inspector panel focused on the settings for a Paragraph block - 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.