From 1a098431cb04a9507b5a183f62f182fc2cc596d9 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 8 May 2024 14:20:18 +0200 Subject: [PATCH 1/5] Update block inserter and library terminology. --- .../user-interface/block-design.md | 6 ++--- .../nested-blocks-inner-blocks.md | 6 ++--- .../widgets/legacy-widget-block.md | 6 ++--- .../block-api/block-patterns.md | 2 +- .../block-api/block-registration.md | 4 ++-- packages/block-directory/README.md | 2 +- .../src/components/block-popover/README.md | 2 +- .../use-selected-block-tool-props.js | 2 +- .../src/components/block-types-list/README.md | 2 +- .../components/button-block-appender/index.js | 2 +- .../default-block-appender/content.scss | 2 +- .../src/components/inner-blocks/README.md | 2 +- .../src/components/inserter/index.js | 2 +- .../src/components/inserter/index.native.js | 2 +- .../src/components/inserter/style.scss | 2 +- .../src/components/inserter/tabs.js | 8 +++---- .../src/buttons/test/edit.native.js | 2 +- packages/blocks/README.md | 4 ++-- packages/blocks/src/api/registration.js | 4 ++-- packages/blocks/src/store/actions.js | 4 ++-- .../src/components/header/index.js | 2 +- packages/e2e-test-utils/src/inserter.js | 12 +++++----- .../components/header/document-tools/index.js | 4 ++-- .../secondary-sidebar/inserter-sidebar.js | 2 +- packages/edit-widgets/src/store/reducer.js | 2 +- .../src/components/document-tools/index.js | 4 ++-- packages/editor/src/store/reducer.js | 2 +- packages/editor/src/store/test/selectors.js | 2 +- .../__device-tests__/pages/editor-page.js | 2 +- platform-docs/docs/basic-concepts/ui.md | 2 +- .../docs/create-block/nested-blocks.md | 6 ++--- schemas/json/block.json | 2 +- test/e2e/specs/editor/blocks/columns.spec.js | 8 +++---- test/e2e/specs/editor/blocks/group.spec.js | 4 ++-- test/e2e/specs/editor/blocks/image.spec.js | 2 +- .../blocks/navigation-list-view.spec.js | 2 +- .../specs/editor/blocks/navigation.spec.js | 6 ++--- .../editor/plugins/allowed-blocks.spec.js | 6 ++--- .../editor/plugins/block-directory.spec.js | 8 +++---- .../specs/editor/plugins/block-icons.spec.js | 20 ++++++++-------- .../editor/plugins/block-variations.spec.js | 12 ++++------ .../specs/editor/plugins/child-blocks.spec.js | 14 +++++------ .../inner-blocks-allowed-blocks.spec.js | 8 +++---- .../editor/plugins/pattern-recursion.spec.js | 6 ++--- .../editor/plugins/post-type-locking.spec.js | 2 +- .../plugins/register-block-type-hooks.spec.js | 2 +- test/e2e/specs/editor/various/a11y.spec.js | 4 ++-- .../editor/various/adding-patterns.spec.js | 4 ++-- .../editor/various/allowed-patterns.spec.js | 8 +++---- .../block-hierarchy-navigation.spec.js | 8 +++---- .../specs/editor/various/editor-modes.spec.js | 2 +- .../editor/various/inserting-blocks.spec.js | 24 +++++++++---------- .../e2e/specs/editor/various/patterns.spec.js | 8 +++---- .../various/shortcut-focus-toolbar.spec.js | 4 ++-- test/e2e/specs/site-editor/pages.spec.js | 2 +- .../site-editor/site-editor-inserter.spec.js | 6 ++--- test/e2e/specs/site-editor/style-book.spec.js | 2 +- .../e2e/specs/widgets/editing-widgets.spec.js | 4 ++-- test/performance/specs/post-editor.spec.js | 8 +++---- 59 files changed, 140 insertions(+), 152 deletions(-) diff --git a/docs/explanations/user-interface/block-design.md b/docs/explanations/user-interface/block-design.md index 66411744fa5663..bc0a2c98ac9cc6 100644 --- a/docs/explanations/user-interface/block-design.md +++ b/docs/explanations/user-interface/block-design.md @@ -66,7 +66,7 @@ Group toolbar controls in logical segments. Don't add a segment for each. ### Block identification -A block should have a straightforward, short name so users can easily find it in the block library. A block named "YouTube" is easy to find and understand. The same block, named "Embedded Video (YouTube)", would be less clear and harder to find in the block library. +A block should have a straightforward, short name so users can easily find it in the Block Inserter. A block named "YouTube" is easy to find and understand. The same block, named "Embedded Video (YouTube)", would be less clear and harder to find in the Block Inserter. When referring to a block in documentation or UI, use title case for the block title and lowercase for the "block" descriptor. For example: @@ -76,11 +76,11 @@ When referring to a block in documentation or UI, use title case for the block t Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://fonts.google.com/icons). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration. -![A screenshot of the block library with concise block names](https://developer.wordpress.org/files/2022/01/blocks-do.png) +![A screenshot of the Block Inserter with concise block names](https://developer.wordpress.org/files/2022/01/blocks-do.png) **Do:** Use concise block names. -![A screenshot of the block library with long, multi-line block names](https://developer.wordpress.org/files/2022/01/blocks-dont.png) +![A screenshot of the Block Inserter with long, multi-line block names](https://developer.wordpress.org/files/2022/01/blocks-dont.png) **Don't:** Avoid long, multi-line block names. diff --git a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md index b90b4668530797..a937791395a39f 100644 --- a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md +++ b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md @@ -123,7 +123,7 @@ The key difference between `parent` and `ancestor` is `parent` has finer specifi ### Defining parent block relationship -An example of this is the Column block, which is assigned the `parent` block setting. This allows the Column block to only be available as a nested direct descendant in its parent Columns block. Otherwise, the Column block will not be available as an option within the block inserter. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column). +An example of this is the Column block, which is assigned the `parent` block setting. This allows the Column block to only be available as a nested direct descendant in its parent Columns block. Otherwise, the Column block will not be available as an option within the Block Inserter. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column). When defining a direct descendent block, use the `parent` block setting to define which block is the parent. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for. @@ -138,9 +138,9 @@ When defining a direct descendent block, use the `parent` block setting to defin ### Defining an ancestor block relationship -An example of this is the Comment Author Name block, which is assigned the `ancestor` block setting. This allows the Comment Author Name block to only be available as a nested descendant in its ancestral Comment Template block. Otherwise, the Comment Author Name block will not be available as an option within the block inserter. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name). +An example of this is the Comment Author Name block, which is assigned the `ancestor` block setting. This allows the Comment Author Name block to only be available as a nested descendant in its ancestral Comment Template block. Otherwise, the Comment Author Name block will not be available as an option within the Block Inserter. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name). -The `ancestor` relationship allows the Comment Author Name block to be anywhere in the hierarchical tree, and not _just_ a direct child of the parent Comment Template block, while still limiting its availability within the block inserter to only be visible an an option to insert if the Comment Template block is available. +The `ancestor` relationship allows the Comment Author Name block to be anywhere in the hierarchical tree, and not _just_ a direct child of the parent Comment Template block, while still limiting its availability within the Block Inserter to only be visible an an option to insert if the Comment Template block is available. When defining a descendent block, use the `ancestor` block setting. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for. diff --git a/docs/how-to-guides/widgets/legacy-widget-block.md b/docs/how-to-guides/widgets/legacy-widget-block.md index 80353f5d690658..42f4d983f9fcf8 100644 --- a/docs/how-to-guides/widgets/legacy-widget-block.md +++ b/docs/how-to-guides/widgets/legacy-widget-block.md @@ -2,9 +2,9 @@ The Legacy Widget block allows users to add, edit and preview third party widgets that are registered by plugins and widgets that were added using the classic Widgets Editor. -Third party widgets can be added by inserting a Legacy Widget block using the block inserter and selecting the widget from the block's dropdown. +Third party widgets can be added by inserting a Legacy Widget block using the Block Inserter and selecting the widget from the block's dropdown. -Third party widgets may also be added by searching for the name of the widget in the block inserter and selecting the widget. A variation of the Legacy Widget block will be inserted. +Third party widgets may also be added by searching for the name of the widget in the Block Inserter and selecting the widget. A variation of the Legacy Widget block will be inserted. ## Compatibility with the Legacy Widget block @@ -134,7 +134,7 @@ transforms: { #### 3) Hide the widget from the Legacy Widget block -As a final touch, we can tell the Legacy Widget block to hide your widget from the "Select widget" dropdown and from the block inserter. This encourages users to use the block that replaces your widget. +As a final touch, we can tell the Legacy Widget block to hide your widget from the "Select widget" dropdown and from the Block Inserter. This encourages users to use the block that replaces your widget. This can be done using the `widget_types_to_hide_from_legacy_widget_block` filter. diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md index b0096e24791de8..650f5f4d5022bc 100644 --- a/docs/reference-guides/block-api/block-patterns.md +++ b/docs/reference-guides/block-api/block-patterns.md @@ -1,6 +1,6 @@ # Patterns -Block Patterns are predefined block layouts available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration. +Block Patterns are predefined block layouts available from the patterns tab of the Block Inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration. ## Block patterns diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md index 92be19ee48c9fa..12f4ae535e7966 100644 --- a/docs/reference-guides/block-api/block-registration.md +++ b/docs/reference-guides/block-api/block-registration.md @@ -338,13 +338,13 @@ This should match the namespace declared in the block name; the name of your plu - **Type:** `String` -This will display in the block inserter section, which will list all blocks in this collection. +This will display in the Block Inserter section, which will list all blocks in this collection. #### Icon - **Type:** `Object` -(Optional) An icon to display alongside the title in the block inserter. +(Optional) An icon to display alongside the title in the Block Inserter. ```js // Registering a block collection diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md index abb44a7c3849ec..945d13d6554e77 100644 --- a/packages/block-directory/README.md +++ b/packages/block-directory/README.md @@ -16,7 +16,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If ## Usage -This package builds a standalone JS file. When loaded on a page with the block editor, it extends the block inserter to search for blocks from WordPress.org. +This package builds a standalone JS file. When loaded on a page with the block editor, it extends the Block Inserter to search for blocks from WordPress.org. To do this, it uses the `__unstableInserterMenuExtension`, a slot-fill area hooked into the block types list. When the user runs a search and there are no results currently installed, it fires off a request to WordPress.org for matching blocks. These are listed for the user to install with a one-click process that [installs, activates, and injects the block into the post.](./src/store/actions.js#L49) When the post is saved, if the block was not used, it will be [silently uninstalled](./src/store/actions.js#L129) to avoid clutter. diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md index c50e8c90647f69..98e7e2620658c5 100644 --- a/packages/block-editor/src/components/block-popover/README.md +++ b/packages/block-editor/src/components/block-popover/README.md @@ -2,7 +2,7 @@ These two components allow rendering editor UI by the block (in a popover) but outside the canvas. This is important to avoid messing with the style and layout of the block list. -For example, it's used to render the contextual block toolbar and the in-between block inserter. +For example, it's used to render the contextual block toolbar and the in-between Block Inserter. ## BlockPopover diff --git a/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js b/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js index a2783f49bb5389..4bec055375f427 100644 --- a/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js +++ b/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js @@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '../../store'; /** - * Returns props for the selected block tools and empty block inserter. + * Returns props for the selected block tools and empty Block Inserter. * * @param {string} clientId Selected block client ID. */ diff --git a/packages/block-editor/src/components/block-types-list/README.md b/packages/block-editor/src/components/block-types-list/README.md index 8740cdbf2c7741..9d8db5504ecb07 100644 --- a/packages/block-editor/src/components/block-types-list/README.md +++ b/packages/block-editor/src/components/block-types-list/README.md @@ -4,7 +4,7 @@ The `BlockTypesList` component lets users display a list of blocks in different This component is present in the block insertion tab, the reusable blocks tab and the quick block insertion modal in the editor. -![Block types list in the block inserter tab](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-1.png) +![Block types list in the Block Inserter tab](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-1.png) ![Block types list in the reusables blocks tab](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-2.png) diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index 974f48e61bc287..50396e23839ddc 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -43,7 +43,7 @@ function ButtonBlockAppender( } else { label = _x( 'Add block', - 'Generic label for block inserter button' + 'Generic label for Block Inserter button' ); } const isToggleButton = ! hasSingleBlockType; diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss index 77725d2508ec5e..a66136056d2b12 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/packages/block-editor/src/components/default-block-appender/content.scss @@ -37,7 +37,7 @@ } // Since this appender will only ever appear on an entirely empty document, we don't account for last-child. - // This is also because it will never be the last child, the block inserter that sits in this appender is the last child. + // This is also because it will never be the last child, the Block Inserter that sits in this appender is the last child. } // Dropzone. diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index 92d4fdb5739cec..f4e8e66c424cb9 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -184,7 +184,7 @@ For example, a button block, deeply nested in several levels of block `X` that u ### `prioritizedInserterBlocks` - **Type:** `Array` -- **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional. +- **Default:** - `undefined`. Determines which block types should be shown in the Block Inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional. ### `defaultBlock` diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index d3e7dba0df6838..d73e7a91c4a6f4 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -48,7 +48,7 @@ const defaultRenderToggle = ( { } else if ( ! label && prioritizePatterns ) { label = __( 'Add pattern' ); } else if ( ! label ) { - label = _x( 'Add block', 'Generic label for block inserter button' ); + label = _x( 'Add block', 'Generic label for Block Inserter button' ); } // Handle both onClick functions from the toggle and the parent component. diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index 5966b3d90c66fb..2d0fe3325e3278 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/packages/block-editor/src/components/inserter/index.native.js @@ -43,7 +43,7 @@ const defaultRenderToggle = ( { } onClick={ onToggle } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 604268fb1fe431..f291b3260414fa 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -372,7 +372,7 @@ $block-inserter-tabs-height: 44px; border-top: $border-width solid $gray-300; padding: $grid-unit-20; flex-shrink: 0; - position: relative; // prevents overscroll when block library is open + position: relative; // prevents overscroll when Block Inserter is open } .block-editor-inserter__quick-inserter { diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index d3ce5d80993d3f..110d6572f643d9 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -18,18 +18,18 @@ const { Tabs } = unlock( componentsPrivateApis ); const blocksTab = { name: 'blocks', - /* translators: Blocks tab title in the block inserter. */ + /* translators: Blocks tab title in the Block Inserter. */ title: __( 'Blocks' ), }; const patternsTab = { name: 'patterns', - /* translators: Theme and Directory Patterns tab title in the block inserter. */ + /* translators: Theme and Directory Patterns tab title in the Block Inserter. */ title: __( 'Patterns' ), }; const mediaTab = { name: 'media', - /* translators: Media tab title in the block inserter. */ + /* translators: Media tab title in the Block Inserter. */ title: __( 'Media' ), }; @@ -43,7 +43,7 @@ function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {