true, 'count' => 0 ) ); ?>>
*
* @since 6.5.0
*
@@ -171,7 +171,7 @@ function wp_interactivity_config( string $store_namespace, array $config = array
* @return string A complete `data-wp-context` directive with a JSON encoded value representing the context array and
* the store namespace if specified.
*/
- function data_wp_context( array $context, string $store_namespace = '' ): string {
+ function wp_interactivity_data_wp_context( array $context, string $store_namespace = '' ): string {
return 'data-wp-context=\'' .
( $store_namespace ? $store_namespace . '::' : '' ) .
( empty( $context ) ? '{}' : wp_json_encode( $context, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ) .
diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php
index 3aeaf745fe49f1..9419ae4a716b98 100644
--- a/lib/global-styles-and-settings.php
+++ b/lib/global-styles-and-settings.php
@@ -224,7 +224,7 @@ function gutenberg_add_global_styles_block_custom_css() {
$stylesheet_handle = 'global-styles';
- /**
+ /*
* When `wp_should_load_separate_core_block_assets()` is true, follow a similar
* logic to the one in `gutenberg_add_global_styles_for_blocks` to add the custom
* css only when the block is rendered.
diff --git a/lib/script-loader.php b/lib/script-loader.php
index 1c0e5f5a941fe6..01008a0da8967e 100644
--- a/lib/script-loader.php
+++ b/lib/script-loader.php
@@ -54,18 +54,18 @@ function gutenberg_enqueue_global_styles() {
// Add each block as an inline css.
gutenberg_add_global_styles_for_blocks();
- /**
+ /*
* Add the custom CSS for the global styles.
* Before that, dequeue the Customizer's custom CSS
* and add it before the global styles custom CSS.
+ * Don't enqueue Customizer's custom CSS separately.
*/
- // Don't enqueue Customizer's custom CSS separately.
remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
$custom_css = wp_get_custom_css();
if ( ! wp_should_load_separate_core_block_assets() ) {
- /**
+ /*
* If loading all block assets together, add both
* the base and block custom CSS at once. Else load
* the base custom CSS only, and the block custom CSS
diff --git a/package-lock.json b/package-lock.json
index 9c03b2e0e1fafa..8c6b476dc0e53a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "gutenberg",
- "version": "17.8.0-rc.4",
+ "version": "17.8.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "gutenberg",
- "version": "17.8.0-rc.4",
+ "version": "17.8.0",
"hasInstallScript": true,
"license": "GPL-2.0-or-later",
"dependencies": {
@@ -55967,8 +55967,7 @@
"@wordpress/icons": "file:../icons",
"@wordpress/notices": "file:../notices",
"@wordpress/private-apis": "file:../private-apis",
- "@wordpress/url": "file:../url",
- "nanoid": "^3.3.4"
+ "@wordpress/url": "file:../url"
},
"engines": {
"node": ">=16.0.0"
@@ -56142,7 +56141,7 @@
},
"packages/react-native-aztec": {
"name": "@wordpress/react-native-aztec",
- "version": "1.112.0",
+ "version": "1.114.0",
"license": "GPL-2.0-or-later",
"dependencies": {
"@wordpress/element": "file:../element",
@@ -56155,7 +56154,7 @@
},
"packages/react-native-bridge": {
"name": "@wordpress/react-native-bridge",
- "version": "1.112.0",
+ "version": "1.114.0",
"license": "GPL-2.0-or-later",
"dependencies": {
"@wordpress/react-native-aztec": "file:../react-native-aztec"
@@ -56166,7 +56165,7 @@
},
"packages/react-native-editor": {
"name": "@wordpress/react-native-editor",
- "version": "1.112.0",
+ "version": "1.114.0",
"hasInstallScript": true,
"license": "GPL-2.0-or-later",
"dependencies": {
@@ -70828,8 +70827,7 @@
"@wordpress/icons": "file:../icons",
"@wordpress/notices": "file:../notices",
"@wordpress/private-apis": "file:../private-apis",
- "@wordpress/url": "file:../url",
- "nanoid": "^3.3.4"
+ "@wordpress/url": "file:../url"
}
},
"@wordpress/plugins": {
diff --git a/package.json b/package.json
index f93f37999cc6bd..ce777b3c1b96e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "gutenberg",
- "version": "17.8.0-rc.4",
+ "version": "17.8.0",
"private": true,
"description": "A new WordPress editor experience.",
"author": "The WordPress Contributors",
diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
index 52dfeb3899d772..5760753c48ce85 100644
--- a/packages/base-styles/_default-custom-properties.scss
+++ b/packages/base-styles/_default-custom-properties.scss
@@ -1,4 +1,3 @@
-
// It is important to include these styles in all built stylesheets.
// This allows to CSS variables post CSS plugin to generate fallbacks.
// It also provides default CSS variables for npm package consumers.
@@ -6,4 +5,5 @@
@include admin-scheme(#007cba);
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+ --wp-bound-block-color: #9747ff;
}
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 109926ebf411a9..a1de82c2081cc5 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -367,6 +367,14 @@
}
}
+@mixin link-reset {
+ &:focus {
+ color: var(--wp-admin-theme-color--rgb);
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+ border-radius: $radius-block-ui;
+ }
+}
+
// The editor input reset with increased specificity to avoid theme styles bleeding in.
@mixin editor-input-reset() {
font-family: $editor-html-font !important;
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
new file mode 100644
index 00000000000000..4b2d3df725a66b
--- /dev/null
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
+import { connection } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+export default function BlockBindingsToolbarIndicator() {
+ return (
+
+
+
+
+ );
+}
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
new file mode 100644
index 00000000000000..4aeabdf8acf6e8
--- /dev/null
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -0,0 +1,14 @@
+.block-editor-block-bindings-toolbar-indicator {
+ display: inline-flex;
+ align-items: center;
+ height: 48px;
+ padding: 6px;
+
+ svg g {
+ stroke: var(--wp-bound-block-color);
+ fill: transparent;
+ stroke-width: 1.5;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ }
+}
diff --git a/packages/block-editor/src/components/block-list/block-outline.native.js b/packages/block-editor/src/components/block-list/block-outline.native.js
index 76f0f8cb947941..92146816eb1529 100644
--- a/packages/block-editor/src/components/block-list/block-outline.native.js
+++ b/packages/block-editor/src/components/block-list/block-outline.native.js
@@ -14,16 +14,11 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import styles from './block.scss';
const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
+const DESIGN_BLOCKS_WITHOUT_OUTLINE = [ 'core/button', 'core/spacer' ];
+const MEDIA_BLOCKS_WITH_OUTLINE = [ 'core/audio', 'core/file' ];
-function BlockOutline( {
- blockCategory,
- hasInnerBlocks,
- isRootList,
- isSelected,
- name,
-} ) {
+function BlockOutline( { blockCategory, hasInnerBlocks, isSelected, name } ) {
const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
- const socialBlockWithOutline = name.includes( 'core/social-link' );
const hasBlockTextCategory =
blockCategory === 'text' && ! textBlockWithOutline;
@@ -44,19 +39,39 @@ function BlockOutline( {
hasBlockTextCategory && styles.solidBorderTextContent,
];
- const shoudlShowOutline =
- isSelected &&
- ( ( hasBlockTextCategory && hasInnerBlocks ) ||
- ( ! hasBlockTextCategory && hasInnerBlocks ) ||
- ( ! hasBlockTextCategory && isRootList ) ||
- socialBlockWithOutline ||
- textBlockWithOutline );
-
- return (
- shoudlShowOutline && (
-
+ { showSettings && (
+ {
+ const {
+ getBlockEditingMode,
+ getBlockName,
+ getSelectedBlockClientIds,
+ } = select( blockEditorStore );
+
+ const selectedBlockClientIds = getSelectedBlockClientIds();
+ const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+ const isDefaultEditingMode =
+ getBlockEditingMode( selectedBlockClientId ) === 'default';
+ const blockType =
+ selectedBlockClientId &&
+ getBlockType( getBlockName( selectedBlockClientId ) );
+ const isToolbarEnabled =
+ blockType &&
+ hasBlockSupport( blockType, '__experimentalToolbar', true );
+
+ if (
+ ! isToolbarEnabled ||
+ ( ! isDefaultEditingMode && ! hasAnyBlockControls )
+ ) {
+ return false;
+ }
+
+ return true;
+ },
+ [ hasAnyBlockControls ]
+ );
+}
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index e00058eb905329..3959257ecf4e86 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { Popover } from '@wordpress/components';
import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
import { useRef } from '@wordpress/element';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -20,14 +19,13 @@ import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
import { store as blockEditorStore } from '../../store';
import usePopoverScroll from '../block-popover/use-popover-scroll';
import ZoomOutModeInserters from './zoom-out-mode-inserters';
+import { useShowBlockTools } from './use-show-block-tools';
function selector( select ) {
const {
getSelectedBlockClientId,
getFirstMultiSelectedBlockClientId,
- getBlock,
getSettings,
- hasMultiSelection,
__unstableGetEditorMode,
isTyping,
} = select( blockEditorStore );
@@ -35,36 +33,13 @@ function selector( select ) {
const clientId =
getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
- const { name = '', attributes = {} } = getBlock( clientId ) || {};
const editorMode = __unstableGetEditorMode();
- const hasSelectedBlock = clientId && name;
- const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
- name,
- attributes,
- } );
- const _showEmptyBlockSideInserter =
- clientId &&
- ! isTyping() &&
- editorMode === 'edit' &&
- isUnmodifiedDefaultBlock( { name, attributes } );
- const maybeShowBreadcrumb =
- hasSelectedBlock &&
- ! hasMultiSelection() &&
- ( editorMode === 'navigation' || editorMode === 'zoom-out' );
return {
clientId,
hasFixedToolbar: getSettings().hasFixedToolbar,
isTyping: isTyping(),
isZoomOutMode: editorMode === 'zoom-out',
- showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
- showBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
- showBlockToolbar:
- ! getSettings().hasFixedToolbar &&
- ! _showEmptyBlockSideInserter &&
- hasSelectedBlock &&
- ! isEmptyDefaultBlock &&
- ! maybeShowBreadcrumb,
};
}
@@ -82,18 +57,20 @@ export default function BlockTools( {
__unstableContentRef,
...props
} ) {
- const {
- clientId,
- hasFixedToolbar,
- isTyping,
- isZoomOutMode,
- showEmptyBlockSideInserter,
- showBreadcrumb,
- showBlockToolbar,
- } = useSelect( selector, [] );
+ const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
+ selector,
+ []
+ );
const isMatch = useShortcutEventMatch();
const { getSelectedBlockClientIds, getBlockRootClientId } =
useSelect( blockEditorStore );
+
+ const {
+ showEmptyBlockSideInserter,
+ showBreadcrumb,
+ showBlockToolbarPopover,
+ } = useShowBlockTools();
+
const {
duplicateBlocks,
removeBlocks,
@@ -186,7 +163,7 @@ export default function BlockTools( {
/>
) }
- { showBlockToolbar && (
+ { showBlockToolbarPopover && (
{
+ const {
+ getSelectedBlockClientId,
+ getFirstMultiSelectedBlockClientId,
+ getBlock,
+ getSettings,
+ hasMultiSelection,
+ __unstableGetEditorMode,
+ isTyping,
+ } = select( blockEditorStore );
+
+ const clientId =
+ getSelectedBlockClientId() ||
+ getFirstMultiSelectedBlockClientId();
+
+ const { name = '', attributes = {} } = getBlock( clientId ) || {};
+ const editorMode = __unstableGetEditorMode();
+ const hasSelectedBlock = clientId && name;
+ const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
+ name,
+ attributes,
+ } );
+ const _showEmptyBlockSideInserter =
+ clientId &&
+ ! isTyping() &&
+ editorMode === 'edit' &&
+ isUnmodifiedDefaultBlock( { name, attributes } );
+ const maybeShowBreadcrumb =
+ hasSelectedBlock &&
+ ! hasMultiSelection() &&
+ ( editorMode === 'navigation' || editorMode === 'zoom-out' );
+
+ return {
+ showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+ showBreadcrumb:
+ ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+ showBlockToolbarPopover:
+ hasBlockToolbar &&
+ ! getSettings().hasFixedToolbar &&
+ ! _showEmptyBlockSideInserter &&
+ hasSelectedBlock &&
+ ! isEmptyDefaultBlock &&
+ ! maybeShowBreadcrumb,
+ showFixedToolbar:
+ editorMode !== 'zoom-out' &&
+ hasBlockToolbar &&
+ getSettings().hasFixedToolbar,
+ };
+ },
+ [ hasBlockToolbar ]
+ );
+}
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 4e8ea6dc0ff95b..f5cb968924459a 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -600,6 +600,7 @@ const STYLE_KEYS = [
'filter',
'outline',
'shadow',
+ 'background',
];
function pickStyleKeys( treeToPickFrom ) {
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 6b9de943ea0bf2..1214ec4ec7c08a 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -14,7 +14,12 @@ import {
Tooltip,
} from '@wordpress/components';
import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import {
+ Icon,
+ connection,
+ lockSmall as lock,
+ pinSmall,
+} from '@wordpress/icons';
import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
import { useSelect, useDispatch } from '@wordpress/data';
import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -32,11 +37,12 @@ import { useBlockLock } from '../block-lock';
import { store as blockEditorStore } from '../../store';
import useListViewImages from './use-list-view-images';
import { useListViewContext } from './context';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
function ListViewBlockSelectButton(
{
className,
- block: { clientId },
+ block: { clientId, name: blockName },
onClick,
onContextMenu,
onMouseDown,
@@ -66,6 +72,7 @@ function ListViewBlockSelectButton(
getBlockRootClientId,
getBlockOrder,
getBlocksByClientId,
+ getBlockAttributes,
canRemoveBlocks,
} = useSelect( blockEditorStore );
const { duplicateBlocks, multiSelect, removeBlocks } =
@@ -75,6 +82,8 @@ function ListViewBlockSelectButton(
const images = useListViewImages( { clientId, isExpanded } );
const { rootClientId } = useListViewContext();
+ const isConnected = getBlockAttributes( clientId )?.metadata?.bindings;
+
const positionLabel = blockInformation?.positionLabel
? sprintf(
// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
@@ -278,6 +287,11 @@ function ListViewBlockSelectButton(
) }
+ { isConnected && canBindBlock( blockName ) && (
+
+
- { showSettings && (
-
- { renderSettings() }
-
- ) }
+ { renderSettings() }
+
+ ) }
{ additionalControls && ! showSettings && (
{ additionalControls }
diff --git a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
index 8528655c1dcc9e..43e887888dbd13 100644
--- a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
+++ b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
@@ -5,7 +5,7 @@ import {
documentHasSelection,
documentHasUncollapsedSelection,
} from '@wordpress/dom';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
import { useRefEffect } from '@wordpress/compose';
/**
@@ -16,6 +16,7 @@ import { useNotifyCopy } from '../../utils/use-notify-copy';
import { getPasteBlocks, setClipboardBlocks } from './utils';
export default function useClipboardHandler() {
+ const registry = useRegistry();
const {
getBlocksByClientId,
getSelectedBlockClientIds,
@@ -104,7 +105,7 @@ export default function useClipboardHandler() {
blocks = [ head, ...inBetweenBlocks, tail ];
}
- setClipboardBlocks( event, blocks );
+ setClipboardBlocks( event, blocks, registry );
}
}
diff --git a/packages/block-editor/src/components/writing-flow/utils.js b/packages/block-editor/src/components/writing-flow/utils.js
index ef1827077ccbf1..2a2010854ed205 100644
--- a/packages/block-editor/src/components/writing-flow/utils.js
+++ b/packages/block-editor/src/components/writing-flow/utils.js
@@ -8,36 +8,51 @@ import {
pasteHandler,
findTransform,
getBlockTransforms,
+ store as blocksStore,
} from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { getPasteEventData } from '../../utils/pasting';
+import { store as blockEditorStore } from '../../store';
+
+export const requiresWrapperOnCopy = Symbol( 'requiresWrapperOnCopy' );
/**
* Sets the clipboard data for the provided blocks, with both HTML and plain
* text representations.
*
- * @param {ClipboardEvent} event Clipboard event.
- * @param {WPBlock[]} blocks Blocks to set as clipboard data.
+ * @param {ClipboardEvent} event Clipboard event.
+ * @param {WPBlock[]} blocks Blocks to set as clipboard data.
+ * @param {Object} registry The registry to select from.
*/
-export function setClipboardBlocks( event, blocks ) {
+export function setClipboardBlocks( event, blocks, registry ) {
let _blocks = blocks;
- const wrapperBlockName = event.clipboardData.getData(
- '__unstableWrapperBlockName'
- );
- if ( wrapperBlockName ) {
- _blocks = createBlock(
- wrapperBlockName,
- JSON.parse(
- event.clipboardData.getData(
- '__unstableWrapperBlockAttributes'
- )
- ),
- _blocks
- );
+ const [ firstBlock ] = blocks;
+
+ if ( firstBlock ) {
+ const firstBlockType = registry
+ .select( blocksStore )
+ .getBlockType( firstBlock.name );
+
+ if ( firstBlockType[ requiresWrapperOnCopy ] ) {
+ const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+ registry.select( blockEditorStore );
+ const wrapperBlockClientId = getBlockRootClientId(
+ firstBlock.clientId
+ );
+ const wrapperBlockName = getBlockName( wrapperBlockClientId );
+
+ if ( wrapperBlockName ) {
+ _blocks = createBlock(
+ wrapperBlockName,
+ getBlockAttributes( wrapperBlockClientId ),
+ _blocks
+ );
+ }
+ }
}
const serialized = serialize( _blocks );
diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js
index eb84352ab62f09..93bf87f42124b1 100644
--- a/packages/block-editor/src/hooks/block-hooks.js
+++ b/packages/block-editor/src/hooks/block-hooks.js
@@ -19,18 +19,28 @@ import { store as blockEditorStore } from '../store';
const EMPTY_OBJECT = {};
-function BlockHooksControlPure( { name, clientId } ) {
+function BlockHooksControlPure( {
+ name,
+ clientId,
+ metadata: { ignoredHookedBlocks = [] } = {},
+} ) {
const blockTypes = useSelect(
( select ) => select( blocksStore ).getBlockTypes(),
[]
);
+ // A hooked block added via a filter will not be exposed through a block
+ // type's `blockHooks` property; however, if the containing layout has been
+ // modified, it will be present in the anchor block's `ignoredHookedBlocks`
+ // metadata.
const hookedBlocksForCurrentBlock = useMemo(
() =>
blockTypes?.filter(
- ( { blockHooks } ) => blockHooks && name in blockHooks
+ ( { name: blockName, blockHooks } ) =>
+ ( blockHooks && name in blockHooks ) ||
+ ignoredHookedBlocks.includes( blockName )
),
- [ blockTypes, name ]
+ [ blockTypes, name, ignoredHookedBlocks ]
);
const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
@@ -79,6 +89,16 @@ function BlockHooksControlPure( { name, clientId } ) {
// inserted and then moved around a bit by the user.
candidates = getBlocks( clientId );
break;
+
+ case undefined:
+ // If we haven't found a blockHooks field with a relative position for the hooked
+ // block, it means that it was added by a filter. In this case, we look for the block
+ // both among the current block's siblings and its children.
+ candidates = [
+ ...getBlocks( rootClientId ),
+ ...getBlocks( clientId ),
+ ];
+ break;
}
const hookedBlock = candidates?.find(
@@ -151,6 +171,18 @@ function BlockHooksControlPure( { name, clientId } ) {
false
);
break;
+
+ case undefined:
+ // If we do not know the relative position, it is because the block was
+ // added via a filter. In this case, we default to inserting it after the
+ // current block.
+ insertBlock(
+ block,
+ blockIndex + 1,
+ rootClientId, // Insert as a child of the current block's parent
+ false
+ );
+ break;
}
};
@@ -219,6 +251,7 @@ function BlockHooksControlPure( { name, clientId } ) {
export default {
edit: BlockHooksControlPure,
+ attributeKeys: [ 'metadata' ],
hasSupport() {
return true;
},
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 0e5b6614f07cbf..5cd8cb46b3b7e7 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -4,12 +4,13 @@
import { getBlockType, store as blocksStore } from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useCallback, useState } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
+import { RichTextData } from '@wordpress/rich-text';
+
/**
* Internal dependencies
*/
-import { store as blockEditorStore } from '../store';
-import { useBlockEditContext } from '../components/block-edit/context';
import { unlock } from '../lock-unlock';
/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
@@ -22,87 +23,238 @@ import { unlock } from '../lock-unlock';
* @return {WPHigherOrderComponent} Higher-order component.
*/
-export const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
'core/paragraph': [ 'content' ],
'core/heading': [ 'content' ],
'core/image': [ 'url', 'title', 'alt' ],
'core/button': [ 'url', 'text', 'linkTarget' ],
};
-const createEditFunctionWithBindingsAttribute = () =>
- createHigherOrderComponent(
- ( BlockEdit ) => ( props ) => {
- const { clientId, name: blockName } = useBlockEditContext();
- const blockBindingsSources = unlock(
- useSelect( blocksStore )
- ).getAllBlockBindingsSources();
- const { getBlockAttributes } = useSelect( blockEditorStore );
-
- const updatedAttributes = getBlockAttributes( clientId );
- if ( updatedAttributes?.metadata?.bindings ) {
- Object.entries( updatedAttributes.metadata.bindings ).forEach(
- ( [ attributeName, settings ] ) => {
- const source = blockBindingsSources[ settings.source ];
-
- if ( source && source.useSource ) {
- // Second argument (`updateMetaValue`) will be used to update the value in the future.
- const {
- placeholder,
- useValue: [ metaValue = null ] = [],
- } = source.useSource( props, settings.args );
-
- if ( placeholder && ! metaValue ) {
- // If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.
- // Adding this workaround until attributes and metadata fields types are improved and include `url`.
- const htmlAttribute =
- getBlockType( blockName ).attributes[
- attributeName
- ].attribute;
- if (
- htmlAttribute === 'src' ||
- htmlAttribute === 'href'
- ) {
- updatedAttributes[ attributeName ] = null;
- } else {
- updatedAttributes[ attributeName ] =
- placeholder;
- }
- }
-
- if ( metaValue ) {
- updatedAttributes[ attributeName ] = metaValue;
- }
- }
- }
- );
+/**
+ * Based on the given block name,
+ * check if it is possible to bind the block.
+ *
+ * @param {string} blockName - The block name.
+ * @return {boolean} Whether it is possible to bind the block to sources.
+ */
+export function canBindBlock( blockName ) {
+ return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
+}
+
+/**
+ * Based on the given block name and attribute name,
+ * check if it is possible to bind the block attribute.
+ *
+ * @param {string} blockName - The block name.
+ * @param {string} attributeName - The attribute name.
+ * @return {boolean} Whether it is possible to bind the block attribute.
+ */
+export function canBindAttribute( blockName, attributeName ) {
+ return (
+ canBindBlock( blockName ) &&
+ BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )
+ );
+}
+
+/**
+ * This component is responsible for detecting and
+ * propagating data changes from the source to the block.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.attrName - The attribute name.
+ * @param {Object} props.blockProps - The block props with bound attribute.
+ * @param {Object} props.source - Source handler.
+ * @param {Object} props.args - The arguments to pass to the source.
+ * @param {Function} props.onPropValueChange - The function to call when the attribute value changes.
+ * @return {null} Data-handling component. Render nothing.
+ */
+const BindingConnector = ( {
+ args,
+ attrName,
+ blockProps,
+ source,
+ onPropValueChange,
+} ) => {
+ const { placeholder, value: propValue } = source.useSource(
+ blockProps,
+ args
+ );
+
+ const { name: blockName } = blockProps;
+ const attrValue = blockProps.attributes[ attrName ];
+
+ const updateBoundAttibute = useCallback(
+ ( newAttrValue, prevAttrValue ) => {
+ /*
+ * If the attribute is a RichTextData instance,
+ * (core/paragraph, core/heading, core/button, etc.)
+ * compare its HTML representation with the new value.
+ *
+ * To do: it looks like a workaround.
+ * Consider improving the attribute and metadata fields types.
+ */
+ if ( prevAttrValue instanceof RichTextData ) {
+ // Bail early if the Rich Text value is the same.
+ if ( prevAttrValue.toHTMLString() === newAttrValue ) {
+ return;
+ }
+
+ /*
+ * To preserve the value type,
+ * convert the new value to a RichTextData instance.
+ */
+ newAttrValue = RichTextData.fromHTMLString( newAttrValue );
+ }
+
+ if ( prevAttrValue === newAttrValue ) {
+ return;
}
- return (
+ onPropValueChange( { [ attrName ]: newAttrValue } );
+ },
+ [ attrName, onPropValueChange ]
+ );
+
+ useLayoutEffect( () => {
+ if ( typeof propValue !== 'undefined' ) {
+ updateBoundAttibute( propValue, attrValue );
+ } else if ( placeholder ) {
+ /*
+ * Placeholder fallback.
+ * If the attribute is `src` or `href`,
+ * a placeholder can't be used because it is not a valid url.
+ * Adding this workaround until
+ * attributes and metadata fields types are improved and include `url`.
+ */
+ const htmlAttribute =
+ getBlockType( blockName ).attributes[ attrName ].attribute;
+
+ if ( htmlAttribute === 'src' || htmlAttribute === 'href' ) {
+ updateBoundAttibute( null );
+ return;
+ }
+
+ updateBoundAttibute( placeholder );
+ }
+ }, [
+ updateBoundAttibute,
+ propValue,
+ attrValue,
+ placeholder,
+ blockName,
+ attrName,
+ ] );
+
+ return null;
+};
+
+/**
+ * BlockBindingBridge acts like a component wrapper
+ * that connects the bound attributes of a block
+ * to the source handlers.
+ * For this, it creates a BindingConnector for each bound attribute.
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.blockProps - The BlockEdit props object.
+ * @param {Object} props.bindings - The block bindings settings.
+ * @param {Function} props.onPropValueChange - The function to call when the attribute value changes.
+ * @return {null} Data-handling component. Render nothing.
+ */
+function BlockBindingBridge( { blockProps, bindings, onPropValueChange } ) {
+ const blockBindingsSources = unlock(
+ useSelect( blocksStore )
+ ).getAllBlockBindingsSources();
+
+ return (
+ <>
+ { Object.entries( bindings ).map(
+ ( [ attrName, boundAttribute ] ) => {
+ // Bail early if the block doesn't have a valid source handler.
+ const source =
+ blockBindingsSources[ boundAttribute.source ];
+ if ( ! source?.useSource ) {
+ return null;
+ }
+
+ return (
+ }>} */
const content = {};
for ( const block of blocks ) {
if ( block.name === patternBlockName ) continue;
- Object.assign(
- content,
- getContentValuesFromInnerBlocks( block.innerBlocks, defaultValues )
- );
- const blockId = block.attributes.metadata?.id;
- if ( ! hasOverridableAttributes( block ) || ! blockId ) continue;
+ if ( block.innerBlocks.length ) {
+ Object.assign(
+ content,
+ getContentValuesFromInnerBlocks(
+ block.innerBlocks,
+ defaultValues,
+ legacyIdMap
+ )
+ );
+ }
+ const metadataName =
+ legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
+ if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+ continue;
+ }
+
const attributes = getOverridableAttributes( block );
+
for ( const attributeKey of attributes ) {
if (
! isAttributeEqual(
block.attributes[ attributeKey ],
- defaultValues[ blockId ][ attributeKey ]
+ defaultValues?.[ metadataName ]?.[ attributeKey ]
)
) {
- content[ blockId ] ??= { values: {}, blockName: block.name };
+ content[ metadataName ] ??= {};
// TODO: We need a way to represent `undefined` in the serialized overrides.
// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
- content[ blockId ].values[ attributeKey ] =
+ content[ metadataName ][ attributeKey ] =
block.attributes[ attributeKey ] === undefined
? // TODO: We use an empty string to represent undefined for now until
// we support a richer format for overrides and the block binding API.
@@ -278,8 +314,15 @@ export default function ReusableBlockEdit( {
[ editedRecord.blocks, editedRecord.content ]
);
+ const legacyIdMap = useRef( {} );
+
// Apply the initial overrides from the pattern block to the inner blocks.
useEffect( () => {
+ // Build a map of clientIds to the old nano id system to provide back compat.
+ legacyIdMap.current = getLegacyIdMap(
+ initialBlocks,
+ initialContent.current
+ );
defaultContent.current = {};
const originalEditingMode = getBlockEditingMode( patternClientId );
// Replace the contents of the blocks with the overrides.
@@ -291,7 +334,8 @@ export default function ReusableBlockEdit( {
applyInitialContentValuesToInnerBlocks(
initialBlocks,
initialContent.current,
- defaultContent.current
+ defaultContent.current,
+ legacyIdMap.current
)
);
} );
@@ -343,7 +387,8 @@ export default function ReusableBlockEdit( {
setAttributes( {
content: getContentValuesFromInnerBlocks(
blocks,
- defaultContent.current
+ defaultContent.current,
+ legacyIdMap.current
),
} );
} );
diff --git a/packages/block-library/src/block/index.php b/packages/block-library/src/block/index.php
index 4aabe98ffa4650..49b5786eacc79f 100644
--- a/packages/block-library/src/block/index.php
+++ b/packages/block-library/src/block/index.php
@@ -48,26 +48,35 @@ function render_block_core_block( $attributes ) {
$content = $wp_embed->run_shortcode( $reusable_block->post_content );
$content = $wp_embed->autoembed( $content );
- // Back compat, the content attribute was previously named overrides and
- // had a slightly different format. For blocks that have not been migrated,
- // also convert the format here so that the provided `pattern/overrides`
- // context is correct.
- if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
- $migrated_content = array();
- foreach ( $attributes['overrides'] as $id => $values ) {
- $migrated_content[ $id ] = array(
- 'values' => $values,
- );
+ // Back compat.
+ // For blocks that have not been migrated in the editor, add some back compat
+ // so that front-end rendering continues to work.
+
+ // This matches the `v2` deprecation. Removes the inner `values` property
+ // from every item.
+ if ( isset( $attributes['content'] ) ) {
+ foreach ( $attributes['content'] as &$content_data ) {
+ if ( isset( $content_data['values'] ) ) {
+ $is_assoc_array = is_array( $content_data['values'] ) && ! wp_is_numeric_array( $content_data['values'] );
+
+ if ( $is_assoc_array ) {
+ $content_data = $content_data['values'];
+ }
+ }
}
- $attributes['content'] = $migrated_content;
}
- $has_pattern_overrides = isset( $attributes['content'] );
+
+ // This matches the `v1` deprecation. Rename `overrides` to `content`.
+ if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
+ $attributes['content'] = $attributes['overrides'];
+ }
/**
* We set the `pattern/overrides` context through the `render_block_context`
* filter so that it is available when a pattern's inner blocks are
* rendering via do_blocks given it only receives the inner content.
*/
+ $has_pattern_overrides = isset( $attributes['content'] );
if ( $has_pattern_overrides ) {
$filter_block_context = static function ( $context ) use ( $attributes ) {
$context['pattern/overrides'] = $attributes['content'];
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index 528a488039acfd..0ce8e107a0074b 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
import {
__unstableGetAnimateClassName as getAnimateClassName,
ResizableBox,
@@ -36,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
import FileBlockInspector from './inspector';
import { browserSupportsPdfs } from './utils';
import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
export const MIN_PREVIEW_HEIGHT = 200;
export const MAX_PREVIEW_HEIGHT = 2000;
@@ -72,7 +73,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
displayPreview,
previewHeight,
} = attributes;
- const { getSettings } = useSelect( blockEditorStore );
const { media } = useSelect(
( select ) => ( {
media:
@@ -86,20 +86,13 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
const { createErrorNotice } = useDispatch( noticesStore );
const { toggleSelection } = useDispatch( blockEditorStore );
- useEffect( () => {
- // Upload a file drag-and-dropped into the editor.
- if ( isBlobURL( href ) ) {
- const file = getBlobByURL( href );
-
- getSettings().mediaUpload( {
- filesList: [ file ],
- onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
- onError: onUploadError,
- } );
-
- revokeBlobURL( href );
- }
+ useUploadMediaFromBlobURL( {
+ url: href,
+ onChange: onSelectFile,
+ onError: onUploadError,
+ } );
+ useEffect( () => {
if ( RichText.isEmpty( downloadButtonText ) ) {
setAttributes( {
downloadButtonText: _x( 'Download', 'button label' ),
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index e1e221bc9575a0..489343e1dfef77 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -20,7 +20,7 @@ import {
useBlockEditingMode,
} from '@wordpress/block-editor';
import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
@@ -336,7 +336,7 @@ export function ImageEdit( {
} );
// Much of this description is duplicated from MediaPlaceholder.
- const { lockUrlControls = false } = useSelect(
+ const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
( select ) => {
if ( ! isSingleSelected ) {
return {};
@@ -351,6 +351,13 @@ export function ImageEdit( {
!! metadata?.bindings?.url &&
( ! blockBindingsSource ||
blockBindingsSource?.lockAttributesEditing ),
+ lockUrlControlsMessage: blockBindingsSource?.label
+ ? sprintf(
+ /* translators: %s: Label of the bindings source. */
+ __( 'Connected to %s' ),
+ blockBindingsSource.label
+ )
+ : __( 'Connected to dynamic data' ),
};
},
[ isSingleSelected ]
@@ -387,7 +394,7 @@ export function ImageEdit( {
- { __( 'Connected to a custom field' ) }
+ { lockUrlControlsMessage }
) : (
content
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index ea0f82a2e1986b..e55f6bfa03d73e 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -410,7 +410,9 @@ export default function Image( {
lockUrlControls = false,
lockHrefControls = false,
lockAltControls = false,
+ lockAltControlsMessage,
lockTitleControls = false,
+ lockTitleControlsMessage,
lockCaption = false,
} = useSelect(
( select ) => {
@@ -454,10 +456,24 @@ export default function Image( {
!! altBinding &&
( ! altBindingSource ||
altBindingSource?.lockAttributesEditing ),
+ lockAltControlsMessage: altBindingSource?.label
+ ? sprintf(
+ /* translators: %s: Label of the bindings source. */
+ __( 'Connected to %s' ),
+ altBindingSource.label
+ )
+ : __( 'Connected to dynamic data' ),
lockTitleControls:
!! titleBinding &&
( ! titleBindingSource ||
titleBindingSource?.lockAttributesEditing ),
+ lockTitleControlsMessage: titleBindingSource?.label
+ ? sprintf(
+ /* translators: %s: Label of the bindings source. */
+ __( 'Connected to %s' ),
+ titleBindingSource.label
+ )
+ : __( 'Connected to dynamic data' ),
};
},
[ clientId, isSingleSelected, metadata?.bindings ]
@@ -557,11 +573,7 @@ export default function Image( {
disabled={ lockAltControls }
help={
lockAltControls ? (
- <>
- { __(
- 'Connected to a custom field'
- ) }
-
+ <>{ lockAltControlsMessage }
) : (
<>
@@ -607,11 +619,7 @@ export default function Image( {
disabled={ lockTitleControls }
help={
lockTitleControls ? (
- <>
- { __(
- 'Connected to a custom field'
- ) }
-
+ <>{ lockTitleControlsMessage }
) : (
<>
{ __(
@@ -652,11 +660,7 @@ export default function Image( {
readOnly={ lockAltControls }
help={
lockAltControls ? (
- <>
- { __(
- 'Connected to a custom field'
- ) }
-
+ <>{ lockAltControlsMessage }
) : (
<>
@@ -694,7 +698,7 @@ export default function Image( {
readOnly={ lockTitleControls }
help={
lockTitleControls ? (
- <>{ __( 'Connected to a custom field' ) }
+ <>{ lockTitleControlsMessage }
) : (
<>
{ __(
diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js
index 46cbd3a94831d5..467154f76992e1 100644
--- a/packages/block-library/src/list-item/edit.js
+++ b/packages/block-library/src/list-item/edit.js
@@ -29,7 +29,6 @@ import {
useOutdentListItem,
useSplit,
useMerge,
- useCopy,
} from './hooks';
import { convertToListItems } from './utils';
@@ -79,7 +78,7 @@ export default function ListItemEdit( {
mergeBlocks,
} ) {
const { placeholder, content } = attributes;
- const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
+ const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
renderAppender: false,
__unstableDisableDropZone: true,
diff --git a/packages/block-library/src/list-item/hooks/index.js b/packages/block-library/src/list-item/hooks/index.js
index 3bbc3167abed32..1687adbe740d0a 100644
--- a/packages/block-library/src/list-item/hooks/index.js
+++ b/packages/block-library/src/list-item/hooks/index.js
@@ -4,4 +4,3 @@ export { default as useEnter } from './use-enter';
export { default as useSpace } from './use-space';
export { default as useSplit } from './use-split';
export { default as useMerge } from './use-merge';
-export { default as useCopy } from './use-copy';
diff --git a/packages/block-library/src/list-item/hooks/use-copy.js b/packages/block-library/src/list-item/hooks/use-copy.js
deleted file mode 100644
index 7a76019ad11a4b..00000000000000
--- a/packages/block-library/src/list-item/hooks/use-copy.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-export default function useCopy( clientId ) {
- const { getBlockRootClientId, getBlockName, getBlockAttributes } =
- useSelect( blockEditorStore );
-
- return useRefEffect( ( node ) => {
- function onCopy( event ) {
- // The event propagates through all nested lists, so don't override
- // when copying nested list items.
- if ( event.clipboardData.getData( '__unstableWrapperBlockName' ) ) {
- return;
- }
-
- const rootClientId = getBlockRootClientId( clientId );
- event.clipboardData.setData(
- '__unstableWrapperBlockName',
- getBlockName( rootClientId )
- );
- event.clipboardData.setData(
- '__unstableWrapperBlockAttributes',
- JSON.stringify( getBlockAttributes( rootClientId ) )
- );
- }
-
- node.addEventListener( 'copy', onCopy );
- node.addEventListener( 'cut', onCopy );
- return () => {
- node.removeEventListener( 'copy', onCopy );
- node.removeEventListener( 'cut', onCopy );
- };
- }, [] );
-}
diff --git a/packages/block-library/src/list-item/hooks/use-indent-list-item.js b/packages/block-library/src/list-item/hooks/use-indent-list-item.js
index 6eb5d9d73ba658..2cd62d201d61f1 100644
--- a/packages/block-library/src/list-item/hooks/use-indent-list-item.js
+++ b/packages/block-library/src/list-item/hooks/use-indent-list-item.js
@@ -61,5 +61,7 @@ export default function useIndentListItem( clientId ) {
clonedBlocks[ clonedBlocks.length - 1 ].clientId
);
}
+
+ return true;
}, [ clientId ] );
}
diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
index 85c433fbeffada..a17890eada6c51 100644
--- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
+++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
@@ -93,5 +93,7 @@ export default function useOutdentListItem() {
removeBlock( parentListId, shouldSelectParent );
}
} );
+
+ return true;
}, [] );
}
diff --git a/packages/block-library/src/list-item/hooks/use-space.js b/packages/block-library/src/list-item/hooks/use-space.js
index deb6313e4b1b0e..ee4d8bdbf8786e 100644
--- a/packages/block-library/src/list-item/hooks/use-space.js
+++ b/packages/block-library/src/list-item/hooks/use-space.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { useRefEffect } from '@wordpress/compose';
-import { SPACE } from '@wordpress/keycodes';
+import { SPACE, TAB } from '@wordpress/keycodes';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
@@ -10,11 +10,13 @@ import { useSelect } from '@wordpress/data';
* Internal dependencies
*/
import useIndentListItem from './use-indent-list-item';
+import useOutdentListItem from './use-outdent-list-item';
export default function useSpace( clientId ) {
const { getSelectionStart, getSelectionEnd, getBlockIndex } =
useSelect( blockEditorStore );
const indentListItem = useIndentListItem( clientId );
+ const outdentListItem = useOutdentListItem();
return useRefEffect(
( element ) => {
@@ -23,9 +25,8 @@ export default function useSpace( clientId ) {
if (
event.defaultPrevented ||
- keyCode !== SPACE ||
+ ( keyCode !== SPACE && keyCode !== TAB ) ||
// Only override when no modifiers are pressed.
- shiftKey ||
altKey ||
metaKey ||
ctrlKey
@@ -33,18 +34,24 @@ export default function useSpace( clientId ) {
return;
}
- if ( getBlockIndex( clientId ) === 0 ) {
- return;
- }
-
const selectionStart = getSelectionStart();
const selectionEnd = getSelectionEnd();
if (
selectionStart.offset === 0 &&
selectionEnd.offset === 0
) {
- event.preventDefault();
- indentListItem();
+ if ( shiftKey ) {
+ // Note that backspace behaviour in defined in onMerge.
+ if ( keyCode === TAB ) {
+ if ( outdentListItem() ) {
+ event.preventDefault();
+ }
+ }
+ } else if ( getBlockIndex( clientId ) !== 0 ) {
+ if ( indentListItem() ) {
+ event.preventDefault();
+ }
+ }
}
}
diff --git a/packages/block-library/src/list-item/index.js b/packages/block-library/src/list-item/index.js
index 00adc1c2c40266..07c5bb7fda9015 100644
--- a/packages/block-library/src/list-item/index.js
+++ b/packages/block-library/src/list-item/index.js
@@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { listItem as icon } from '@wordpress/icons';
+import { privateApis } from '@wordpress/block-editor';
/**
* Internal dependencies
@@ -11,6 +12,7 @@ import metadata from './block.json';
import edit from './edit';
import save from './save';
import transforms from './transforms';
+import { unlock } from '../lock-unlock';
const { name } = metadata;
@@ -27,6 +29,7 @@ export const settings = {
};
},
transforms,
+ [ unlock( privateApis ).requiresWrapperOnCopy ]: true,
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 3a3a654aee6126..1d73d09bbd1fbb 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -552,7 +552,7 @@ private static function get_nav_element_directives( $is_interactive ) {
return '';
}
// When adding to this array be mindful of security concerns.
- $nav_element_context = data_wp_context(
+ $nav_element_context = wp_interactivity_data_wp_context(
array(
'overlayOpenedBy' => array(
'click' => false,
diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
index 2ce4acd4a782cf..213d9bc96cd64b 100644
--- a/packages/block-library/src/query/utils.js
+++ b/packages/block-library/src/query/utils.js
@@ -131,16 +131,18 @@ export const useTaxonomies = ( postType ) => {
const taxonomies = useSelect(
( select ) => {
const { getTaxonomies } = select( coreStore );
- const filteredTaxonomies = getTaxonomies( {
+ return getTaxonomies( {
type: postType,
per_page: -1,
- context: 'view',
} );
- return filteredTaxonomies;
},
[ postType ]
);
- return taxonomies;
+ return useMemo( () => {
+ return taxonomies?.filter(
+ ( { visibility } ) => !! visibility?.publicly_queryable
+ );
+ }, [ taxonomies ] );
};
/**
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index c368c2ab03dbf8..ca8c70edfa907d 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -179,7 +179,7 @@ function render_block_core_search( $attributes ) {
if ( $is_expandable_searchfield ) {
$aria_label_expanded = __( 'Submit Search' );
$aria_label_collapsed = __( 'Expand search field' );
- $form_context = data_wp_context(
+ $form_context = wp_interactivity_data_wp_context(
array(
'isSearchInputVisible' => $open_by_default,
'inputId' => $input_id,
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index fe4146406ddf60..079811f0aae958 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -268,6 +268,14 @@ const SiteLogo = ( {
);
+ // Support the previous location for the Site Icon settings. To be removed
+ // when the required WP core version for Gutenberg is >= 6.5.0.
+ const shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;
+
+ const siteIconSettingsUrl = shouldUseNewUrl
+ ? siteUrl + '/wp-admin/options-general.php'
+ : siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';
+
const syncSiteIconHelpText = createInterpolateElement(
__(
'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the Site Icon settings.'
@@ -276,10 +284,7 @@ const SiteLogo = ( {
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js
index 4b64c529299467..a89031b5f99ce9 100644
--- a/packages/block-library/src/utils/hooks.js
+++ b/packages/block-library/src/utils/hooks.js
@@ -2,6 +2,9 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useEffect, useRef } from '@wordpress/element';
+import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
/**
@@ -19,6 +22,53 @@ export function useCanEditEntity( kind, name, recordId ) {
);
}
-export default {
- useCanEditEntity,
-};
+/**
+ * Handles uploading a media file from a blob URL on mount.
+ *
+ * @param {Object} args Upload media arguments.
+ * @param {string} args.url Blob URL.
+ * @param {?Array} args.allowedTypes Array of allowed media types.
+ * @param {Function} args.onChange Function called when the media is uploaded.
+ * @param {Function} args.onError Function called when an error happens.
+ */
+export function useUploadMediaFromBlobURL( args = {} ) {
+ const latestArgs = useRef( args );
+ const { getSettings } = useSelect( blockEditorStore );
+
+ useLayoutEffect( () => {
+ latestArgs.current = args;
+ } );
+
+ useEffect( () => {
+ if (
+ ! latestArgs.current.url ||
+ ! isBlobURL( latestArgs.current.url )
+ ) {
+ return;
+ }
+
+ const file = getBlobByURL( latestArgs.current.url );
+ if ( ! file ) {
+ return;
+ }
+
+ const { url, allowedTypes, onChange, onError } = latestArgs.current;
+ const { mediaUpload } = getSettings();
+
+ mediaUpload( {
+ filesList: [ file ],
+ allowedTypes,
+ onFileChange: ( [ media ] ) => {
+ if ( isBlobURL( media?.url ) ) {
+ return;
+ }
+
+ revokeBlobURL( url );
+ onChange( media );
+ },
+ onError: ( message ) => {
+ onError( message );
+ },
+ } );
+ }, [ getSettings ] );
+}
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 60c841b18a9318..65a8e952d4b9b0 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
import {
BaseControl,
Button,
@@ -24,12 +24,11 @@ import {
MediaUploadCheck,
MediaReplaceFlow,
useBlockProps,
- store as blockEditorStore,
} from '@wordpress/block-editor';
import { useRef, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { useInstanceId } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
import { video as icon } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
@@ -37,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
* Internal dependencies
*/
import { createUpgradedEmbedBlock } from '../embed/util';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
import VideoCommonSettings from './edit-common-settings';
import TracksEditor from './tracks-editor';
import Tracks from './tracks';
@@ -75,21 +75,13 @@ function VideoEdit( {
const posterImageButton = useRef();
const { id, controls, poster, src, tracks } = attributes;
const isTemporaryVideo = ! id && isBlobURL( src );
- const { getSettings } = useSelect( blockEditorStore );
- useEffect( () => {
- if ( ! id && isBlobURL( src ) ) {
- const file = getBlobByURL( src );
- if ( file ) {
- getSettings().mediaUpload( {
- filesList: [ file ],
- onFileChange: ( [ media ] ) => onSelectVideo( media ),
- onError: onUploadError,
- allowedTypes: ALLOWED_MEDIA_TYPES,
- } );
- }
- }
- }, [] );
+ useUploadMediaFromBlobURL( {
+ url: src,
+ allowedTypes: ALLOWED_MEDIA_TYPES,
+ onChange: onSelectVideo,
+ onError: onUploadError,
+ } );
useEffect( () => {
// Placeholder may be rendered.
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 7062c98404a2a6..62933d69d764f4 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -36,6 +36,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
requiresOptOut: true,
useEngine: true,
},
+ backgroundImage: {
+ value: [ 'background', 'backgroundImage' ],
+ support: [ 'background', 'backgroundImage' ],
+ useEngine: true,
+ },
backgroundRepeat: {
value: [ 'background', 'backgroundRepeat' ],
support: [ 'background', 'backgroundRepeat' ],
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 769d201e587d07..6cdde409cbd176 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,11 +5,18 @@
### Bug Fix
- `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
+- `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
- `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
+- `Button`: Place `children` before the icon when `iconPosition` is `right` ([#59489](https://github.com/WordPress/gutenberg/pull/59489)).
### Internal
- `SnackbarList`, `Snackbar`: add unit tests ([#59157](https://github.com/WordPress/gutenberg/pull/59157)).
+- Remove unused `useLatestRef()` hook ([#59471](https://github.com/WordPress/gutenberg/pull/59471)).
+
+### Experimental
+
+- `CustomSelectControlV2`: Remove legacy adapter layer ([#59420](https://github.com/WordPress/gutenberg/pull/59420)).
## 27.0.0 (2024-02-21)
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index 966075dd6e2b9a..a16f190e44704b 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -223,10 +223,10 @@ export function UnforwardedButton(
{
+ onChange?.( args );
+ setValue( args.selectedItem );
+ } }
+ value={ options.find(
+ ( option: any ) => option.key === value.key
+ ) }
+ />
+ );
+};
+
+describe.each( [
+ [ 'Uncontrolled', UncontrolledCustomSelect ],
+ [ 'Controlled', LegacyControlledCustomSelect ],
+] )( 'CustomSelectControl (%s)', ( ...modeAndComponent ) => {
+ const [ , Component ] = modeAndComponent;
+
+ it( 'Should replace the initial selection when a new item is selected', async () => {
+ render( {
- onChange?.( args );
- setValue( args.selectedItem );
+ { ...props }
+ onChange={ ( nextValue: string | string[] ) => {
+ setValue( nextValue );
+ props.onChange?.( nextValue );
} }
- value={ options.find(
- ( option: any ) => option.key === value.key
- ) }
+ value={ value }
/>
);
};
-describe( 'With Legacy Props', () => {
- describe.each( [
- [ 'Uncontrolled', UncontrolledCustomSelect ],
- [ 'Controlled', LegacyControlledCustomSelect ],
- ] )( '%s', ( ...modeAndComponent ) => {
- const [ , Component ] = modeAndComponent;
+describe.each( [
+ [ 'Uncontrolled', UncontrolledCustomSelect ],
+ [ 'Controlled', ControlledCustomSelect ],
+] )( 'CustomSelectControlV2 (%s)', ( ...modeAndComponent ) => {
+ const [ , Component ] = modeAndComponent;
- it( 'Should replace the initial selection when a new item is selected', async () => {
- render( undefined }
- />
- undefined }
- />
- undefined }
- >
- foobar
-
- { /* @ts-expect-error - when `children` are passed, `onChange` should have new default signature */ }
- undefined }
- >
- foobar
-
- ;
-} );
-
-const defaultProps = {
- label: 'label!',
- children: legacyProps.options.map( ( { name, key } ) => (
- {
- setValue( nextValue );
- props.onChange?.( nextValue );
- } }
- value={ value }
- />
- );
-};
-describe( 'With Default Props', () => {
- describe.each( [
- [ 'Uncontrolled', UncontrolledCustomSelect ],
- [ 'Controlled', ControlledCustomSelect ],
- ] )( '%s', ( ...modeAndComponent ) => {
- const [ , Component ] = modeAndComponent;
-
- it( 'Should replace the initial selection when a new item is selected', async () => {
+ it( 'Should have correct aria-selected value for selections', async () => {
render(
+ { [
+ 'aurora borealis green',
+ 'flamingo pink sunrise',
+ 'incandescent glow',
+ 'rose blush',
+ 'ultraviolet morning light',
+ ].map( ( item ) => (
+
+ { item }
+
+ ) ) }
+
+ );
- await press.Enter();
- expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+ const currentSelectedItem = screen.getByRole( 'combobox', {
+ expanded: false,
} );
- it( 'Should have correct aria-selected value for selections', async () => {
- render(
- { [
- 'aurora borealis green',
- 'flamingo pink sunrise',
- 'incandescent glow',
- 'rose blush',
- 'ultraviolet morning light',
- ].map( ( item ) => (
-
- { item }
-
- ) ) }
-
- );
-
- const currentSelectedItem = screen.getByRole( 'combobox', {
- expanded: false,
- } );
-
- // ensure more than one item is selected due to defaultValues
- expect( currentSelectedItem ).toHaveTextContent(
- `${ defaultValues.length } items selected`
- );
-
- await click( currentSelectedItem );
-
- expect( screen.getByRole( 'listbox' ) ).toHaveAttribute(
- 'aria-multiselectable'
- );
-
- // ensure defaultValues are selected in list of items
- defaultValues.forEach( ( value ) =>
- expect(
- screen.getByRole( 'option', {
- name: value,
- selected: true,
- } )
- ).toBeVisible()
- );
-
- // name of next selection
- const nextSelectionName = 'rose blush';
-
- // element for next selection
- const nextSelection = screen.getByRole( 'option', {
- name: nextSelectionName,
- } );
- // click next selection to add another item to current selection
- await click( nextSelection );
+ // click next selection to add another item to current selection
+ await click( nextSelection );
- // updated array containing defaultValues + the item just selected
- const updatedSelection =
- defaultValues.concat( nextSelectionName );
+ // updated array containing defaultValues + the item just selected
+ const updatedSelection = defaultValues.concat( nextSelectionName );
- expect( onChangeMock ).toHaveBeenCalledWith( updatedSelection );
+ expect( onChangeMock ).toHaveBeenCalledWith( updatedSelection );
- expect( nextSelection ).toHaveAttribute( 'aria-selected' );
+ expect( nextSelection ).toHaveAttribute( 'aria-selected' );
- // expect increased array length for current selection
- expect( currentSelectedItem ).toHaveTextContent(
- `${ updatedSelection.length } items selected`
- );
- } );
-
- it( 'Should be able to deselect items when provided an array', async () => {
- // initial selection as defaultValue
- const defaultValues = [
- 'aurora borealis green',
- 'incandescent glow',
- 'key lime green',
- 'rose blush',
- 'ultraviolet morning light',
- ];
-
- render(
-
- { defaultValues.map( ( item ) => (
-
- { item }
-
- ) ) }
-
- );
-
- const currentSelectedItem = screen.getByRole( 'combobox', {
- expanded: false,
- } );
-
- await click( currentSelectedItem );
-
- // Array containing items to deselect
- const nextSelection = [
- 'aurora borealis green',
- 'rose blush',
- 'incandescent glow',
- ];
-
- // Deselect some items by clicking them to ensure that changes
- // are reflected correctly
- await Promise.all(
- nextSelection.map( async ( value ) => {
- await click(
- screen.getByRole( 'option', { name: value } )
- );
- expect(
- screen.getByRole( 'option', {
- name: value,
- selected: false,
- } )
- ).toBeVisible();
- } )
- );
-
- // expect different array length from defaultValues due to deselecting items
- expect( currentSelectedItem ).toHaveTextContent(
- `${
- defaultValues.length - nextSelection.length
- } items selected`
- );
- } );
+ // expect increased array length for current selection
+ expect( currentSelectedItem ).toHaveTextContent(
+ `${ updatedSelection.length } items selected`
+ );
} );
- it( 'Should allow rendering a custom value when using `renderSelectedValue`', async () => {
- const renderValue = ( value: string | string[] ) => {
- return 
;
- };
+ it( 'Should be able to deselect items when provided an array', async () => {
+ // initial selection as defaultValue
+ const defaultValues = [
+ 'aurora borealis green',
+ 'incandescent glow',
+ 'key lime green',
+ 'rose blush',
+ 'ultraviolet morning light',
+ ];
render(
-
-
- { renderValue( 'april-29' ) }
-
-
- { renderValue( 'july-9' ) }
-
+
+ { defaultValues.map( ( item ) => (
+
+ { item }
+
+ ) ) }
);
@@ -854,26 +333,77 @@ describe( 'With Default Props', () => {
expanded: false,
} );
- expect( currentSelectedItem ).toBeVisible();
+ await click( currentSelectedItem );
- // expect that the initial selection renders an image
- expect( currentSelectedItem ).toContainElement(
- screen.getByRole( 'img', { name: 'april-29' } )
+ // Array containing items to deselect
+ const nextSelection = [
+ 'aurora borealis green',
+ 'rose blush',
+ 'incandescent glow',
+ ];
+
+ // Deselect some items by clicking them to ensure that changes
+ // are reflected correctly
+ await Promise.all(
+ nextSelection.map( async ( value ) => {
+ await click(
+ screen.getByRole( 'option', { name: value } )
+ );
+ expect(
+ screen.getByRole( 'option', {
+ name: value,
+ selected: false,
+ } )
+ ).toBeVisible();
+ } )
);
- expect(
- screen.queryByRole( 'img', { name: 'july-9' } )
- ).not.toBeInTheDocument();
-
- await click( currentSelectedItem );
+ // expect different array length from defaultValues due to deselecting items
+ expect( currentSelectedItem ).toHaveTextContent(
+ `${
+ defaultValues.length - nextSelection.length
+ } items selected`
+ );
+ } );
+ } );
- // expect that the other image is only visible after opening popover with options
- expect(
- screen.getByRole( 'img', { name: 'july-9' } )
- ).toBeVisible();
- expect(
- screen.getByRole( 'option', { name: 'july-9' } )
- ).toBeVisible();
+ it( 'Should allow rendering a custom value when using `renderSelectedValue`', async () => {
+ const renderValue = ( value: string | string[] ) => {
+ return ;
+ };
+
+ render(
+
+
+ { renderValue( 'april-29' ) }
+
+
+ { renderValue( 'july-9' ) }
+
+
+ );
+
+ const currentSelectedItem = screen.getByRole( 'combobox', {
+ expanded: false,
} );
+
+ expect( currentSelectedItem ).toBeVisible();
+
+ // expect that the initial selection renders an image
+ expect( currentSelectedItem ).toContainElement(
+ screen.getByRole( 'img', { name: 'april-29' } )
+ );
+
+ expect(
+ screen.queryByRole( 'img', { name: 'july-9' } )
+ ).not.toBeInTheDocument();
+
+ await click( currentSelectedItem );
+
+ // expect that the other image is only visible after opening popover with options
+ expect( screen.getByRole( 'img', { name: 'july-9' } ) ).toBeVisible();
+ expect(
+ screen.getByRole( 'option', { name: 'july-9' } )
+ ).toBeVisible();
} );
} );
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
index b32f3ee2113080..51b0cb6b38d6a7 100644
--- a/packages/components/src/custom-select-control-v2/types.ts
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -92,7 +92,6 @@ type LegacyOnChangeObject = {
};
export type LegacyCustomSelectProps = {
- children?: never;
/**
* Optional classname for the component.
*/
diff --git a/packages/components/src/flex/flex/hook.ts b/packages/components/src/flex/flex/hook.ts
index df53667915999c..f5648c187c7628 100644
--- a/packages/components/src/flex/flex/hook.ts
+++ b/packages/components/src/flex/flex/hook.ts
@@ -22,7 +22,7 @@ import type { FlexProps } from '../types';
function useDeprecatedProps(
props: WordPressComponentProps< FlexProps, 'div' >
-): WordPressComponentProps< FlexProps, 'div' > {
+): Omit< typeof props, 'isReversed' > {
const { isReversed, ...otherProps } = props;
if ( typeof isReversed !== 'undefined' ) {
diff --git a/packages/components/src/h-stack/hook.tsx b/packages/components/src/h-stack/hook.tsx
index b7b8cf92954a1d..bb473a881b9dea 100644
--- a/packages/components/src/h-stack/hook.tsx
+++ b/packages/components/src/h-stack/hook.tsx
@@ -47,7 +47,8 @@ export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
gap: spacing,
};
- const flexProps = useFlex( propsForFlex );
+ // Omit `isColumn` because it's not used in HStack.
+ const { isColumn, ...flexProps } = useFlex( propsForFlex );
return flexProps;
}
diff --git a/packages/components/src/h-stack/test/index.tsx b/packages/components/src/h-stack/test/index.tsx
index ea4f9c94fbe7f8..75352f3dfd22f0 100644
--- a/packages/components/src/h-stack/test/index.tsx
+++ b/packages/components/src/h-stack/test/index.tsx
@@ -39,4 +39,14 @@ describe( 'props', () => {
);
expect( container ).toMatchSnapshot();
} );
+
+ test( 'should not pass through invalid props to the `as` component', () => {
+ const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+ return ;
+ };
+
+ render( foobar );
+
+ expect( console ).not.toHaveErrored();
+ } );
} );
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index aec8f94d1b5088..c3e010c40c3b8a 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -289,13 +289,9 @@ const ImageComponent = ( {
key={ url }
style={ imageContainerStyles }
>
- { isSelected &&
- highlightSelected &&
- ! (
- isUploadInProgress ||
- isUploadFailed ||
- isUploadPaused
- ) &&
diff --git a/packages/components/src/utils/hooks/index.js b/packages/components/src/utils/hooks/index.js
index beacf31b7562cd..896f691cdc5427 100644
--- a/packages/components/src/utils/hooks/index.js
+++ b/packages/components/src/utils/hooks/index.js
@@ -2,4 +2,3 @@ export { default as useControlledState } from './use-controlled-state';
export { default as useUpdateEffect } from './use-update-effect';
export { useControlledValue } from './use-controlled-value';
export { useCx } from './use-cx';
-export { useLatestRef } from './use-latest-ref';
diff --git a/packages/components/src/utils/hooks/test/use-latest-ref.js b/packages/components/src/utils/hooks/test/use-latest-ref.js
deleted file mode 100644
index 0c424a62390332..00000000000000
--- a/packages/components/src/utils/hooks/test/use-latest-ref.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useLatestRef } from '..';
-
-function debounce( callback, timeout = 0 ) {
- let timeoutId = 0;
- return ( ...args ) => {
- window.clearTimeout( timeoutId );
- timeoutId = window.setTimeout( () => callback( ...args ), timeout );
- };
-}
-
-function useDebounce( callback, timeout = 0 ) {
- const callbackRef = useLatestRef( callback );
- return debounce( ( ...args ) => callbackRef.current( ...args ), timeout );
-}
-
-function Example() {
- const [ count, setCount ] = useState( 0 );
- const increment = () => setCount( count + 1 );
- const incrementDebounced = debounce( increment, 50 );
- const incrementDebouncedWithLatestRef = useDebounce( increment, 50 );
-
- return (
- <>
-
- - - ); -} - -function getCount() { - return screen.getByText( /Count:/ ).innerHTML; -} - -function incrementCount() { - fireEvent.click( screen.getByText( 'Increment immediately' ) ); -} - -function incrementCountDebounced() { - fireEvent.click( screen.getByText( 'Increment debounced' ) ); -} - -function incrementCountDebouncedRef() { - fireEvent.click( - screen.getByText( 'Increment debounced with latest ref' ) - ); -} - -describe( 'useLatestRef', () => { - describe( 'Example', () => { - // Prove the example works as expected. - it( 'should start at 0', () => { - render(foobar );
+
+ expect( console ).not.toHaveErrored();
+ } );
} );
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 7e45bec25856f7..7c8216b095cb43 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -51,6 +51,9 @@
.dataviews-view-table-wrapper {
overflow-x: auto;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
}
.dataviews-view-table {
@@ -219,7 +222,6 @@
color: $gray-900;
text-overflow: ellipsis;
white-space: nowrap;
- overflow: hidden;
display: block;
width: 100%;
@@ -235,6 +237,7 @@
&:hover {
color: $gray-900;
}
+ @include link-reset();
}
button.components-button.is-link {
@@ -473,6 +476,10 @@
.dataviews-no-results,
.dataviews-loading {
padding: 0 $grid-unit-40;
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.dataviews-view-table-selection-checkbox label {
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index 3b46a7424dc1b1..61c37955222aa4 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -11,6 +11,7 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
Tooltip,
+ Spinner,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useAsyncList } from '@wordpress/compose';
@@ -190,7 +191,7 @@ export default function ViewGrid( {
'dataviews-no-results': ! isLoading,
} ) }
>
-
) }
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 8490c315e88541..ca6de677b99fd0 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -11,6 +11,7 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
Button,
+ Spinner,
} from '@wordpress/components';
import { ENTER, SPACE } from '@wordpress/keycodes';
import { info } from '@wordpress/icons';
@@ -60,7 +61,7 @@ export default function ViewList( {
} ) }
>
{ ! hasData && (
- Count: { count }
-
-
- - - - ); -} - -function getCount() { - return screen.getByText( /Count:/ ).innerHTML; -} - -function incrementCount() { - fireEvent.click( screen.getByText( 'Increment immediately' ) ); -} - -function incrementCountDebounced() { - fireEvent.click( screen.getByText( 'Increment debounced' ) ); -} - -function incrementCountDebouncedRef() { - fireEvent.click( - screen.getByText( 'Increment debounced with latest ref' ) - ); -} - -describe( 'useLatestRef', () => { - describe( 'Example', () => { - // Prove the example works as expected. - it( 'should start at 0', () => { - render(
{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }
+{ isLoading ?
{ isLoading ? __( 'Loading…' ) : __( 'No results' ) }
+{ isLoading ?