diff --git a/packages/block-editor/src/components/typewriter/index.js b/packages/block-editor/src/components/typewriter/index.js
index ac83d173a95d9d..b5e230d314a7e2 100644
--- a/packages/block-editor/src/components/typewriter/index.js
+++ b/packages/block-editor/src/components/typewriter/index.js
@@ -273,7 +273,7 @@ function Typewriter( { children } ) {
* challenges in Internet Explorer, and is simply skipped, rendering the given
* props children instead.
*
- * @type {WPComponent}
+ * @type {Component}
*/
const TypewriterOrIEBypass = isIE ? ( props ) => props.children : Typewriter;
diff --git a/packages/block-editor/src/components/unit-control/README.md b/packages/block-editor/src/components/unit-control/README.md
index 4d99d85254decb..e5126e7bf45242 100644
--- a/packages/block-editor/src/components/unit-control/README.md
+++ b/packages/block-editor/src/components/unit-control/README.md
@@ -26,8 +26,8 @@ UnitControl component allows the user to set a value as well as a unit (e.g. `px
Renders a control (`input` and `select`) with the values `10` and `px` parsed from `10px`.
```jsx
+import { useState } from 'react';
import { __experimentalUnitControl as UnitControl } from '@wordpress/block-editor/';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ value, setValue ] = useState( '10px' );
diff --git a/packages/block-editor/src/components/unsupported-block-details/index.native.js b/packages/block-editor/src/components/unsupported-block-details/index.native.js
new file mode 100644
index 00000000000000..a35d96a925676b
--- /dev/null
+++ b/packages/block-editor/src/components/unsupported-block-details/index.native.js
@@ -0,0 +1,183 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import {
+ requestUnsupportedBlockFallback,
+ sendActionButtonPressedAction,
+ actionButtons,
+} from '@wordpress/react-native-bridge';
+import { help } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { getBlockType } from '@wordpress/blocks';
+import { useCallback, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+
+const EMPTY_ARRAY = [];
+
+const UnsupportedBlockDetails = ( {
+ clientId,
+ showSheet,
+ onCloseSheet,
+ customBlockTitle = '',
+ icon,
+ title,
+ description,
+ actionButtonLabel,
+ customActions = EMPTY_ARRAY,
+} ) => {
+ const [ sendFallbackMessage, setSendFallbackMessage ] = useState( false );
+ const [ sendButtonPressMessage, setSendButtonPressMessage ] =
+ useState( false );
+
+ const {
+ blockName,
+ blockContent,
+ isUnsupportedBlockEditorSupported,
+ canEnableUnsupportedBlockEditor,
+ isEditableInUnsupportedBlockEditor,
+ } = useUnsupportedBlockEditor( clientId );
+
+ // Styles
+ const textStyle = usePreferredColorSchemeStyle(
+ styles[ 'unsupported-block-details__text' ],
+ styles[ 'unsupported-block-details__text--dark' ]
+ );
+ const titleStyle = usePreferredColorSchemeStyle(
+ styles[ 'unsupported-block-details__title' ],
+ styles[ 'unsupported-block-details__title--dark' ]
+ );
+ const descriptionStyle = usePreferredColorSchemeStyle(
+ styles[ 'unsupported-block-details__description' ],
+ styles[ 'unsupported-block-details__description--dark' ]
+ );
+ const iconStyle = usePreferredColorSchemeStyle(
+ styles[ 'unsupported-block-details__icon' ],
+ styles[ 'unsupported-block-details__icon--dark' ]
+ );
+ const actionButtonStyle = usePreferredColorSchemeStyle(
+ styles[ 'unsupported-block-details__action-button' ],
+ styles[ 'unsupported-block-details__action-button--dark' ]
+ );
+
+ const blockTitle =
+ customBlockTitle || getBlockType( blockName )?.title || blockName;
+
+ const requestFallback = useCallback( () => {
+ if (
+ canEnableUnsupportedBlockEditor &&
+ isUnsupportedBlockEditorSupported === false
+ ) {
+ onCloseSheet();
+ setSendButtonPressMessage( true );
+ } else {
+ onCloseSheet();
+ setSendFallbackMessage( true );
+ }
+ }, [
+ canEnableUnsupportedBlockEditor,
+ isUnsupportedBlockEditorSupported,
+ onCloseSheet,
+ ] );
+
+ // The description can include extra notes via WP hooks.
+ const descriptionWithNotes = applyFilters(
+ 'native.unsupported_block_details_extra_note',
+ description,
+ blockName
+ );
+
+ const webEditorDefaultLabel = applyFilters(
+ 'native.unsupported_block_details_web_editor_action',
+ __( 'Edit using web editor' )
+ );
+
+ const canUseWebEditor =
+ ( isUnsupportedBlockEditorSupported ||
+ canEnableUnsupportedBlockEditor ) &&
+ isEditableInUnsupportedBlockEditor;
+ const actions = [
+ ...[
+ canUseWebEditor && {
+ label: actionButtonLabel || webEditorDefaultLabel,
+ onPress: requestFallback,
+ },
+ ],
+ ...customActions,
+ ].filter( Boolean );
+
+ return (
+ {
+ if ( sendFallbackMessage ) {
+ // On iOS, onModalHide is called when the controller is still part of the hierarchy.
+ // A small delay will ensure that the controller has already been removed.
+ this.timeout = setTimeout( () => {
+ // For the Classic block, the content is kept in the `content` attribute.
+ requestUnsupportedBlockFallback(
+ blockContent,
+ clientId,
+ blockName,
+ blockTitle
+ );
+ }, 100 );
+ setSendFallbackMessage( false );
+ } else if ( sendButtonPressMessage ) {
+ this.timeout = setTimeout( () => {
+ sendActionButtonPressedAction(
+ actionButtons.missingBlockAlertActionButton
+ );
+ }, 100 );
+ setSendButtonPressMessage( false );
+ }
+ } }
+ >
+
+ { title }
+ { isEditableInUnsupportedBlockEditor &&
+ descriptionWithNotes && (
+
+ { descriptionWithNotes }
+
+ ) }
+
+ { actions.map( ( { label, onPress }, index ) => (
+
+ );
+};
+
+export default UnsupportedBlockDetails;
diff --git a/packages/block-editor/src/components/unsupported-block-details/style.native.scss b/packages/block-editor/src/components/unsupported-block-details/style.native.scss
new file mode 100644
index 00000000000000..a12272e6c85938
--- /dev/null
+++ b/packages/block-editor/src/components/unsupported-block-details/style.native.scss
@@ -0,0 +1,56 @@
+.unsupported-block-details__container {
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.unsupported-block-details__icon {
+ size: 36;
+ height: 36;
+ padding-top: 8;
+ padding-bottom: 8;
+ color: $gray;
+}
+
+.unsupported-block-details__icon--dark {
+ color: $gray-20;
+}
+
+.unsupported-block-details__text {
+ text-align: center;
+ color: $gray-dark;
+}
+
+.unsupported-block-details__text--dark {
+ color: $white;
+}
+
+.unsupported-block-details__title {
+ padding-top: 8;
+ padding-bottom: 12;
+ font-size: 20;
+ font-weight: bold;
+ color: $gray-dark;
+}
+
+.unsupported-block-details__title--dark {
+ color: $white;
+}
+
+.unsupported-block-details__description {
+ padding-bottom: 24;
+ font-size: 16;
+ color: $gray-darken-20;
+}
+
+.unsupported-block-details__description--dark {
+ color: $gray-20;
+}
+
+.unsupported-block-details__action-button {
+ color: $blue-50;
+}
+
+.unsupported-block-details__action-button--dark {
+ color: $blue-30;
+}
diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md
index a10ae409ef61a1..46f673ecd35545 100644
--- a/packages/block-editor/src/components/url-input/README.md
+++ b/packages/block-editor/src/components/url-input/README.md
@@ -53,7 +53,7 @@ wp.blocks.registerBlockType( /* ... */, {
},
edit: function( props ) {
- return wp.element.createElement( wp.blockEditor.URLInputButton, {
+ return React.createElement( wp.blockEditor.URLInputButton, {
className: props.className,
url: props.attributes.url,
onChange: function( url, post ) {
@@ -63,7 +63,7 @@ wp.blocks.registerBlockType( /* ... */, {
},
save: function( props ) {
- return wp.element.createElement( 'a', {
+ return React.createElement( 'a', {
href: props.attributes.url,
}, props.attributes.text );
}
@@ -189,7 +189,7 @@ wp.blocks.registerBlockType( /* ... */, {
},
edit: function( props ) {
- return wp.element.createElement( wp.blockEditor.URLInput, {
+ return React.createElement( wp.blockEditor.URLInput, {
className: props.className,
value: props.attributes.url,
onChange: function( url, post ) {
@@ -199,7 +199,7 @@ wp.blocks.registerBlockType( /* ... */, {
},
save: function( props ) {
- return wp.element.createElement( 'a', {
+ return React.createElement( 'a', {
href: props.attributes.url,
}, props.attributes.text );
}
diff --git a/packages/block-editor/src/components/use-on-block-drop/index.js b/packages/block-editor/src/components/use-on-block-drop/index.js
index 6b0a9300124493..72ea6a698c3439 100644
--- a/packages/block-editor/src/components/use-on-block-drop/index.js
+++ b/packages/block-editor/src/components/use-on-block-drop/index.js
@@ -16,13 +16,13 @@ import { getFilesFromDataTransfer } from '@wordpress/dom';
*/
import { store as blockEditorStore } from '../../store';
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
/** @typedef {import('./types').WPDropOperation} WPDropOperation */
/**
* Retrieve the data for a block drop event.
*
- * @param {WPSyntheticEvent} event The drop event.
+ * @param {SyntheticEvent} event The drop event.
*
* @return {Object} An object with block drag and drop data.
*/
diff --git a/packages/block-editor/src/components/use-unsupported-block-editor/index.native.js b/packages/block-editor/src/components/use-unsupported-block-editor/index.native.js
new file mode 100644
index 00000000000000..4b5bbe65857b28
--- /dev/null
+++ b/packages/block-editor/src/components/use-unsupported-block-editor/index.native.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+// Blocks that can't be edited through the Unsupported block editor identified by their name.
+const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
+
+/**
+ * Hook that retrieves the settings to determine if the
+ * Unsupported Block Editor can be used in a specific block.
+ *
+ * @param {string} clientId Client ID of block.
+ * @return {Object} Unsupported block editor settings.
+ */
+export default function useUnsupportedBlockEditor( clientId ) {
+ return useSelect(
+ ( select ) => {
+ const { getBlock, getSettings } = select( blockEditorStore );
+ const { capabilities } = getSettings();
+
+ const block = getBlock( clientId );
+ const blockAttributes = block?.attributes || {};
+
+ const blockDetails = {
+ blockName: block?.name,
+ blockContent: serialize( block ? [ block ] : [] ),
+ };
+
+ // If the block is unsupported, use the `original` attributes to identify the block's name.
+ if ( blockDetails.blockName === 'core/missing' ) {
+ blockDetails.blockName = blockAttributes.originalName;
+ blockDetails.blockContent =
+ blockDetails.blockName === 'core/freeform'
+ ? blockAttributes.content
+ : block?.originalContent;
+ }
+
+ return {
+ isUnsupportedBlockEditorSupported:
+ capabilities?.unsupportedBlockEditor === true,
+ canEnableUnsupportedBlockEditor:
+ capabilities?.canEnableUnsupportedBlockEditor === true,
+ isEditableInUnsupportedBlockEditor:
+ ! UBE_INCOMPATIBLE_BLOCKS.includes(
+ blockDetails.blockName
+ ),
+ ...blockDetails,
+ };
+ },
+ [ clientId ]
+ );
+}
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index e3100dc3464c65..f15c1dac0267fd 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -22,6 +22,7 @@ import useDragSelection from './use-drag-selection';
import useSelectionObserver from './use-selection-observer';
import useClickSelection from './use-click-selection';
import useInput from './use-input';
+import useClipboardHandler from './use-clipboard-handler';
import { store as blockEditorStore } from '../../store';
export function useWritingFlow() {
@@ -35,6 +36,7 @@ export function useWritingFlow() {
before,
useMergeRefs( [
ref,
+ useClipboardHandler(),
useInput(),
useDragSelection(),
useSelectionObserver(),
@@ -93,7 +95,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
* Handles selection and navigation across blocks. This component should be
* wrapped around BlockList.
*
- * @param {Object} props Component properties.
- * @param {WPElement} props.children Children to be rendered.
+ * @param {Object} props Component properties.
+ * @param {Element} props.children Children to be rendered.
*/
export default forwardRef( WritingFlow );
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
new file mode 100644
index 00000000000000..5b78d2f8656b61
--- /dev/null
+++ b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
@@ -0,0 +1,242 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ serialize,
+ pasteHandler,
+ createBlock,
+ findTransform,
+ getBlockTransforms,
+} from '@wordpress/blocks';
+import {
+ documentHasSelection,
+ documentHasUncollapsedSelection,
+ __unstableStripHTML as stripHTML,
+} from '@wordpress/dom';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getPasteEventData } from '../../utils/pasting';
+import { store as blockEditorStore } from '../../store';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
+
+export default function useClipboardHandler() {
+ const {
+ getBlocksByClientId,
+ getSelectedBlockClientIds,
+ hasMultiSelection,
+ getSettings,
+ __unstableIsFullySelected,
+ __unstableIsSelectionCollapsed,
+ __unstableIsSelectionMergeable,
+ __unstableGetSelectedBlocksWithPartialSelection,
+ canInsertBlockType,
+ } = useSelect( blockEditorStore );
+ const {
+ flashBlock,
+ removeBlocks,
+ replaceBlocks,
+ __unstableDeleteSelection,
+ __unstableExpandSelection,
+ insertBlocks,
+ } = useDispatch( blockEditorStore );
+ const notifyCopy = useNotifyCopy();
+
+ return useRefEffect( ( node ) => {
+ function handler( event ) {
+ if ( event.defaultPrevented ) {
+ // This was likely already handled in rich-text/use-paste-handler.js.
+ return;
+ }
+
+ const selectedBlockClientIds = getSelectedBlockClientIds();
+
+ if ( selectedBlockClientIds.length === 0 ) {
+ return;
+ }
+
+ // Always handle multiple selected blocks.
+ if ( ! hasMultiSelection() ) {
+ const { target } = event;
+ const { ownerDocument } = target;
+ // If copying, only consider actual text selection as selection.
+ // Otherwise, any focus on an input field is considered.
+ const hasSelection =
+ event.type === 'copy' || event.type === 'cut'
+ ? documentHasUncollapsedSelection( ownerDocument )
+ : documentHasSelection( ownerDocument );
+
+ // Let native copy behaviour take over in input fields.
+ if ( hasSelection ) {
+ return;
+ }
+ }
+
+ if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
+ return;
+ }
+
+ event.preventDefault();
+
+ const isSelectionMergeable = __unstableIsSelectionMergeable();
+ const shouldHandleWholeBlocks =
+ __unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+ const expandSelectionIsNeeded =
+ ! shouldHandleWholeBlocks && ! isSelectionMergeable;
+ if ( event.type === 'copy' || event.type === 'cut' ) {
+ if ( selectedBlockClientIds.length === 1 ) {
+ flashBlock( selectedBlockClientIds[ 0 ] );
+ }
+ // If we have a partial selection that is not mergeable, just
+ // expand the selection to the whole blocks.
+ if ( expandSelectionIsNeeded ) {
+ __unstableExpandSelection();
+ } else {
+ notifyCopy( event.type, selectedBlockClientIds );
+ let blocks;
+ // Check if we have partial selection.
+ if ( shouldHandleWholeBlocks ) {
+ blocks = getBlocksByClientId( selectedBlockClientIds );
+ } else {
+ const [ head, tail ] =
+ __unstableGetSelectedBlocksWithPartialSelection();
+ const inBetweenBlocks = getBlocksByClientId(
+ selectedBlockClientIds.slice(
+ 1,
+ selectedBlockClientIds.length - 1
+ )
+ );
+ blocks = [ head, ...inBetweenBlocks, tail ];
+ }
+
+ const wrapperBlockName = event.clipboardData.getData(
+ '__unstableWrapperBlockName'
+ );
+
+ if ( wrapperBlockName ) {
+ blocks = createBlock(
+ wrapperBlockName,
+ JSON.parse(
+ event.clipboardData.getData(
+ '__unstableWrapperBlockAttributes'
+ )
+ ),
+ blocks
+ );
+ }
+
+ const serialized = serialize( blocks );
+
+ event.clipboardData.setData(
+ 'text/plain',
+ toPlainText( serialized )
+ );
+ event.clipboardData.setData( 'text/html', serialized );
+ }
+ }
+
+ if ( event.type === 'cut' ) {
+ // We need to also check if at the start we needed to
+ // expand the selection, as in this point we might have
+ // programmatically fully selected the blocks above.
+ if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
+ removeBlocks( selectedBlockClientIds );
+ } else {
+ event.target.ownerDocument.activeElement.contentEditable = false;
+ __unstableDeleteSelection();
+ }
+ } else if ( event.type === 'paste' ) {
+ const {
+ __experimentalCanUserUseUnfilteredHTML:
+ canUserUseUnfilteredHTML,
+ } = getSettings();
+ const { plainText, html, files } = getPasteEventData( event );
+ let blocks = [];
+
+ if ( files.length ) {
+ const fromTransforms = getBlockTransforms( 'from' );
+ blocks = files
+ .reduce( ( accumulator, file ) => {
+ const transformation = findTransform(
+ fromTransforms,
+ ( transform ) =>
+ transform.type === 'files' &&
+ transform.isMatch( [ file ] )
+ );
+ if ( transformation ) {
+ accumulator.push(
+ transformation.transform( [ file ] )
+ );
+ }
+ return accumulator;
+ }, [] )
+ .flat();
+ } else {
+ blocks = pasteHandler( {
+ HTML: html,
+ plainText,
+ mode: 'BLOCKS',
+ canUserUseUnfilteredHTML,
+ } );
+ }
+
+ if ( selectedBlockClientIds.length === 1 ) {
+ const [ selectedBlockClientId ] = selectedBlockClientIds;
+
+ if (
+ blocks.every( ( block ) =>
+ canInsertBlockType(
+ block.name,
+ selectedBlockClientId
+ )
+ )
+ ) {
+ insertBlocks(
+ blocks,
+ undefined,
+ selectedBlockClientId
+ );
+ return;
+ }
+ }
+
+ replaceBlocks(
+ selectedBlockClientIds,
+ blocks,
+ blocks.length - 1,
+ -1
+ );
+ }
+ }
+
+ node.ownerDocument.addEventListener( 'copy', handler );
+ node.ownerDocument.addEventListener( 'cut', handler );
+ node.ownerDocument.addEventListener( 'paste', handler );
+
+ return () => {
+ node.ownerDocument.removeEventListener( 'copy', handler );
+ node.ownerDocument.removeEventListener( 'cut', handler );
+ node.ownerDocument.removeEventListener( 'paste', handler );
+ };
+ }, [] );
+}
+
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText( html ) {
+ // Manually handle BR tags as line breaks prior to `stripHTML` call
+ html = html.replace( /
-
+ { imgUrl && (
+
{ imgLabel }
+
+ { filename
+ ? sprintf(
+ /* translators: %s: file name */
+ __( 'Selected image: %s' ),
+ filename
+ )
+ : __( 'No image selected' ) }
+
@@ -223,47 +252,29 @@ function BackgroundImagePanelItem( props ) {
panelId={ clientId }
>
- { !! url && (
-
- }
- variant="secondary"
- >
-
resetBackgroundImage( props ) }
- >
- { __( 'Reset ' ) }
-
-
- ) }
- { ! url && (
-
- (
-
-
- { __( 'Add background image' ) }
-
-
- ) }
+
- ) }
+ }
+ variant="secondary"
+ >
+
resetBackgroundImage( props ) }>
+ { __( 'Reset ' ) }
+
+
+
{ __( 'Enter a custom name for this block.' ) }
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index 5505c5fcae2cca..087fdffe23255a 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -44,9 +44,9 @@ export function addAttribute( settings ) {
* assigning the custom class name, if block supports custom class name.
* The control is displayed within the Advanced panel in the block inspector.
*
- * @param {WPComponent} BlockEdit Original component.
+ * @param {Component} BlockEdit Original component.
*
- * @return {WPComponent} Wrapped component.
+ * @return {Component} Wrapped component.
*/
export const withInspectorControl = createHigherOrderComponent(
( BlockEdit ) => {
diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js
index dbc8c3ec2c089f..9affb55c3ea71f 100644
--- a/packages/block-editor/src/hooks/custom-fields.js
+++ b/packages/block-editor/src/hooks/custom-fields.js
@@ -40,9 +40,9 @@ function addAttribute( settings ) {
* Currently, only the `core/paragraph` block is supported and there is only a relation
* between paragraph content and a custom field.
*
- * @param {WPComponent} BlockEdit Original component.
+ * @param {Component} BlockEdit Original component.
*
- * @return {WPComponent} Wrapped component.
+ * @return {Component} Wrapped component.
*/
const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index 54d6836a1ef0ad..a9d2facfa26702 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -115,7 +115,7 @@ function addEditProps( settings ) {
*
* @param {Object} props
*
- * @return {WPElement} Font size edit element.
+ * @return {Element} Font size edit element.
*/
export function FontSizeEdit( props ) {
const {
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
index 363766e91b4978..b835f54a12b6c4 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -17,7 +17,7 @@ export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
*
* @param {Object} props
*
- * @return {WPElement} Line height edit element.
+ * @return {Element} Line height edit element.
*/
export function LineHeightEdit( props ) {
const {
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index cfccb23663aa0d..7c1bff6e99692f 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -209,7 +209,7 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
*
* @param {Object} props
*
- * @return {WPElement} Position panel.
+ * @return {Element} Position panel.
*/
export function PositionPanel( props ) {
const {
@@ -296,7 +296,7 @@ export function PositionPanel( props ) {
>
name === category.name
)
) {
@@ -1905,8 +1906,8 @@ export const registerInserterMediaCategory =
return;
}
if (
- inserterMediaCategories.some(
- ( { labels: { name } } ) => name === category.labels?.name
+ registeredInserterMediaCategories.some(
+ ( { labels: { name } = {} } ) => name === category.labels?.name
)
) {
console.error(
@@ -1919,13 +1920,8 @@ export const registerInserterMediaCategory =
// private, so extenders can only add new inserter media categories and don't have any
// control over the core media categories.
dispatch( {
- type: 'UPDATE_SETTINGS',
- settings: {
- inserterMediaCategories: [
- ...inserterMediaCategories,
- { ...category, isExternalResource: true },
- ],
- },
+ type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+ category: { ...category, isExternalResource: true },
} );
};
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index e77e478ba60466..c4220e6e7e516c 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -45,9 +45,8 @@ export function getLastInsertedBlocksClientIds( state ) {
export const isBlockSubtreeDisabled = createSelector(
( state, clientId ) => {
const isChildSubtreeDisabled = ( childClientId ) => {
- const mode = state.blockEditingModes.get( childClientId );
return (
- ( mode === undefined || mode === 'disabled' ) &&
+ getBlockEditingMode( state, childClientId ) === 'disabled' &&
getBlockOrder( state, childClientId ).every(
isChildSubtreeDisabled
)
@@ -58,7 +57,12 @@ export const isBlockSubtreeDisabled = createSelector(
getBlockOrder( state, clientId ).every( isChildSubtreeDisabled )
);
},
- ( state ) => [ state.blockEditingModes, state.blocks.parents ]
+ ( state ) => [
+ state.blocks.parents,
+ state.blocks.order,
+ state.blockEditingModes,
+ state.blockListSettings,
+ ]
);
/**
@@ -160,3 +164,75 @@ export function getOpenedBlockSettingsMenu( state ) {
export function getStyleOverrides( state ) {
return state.styleOverrides;
}
+
+/** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
+/**
+ * Returns the registered inserter media categories through the public API.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {InserterMediaCategory[]} Inserter media categories.
+ */
+export function getRegisteredInserterMediaCategories( state ) {
+ return state.registeredInserterMediaCategories;
+}
+
+/**
+ * Returns an array containing the allowed inserter media categories.
+ * It merges the registered media categories from extenders with the
+ * core ones. It also takes into account the allowed `mime_types`, which
+ * can be altered by `upload_mimes` filter and restrict some of them.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {InserterMediaCategory[]} Client IDs of descendants.
+ */
+export const getInserterMediaCategories = createSelector(
+ ( state ) => {
+ const {
+ settings: {
+ inserterMediaCategories,
+ allowedMimeTypes,
+ enableOpenverseMediaCategory,
+ },
+ registeredInserterMediaCategories,
+ } = state;
+ // The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
+ // some of them. In this case we shouldn't add the category to the available media
+ // categories list in the inserter.
+ if (
+ ( ! inserterMediaCategories &&
+ ! registeredInserterMediaCategories.length ) ||
+ ! allowedMimeTypes
+ ) {
+ return;
+ }
+ const coreInserterMediaCategoriesNames =
+ inserterMediaCategories?.map( ( { name } ) => name ) || [];
+ const mergedCategories = [
+ ...( inserterMediaCategories || [] ),
+ ...( registeredInserterMediaCategories || [] ).filter(
+ ( { name } ) =>
+ ! coreInserterMediaCategoriesNames.includes( name )
+ ),
+ ];
+ return mergedCategories.filter( ( category ) => {
+ // Check if Openverse category is enabled.
+ if (
+ ! enableOpenverseMediaCategory &&
+ category.name === 'openverse'
+ ) {
+ return false;
+ }
+ return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
+ mimeType.startsWith( `${ category.mediaType }/` )
+ );
+ } );
+ },
+ ( state ) => [
+ state.settings.inserterMediaCategories,
+ state.settings.allowedMimeTypes,
+ state.settings.enableOpenverseMediaCategory,
+ state.registeredInserterMediaCategories,
+ ]
+);
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 18048ce138eb23..4373182d986622 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1949,6 +1949,22 @@ export function styleOverrides( state = new Map(), action ) {
return state;
}
+/**
+ * Reducer returning a map of the registered inserter media categories.
+ *
+ * @param {Array} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Array} Updated state.
+ */
+export function registeredInserterMediaCategories( state = [], action ) {
+ switch ( action.type ) {
+ case 'REGISTER_INSERTER_MEDIA_CATEGORY':
+ return [ ...state, action.category ];
+ }
+ return state;
+}
+
const combinedReducers = combineReducers( {
blocks,
isTyping,
@@ -1976,6 +1992,7 @@ const combinedReducers = combineReducers( {
removalPromptData,
blockRemovalRules,
openedBlockSettingsMenu,
+ registeredInserterMediaCategories,
} );
function withAutomaticChangeReset( reducer ) {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 2f73e50b602d2c..cb1f8ef49809d8 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1986,7 +1986,7 @@ export const getInserterItems = createSelector(
isDisabled: false,
utility: 1, // Deprecated.
frecency,
- content: reusableBlock.content.raw,
+ content: reusableBlock.content?.raw,
syncStatus: reusableBlock.wp_pattern_sync_status,
};
};
diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
index f1f8cb29f1406e..e65921e30a6ce7 100644
--- a/packages/block-editor/src/store/test/actions.js
+++ b/packages/block-editor/src/store/test/actions.js
@@ -1279,9 +1279,9 @@ describe( 'actions', () => {
fetch: () => {},
} )( {
select: {
- getSettings: () => ( {
- inserterMediaCategories: [ { name: 'a' } ],
- } ),
+ getRegisteredInserterMediaCategories: () => [
+ { name: 'a' },
+ ],
},
} );
expect( console ).toHaveErroredWith(
@@ -1296,11 +1296,9 @@ describe( 'actions', () => {
fetch: () => {},
} )( {
select: {
- getSettings: () => ( {
- inserterMediaCategories: [
- { labels: { name: 'a' } },
- ],
- } ),
+ getRegisteredInserterMediaCategories: () => [
+ { labels: { name: 'a' } },
+ ],
},
} );
expect( console ).toHaveErroredWith(
@@ -1321,18 +1319,14 @@ describe( 'actions', () => {
const dispatch = jest.fn();
registerInserterMediaCategory( category )( {
select: {
- getSettings: () => ( { inserterMediaCategories } ),
+ getRegisteredInserterMediaCategories: () =>
+ inserterMediaCategories,
},
dispatch,
} );
expect( dispatch ).toHaveBeenLastCalledWith( {
- type: 'UPDATE_SETTINGS',
- settings: {
- inserterMediaCategories: [
- ...inserterMediaCategories,
- { ...category, isExternalResource: true },
- ],
- },
+ type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+ category: { ...category, isExternalResource: true },
} );
} );
} );
diff --git a/packages/block-editor/src/utils/pasting.js b/packages/block-editor/src/utils/pasting.js
index e962e11050a1d9..f9612aad20f140 100644
--- a/packages/block-editor/src/utils/pasting.js
+++ b/packages/block-editor/src/utils/pasting.js
@@ -3,6 +3,51 @@
*/
import { getFilesFromDataTransfer } from '@wordpress/dom';
+/**
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceding and trailing content.
+ *
+ * @param {string} html the html to be normalized
+ * @return {string} the normalized html
+ */
+function removeWindowsFragments( html ) {
+ const startStr = '';
+ const startIdx = html.indexOf( startStr );
+ if ( startIdx > -1 ) {
+ html = html.substring( startIdx + startStr.length );
+ } else {
+ // No point looking for EndFragment
+ return html;
+ }
+
+ const endStr = '';
+ const endIdx = html.indexOf( endStr );
+ if ( endIdx > -1 ) {
+ html = html.substring( 0, endIdx );
+ }
+
+ return html;
+}
+
+/**
+ * Removes the charset meta tag inserted by Chromium.
+ * See:
+ * - https://github.com/WordPress/gutenberg/issues/33585
+ * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
+ *
+ * @param {string} html the html to be stripped of the meta tag.
+ * @return {string} the cleaned html
+ */
+function removeCharsetMetaTag( html ) {
+ const metaTag = ` {
- setAttributes( { url: prependHTTP( newURL ) } );
-
- if ( opensInNewTab !== newOpensInNewTab ) {
- onToggleOpenInNewTab( newOpensInNewTab );
- }
- } }
+ nofollow: newNofollow,
+ } ) =>
+ setAttributes(
+ getUpdatedLinkAttributes( {
+ rel,
+ url: newURL,
+ opensInNewTab: newOpensInNewTab,
+ nofollow: newNofollow,
+ } )
+ )
+ }
onRemove={ () => {
unlink();
richTextRef.current?.focus();
} }
forceIsEditingLink={ isEditingURL }
+ settings={ LINK_SETTINGS }
/>
) }
diff --git a/packages/block-library/src/button/get-updated-link-attributes.js b/packages/block-library/src/button/get-updated-link-attributes.js
new file mode 100644
index 00000000000000..97b837a8be20bd
--- /dev/null
+++ b/packages/block-library/src/button/get-updated-link-attributes.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { NEW_TAB_REL, NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
+
+/**
+ * WordPress dependencies
+ */
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object} attributes The current block attributes.
+ * @param {string} attributes.rel The current link rel attribute.
+ * @param {string} attributes.url The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+ rel = '',
+ url = '',
+ opensInNewTab,
+ nofollow,
+} ) {
+ let newLinkTarget;
+ // Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+ let updatedRel = rel;
+
+ if ( opensInNewTab ) {
+ newLinkTarget = NEW_TAB_TARGET;
+ updatedRel = updatedRel?.includes( NEW_TAB_REL )
+ ? updatedRel
+ : updatedRel + ` ${ NEW_TAB_REL }`;
+ } else {
+ const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+ updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+ }
+
+ if ( nofollow ) {
+ updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+ ? updatedRel
+ : updatedRel + ` ${ NOFOLLOW_REL }`;
+ } else {
+ const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+ updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+ }
+
+ return {
+ url: prependHTTP( url ),
+ linkTarget: newLinkTarget,
+ rel: updatedRel || undefined,
+ };
+}
diff --git a/packages/block-library/src/button/test/get-updated-link-attributes.js b/packages/block-library/src/button/test/get-updated-link-attributes.js
new file mode 100644
index 00000000000000..af0c3da332110c
--- /dev/null
+++ b/packages/block-library/src/button/test/get-updated-link-attributes.js
@@ -0,0 +1,113 @@
+/**
+ * Internal dependencies
+ */
+import { getUpdatedLinkAttributes } from '../get-updated-link-attributes';
+
+describe( 'getUpdatedLinkAttributes method', () => {
+ it( 'should correctly handle unassigned rel', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: true,
+ nofollow: false,
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( '_blank' );
+ expect( result.rel ).toEqual( 'noreferrer noopener' );
+ } );
+
+ it( 'should return empty rel value as undefined', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: false,
+ nofollow: false,
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( undefined );
+ expect( result.rel ).toEqual( undefined );
+ } );
+
+ it( 'should correctly handle rel with existing values', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: true,
+ nofollow: true,
+ rel: 'rel_value',
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( '_blank' );
+ expect( result.rel ).toEqual(
+ 'rel_value noreferrer noopener nofollow'
+ );
+ } );
+
+ it( 'should correctly update link attributes with opensInNewTab', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: true,
+ nofollow: false,
+ rel: 'rel_value',
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( '_blank' );
+ expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+ } );
+
+ it( 'should correctly update link attributes with nofollow', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: false,
+ nofollow: true,
+ rel: 'rel_value',
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( undefined );
+ expect( result.rel ).toEqual( 'rel_value nofollow' );
+ } );
+
+ it( 'should correctly handle rel with existing nofollow values and remove duplicates', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: true,
+ nofollow: true,
+ rel: 'rel_value nofollow',
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( '_blank' );
+ expect( result.rel ).toEqual(
+ 'rel_value nofollow noreferrer noopener'
+ );
+ } );
+
+ it( 'should correctly handle rel with existing new tab values and remove duplicates', () => {
+ const options = {
+ url: 'example.com',
+ opensInNewTab: true,
+ nofollow: false,
+ rel: 'rel_value noreferrer noopener',
+ };
+
+ const result = getUpdatedLinkAttributes( options );
+
+ expect( result.url ).toEqual( 'http://example.com' );
+ expect( result.linkTarget ).toEqual( '_blank' );
+ expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+ } );
+} );
diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
index 7e3979b7aefe2e..c35376505b134f 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -70,8 +70,7 @@ function render_block_core_categories( $attributes ) {
function build_dropdown_script_block_core_categories( $dropdown_id ) {
ob_start();
?>
-
', '' ), '', ob_get_clean() ) );
}
/**
diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js
index 3d33428f6f4585..50d83289e1ed92 100644
--- a/packages/block-library/src/comment-template/edit.js
+++ b/packages/block-library/src/comment-template/edit.js
@@ -105,7 +105,7 @@ const getCommentsPlaceholder = ( {
* @param {Array} [props.firstCommentId] - ID of the first comment in the array.
* @param {Array} [props.blocks] - Array of blocks returned from
* getBlocks() in parent .
- * @return {WPElement} Inner blocks of the Comment Template
+ * @return {Element} Inner blocks of the Comment Template
*/
function CommentTemplateInnerBlocks( {
comment,
@@ -202,7 +202,7 @@ const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );
* @param {Array} [props.blocks] - Array of blocks returned from getBlocks() in parent.
* @param {Object} [props.firstCommentId] - The ID of the first comment in the array of
* comment objects.
- * @return {WPElement} List of comments.
+ * @return {Element} List of comments.
*/
const CommentsList = ( {
comments,
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index e88dd2d65a3722..c186a2416f5c9e 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -42,6 +42,9 @@
"customOverlayColor": {
"type": "string"
},
+ "isUserOverlayColor": {
+ "type": "boolean"
+ },
"backgroundType": {
"type": "string",
"default": "image"
diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index d1801a11ade9de..fc15cb4ac46d49 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -97,7 +97,7 @@ const blockAttributes = {
},
};
-const v8ToV10BlockAttributes = {
+const v8ToV11BlockAttributes = {
url: {
type: 'string',
},
@@ -164,7 +164,19 @@ const v8ToV10BlockAttributes = {
},
};
-const v7toV10BlockSupports = {
+const v12BlockAttributes = {
+ ...v8ToV11BlockAttributes,
+ useFeaturedImage: {
+ type: 'boolean',
+ default: false,
+ },
+ tagName: {
+ type: 'string',
+ default: 'div',
+ },
+};
+
+const v7toV11BlockSupports = {
anchor: true,
align: true,
html: false,
@@ -182,10 +194,222 @@ const v7toV10BlockSupports = {
},
};
+const v12BlockSupports = {
+ ...v7toV11BlockSupports,
+ spacing: {
+ padding: true,
+ margin: [ 'top', 'bottom' ],
+ blockGap: true,
+ __experimentalDefaultControls: {
+ padding: true,
+ blockGap: true,
+ },
+ },
+ __experimentalBorder: {
+ color: true,
+ radius: true,
+ style: true,
+ width: true,
+ __experimentalDefaultControls: {
+ color: true,
+ radius: true,
+ style: true,
+ width: true,
+ },
+ },
+ color: {
+ __experimentalDuotone:
+ '> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+ heading: true,
+ text: true,
+ background: false,
+ __experimentalSkipSerialization: [ 'gradients' ],
+ enableContrastChecker: false,
+ },
+ typography: {
+ fontSize: true,
+ lineHeight: true,
+ __experimentalFontFamily: true,
+ __experimentalFontWeight: true,
+ __experimentalFontStyle: true,
+ __experimentalTextTransform: true,
+ __experimentalTextDecoration: true,
+ __experimentalLetterSpacing: true,
+ __experimentalDefaultControls: {
+ fontSize: true,
+ },
+ },
+ layout: {
+ allowJustification: false,
+ },
+};
+
+// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
+const v12 = {
+ attributes: v12BlockAttributes,
+ supports: v12BlockSupports,
+ isEligible( attributes ) {
+ return (
+ attributes.customOverlayColor !== undefined ||
+ attributes.overlayColor !== undefined
+ );
+ },
+ migrate( attributes ) {
+ return {
+ ...attributes,
+ isUserOverlayColor: true,
+ };
+ },
+ save( { attributes } ) {
+ const {
+ backgroundType,
+ gradient,
+ contentPosition,
+ customGradient,
+ customOverlayColor,
+ dimRatio,
+ focalPoint,
+ useFeaturedImage,
+ hasParallax,
+ isDark,
+ isRepeated,
+ overlayColor,
+ url,
+ alt,
+ id,
+ minHeight: minHeightProp,
+ minHeightUnit,
+ tagName: Tag,
+ } = attributes;
+ const overlayColorClass = getColorClassName(
+ 'background-color',
+ overlayColor
+ );
+ const gradientClass = __experimentalGetGradientClass( gradient );
+ const minHeight =
+ minHeightProp && minHeightUnit
+ ? `${ minHeightProp }${ minHeightUnit }`
+ : minHeightProp;
+
+ const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+ const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+ const isImgElement = ! ( hasParallax || isRepeated );
+
+ const style = {
+ minHeight: minHeight || undefined,
+ };
+
+ const bgStyle = {
+ backgroundColor: ! overlayColorClass
+ ? customOverlayColor
+ : undefined,
+ background: customGradient ? customGradient : undefined,
+ };
+
+ const objectPosition =
+ // prettier-ignore
+ focalPoint && isImgElement
+ ? mediaPosition(focalPoint)
+ : undefined;
+
+ const backgroundImage = url ? `url(${ url })` : undefined;
+
+ const backgroundPosition = mediaPosition( focalPoint );
+
+ const classes = classnames(
+ {
+ 'is-light': ! isDark,
+ 'has-parallax': hasParallax,
+ 'is-repeated': isRepeated,
+ 'has-custom-content-position':
+ ! isContentPositionCenter( contentPosition ),
+ },
+ getPositionClassName( contentPosition )
+ );
+
+ const imgClasses = classnames(
+ 'wp-block-cover__image-background',
+ id ? `wp-image-${ id }` : null,
+ {
+ 'has-parallax': hasParallax,
+ 'is-repeated': isRepeated,
+ }
+ );
+
+ const gradientValue = gradient || customGradient;
+
+ return (
+
+
+ ) ) }
+ { isVideoBackground && url && (
+
+
+ );
+ },
+};
+
// Deprecation for blocks that does not have a HTML tag option.
const v11 = {
- attributes: v8ToV10BlockAttributes,
- supports: v7toV10BlockSupports,
+ attributes: v8ToV11BlockAttributes,
+ supports: v7toV11BlockSupports,
save( { attributes } ) {
const {
backgroundType,
@@ -334,8 +558,8 @@ const v11 = {
// Deprecation for blocks that renders fixed background as backgroud from the main block container.
const v10 = {
- attributes: v8ToV10BlockAttributes,
- supports: v7toV10BlockSupports,
+ attributes: v8ToV11BlockAttributes,
+ supports: v7toV11BlockSupports,
save( { attributes } ) {
const {
backgroundType,
@@ -471,8 +695,8 @@ const v10 = {
// Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
const v9 = {
- attributes: v8ToV10BlockAttributes,
- supports: v7toV10BlockSupports,
+ attributes: v8ToV11BlockAttributes,
+ supports: v7toV11BlockSupports,
save( { attributes } ) {
const {
backgroundType,
@@ -603,8 +827,8 @@ const v9 = {
// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
const v8 = {
- attributes: v8ToV10BlockAttributes,
- supports: v7toV10BlockSupports,
+ attributes: v8ToV11BlockAttributes,
+ supports: v7toV11BlockSupports,
save( { attributes } ) {
const {
backgroundType,
@@ -758,7 +982,7 @@ const v7 = {
default: '',
},
},
- supports: v7toV10BlockSupports,
+ supports: v7toV11BlockSupports,
save( { attributes } ) {
const {
backgroundType,
@@ -1449,4 +1673,4 @@ const v1 = {
},
};
-export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index a34476d67180a9..81ff43128b1a35 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -207,8 +207,15 @@ const Cover = ( {
const onSelectMedia = ( media ) => {
setDidUploadFail( false );
- const onSelect = attributesFromMedia( setAttributes, dimRatio );
- onSelect( media );
+
+ const mediaAttributes = attributesFromMedia( media );
+ setAttributes( {
+ ...mediaAttributes,
+ focalPoint: undefined,
+ useFeaturedImage: undefined,
+ dimRatio: dimRatio === 100 ? 50 : dimRatio,
+ isDark: undefined,
+ } );
};
const onMediaPressed = () => {
diff --git a/packages/block-library/src/cover/edit/color-utils.js b/packages/block-library/src/cover/edit/color-utils.js
new file mode 100644
index 00000000000000..de62b5dfbb014e
--- /dev/null
+++ b/packages/block-library/src/cover/edit/color-utils.js
@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import { FastAverageColor } from 'fast-average-color';
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * @typedef {import('colord').RgbaColor} RgbaColor
+ */
+
+extend( [ namesPlugin ] );
+
+/**
+ * Fallback color when the average color can't be computed. The image may be
+ * rendering as transparent, and most sites have a light color background.
+ */
+export const DEFAULT_BACKGROUND_COLOR = '#FFF';
+
+/**
+ * Default dim color specified in style.css.
+ */
+export const DEFAULT_OVERLAY_COLOR = '#000';
+
+/**
+ * Performs a Porter Duff composite source over operation on two rgba colors.
+ *
+ * @see {@link https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover}
+ *
+ * @param {RgbaColor} source Source color.
+ * @param {RgbaColor} dest Destination color.
+ *
+ * @return {RgbaColor} Composite color.
+ */
+export function compositeSourceOver( source, dest ) {
+ return {
+ r: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),
+ g: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),
+ b: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),
+ a: source.a + dest.a * ( 1 - source.a ),
+ };
+}
+
+/**
+ * Retrieves the FastAverageColor singleton.
+ *
+ * @return {FastAverageColor} The FastAverageColor singleton.
+ */
+export function retrieveFastAverageColor() {
+ if ( ! retrieveFastAverageColor.fastAverageColor ) {
+ retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+ }
+ return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * Computes the average color of an image.
+ *
+ * @param {string} url The url of the image.
+ *
+ * @return {Promise} Promise of an average color as a hex string.
+ */
+export const getMediaColor = memoize( async ( url ) => {
+ if ( ! url ) {
+ return DEFAULT_BACKGROUND_COLOR;
+ }
+
+ // making the default color rgb for compat with FAC
+ const { r, g, b, a } = colord( DEFAULT_BACKGROUND_COLOR ).toRgb();
+
+ try {
+ const imgCrossOrigin = applyFilters(
+ 'media.crossOrigin',
+ undefined,
+ url
+ );
+ const color = await retrieveFastAverageColor().getColorAsync( url, {
+ // The default color is white, which is the color
+ // that is returned if there's an error.
+ // colord returns alpga 0-1, FAC needs 0-255
+ defaultColor: [ r, g, b, a * 255 ],
+ // Errors that come up don't reject the promise,
+ // so error logging has to be silenced
+ // with this option.
+ silent: process.env.NODE_ENV === 'production',
+ crossOrigin: imgCrossOrigin,
+ } );
+ return color.hex;
+ } catch ( error ) {
+ // If there's an error return the fallback color.
+ return DEFAULT_BACKGROUND_COLOR;
+ }
+} );
+
+/**
+ * Computes if the color combination of the overlay and background color is dark.
+ *
+ * @param {number} dimRatio Opacity of the overlay between 0 and 100.
+ * @param {string} overlayColor CSS color string for the overlay.
+ * @param {string} backgroundColor CSS color string for the background.
+ *
+ * @return {boolean} true if the color combination composite result is dark.
+ */
+export function compositeIsDark( dimRatio, overlayColor, backgroundColor ) {
+ // Opacity doesn't matter if you're overlaying the same color on top of itself.
+ // And background doesn't matter when overlay is fully opaque.
+ if ( overlayColor === backgroundColor || dimRatio === 100 ) {
+ return colord( overlayColor ).isDark();
+ }
+ const overlay = colord( overlayColor )
+ .alpha( dimRatio / 100 )
+ .toRgb();
+ const background = colord( backgroundColor ).toRgb();
+ const composite = compositeSourceOver( overlay, background );
+ return colord( composite ).isDark();
+}
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 932281b1ab6f1b..6fac6e8b4a5060 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -2,8 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
-import { extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
/**
* WordPress dependencies
@@ -37,14 +35,17 @@ import {
isContentPositionCenter,
getPositionClassName,
mediaPosition,
- getCoverIsDark,
} from '../shared';
import CoverInspectorControls from './inspector-controls';
import CoverBlockControls from './block-controls';
import CoverPlaceholder from './cover-placeholder';
import ResizableCoverPopover from './resizable-cover-popover';
-
-extend( [ namesPlugin ] );
+import {
+ getMediaColor,
+ compositeIsDark,
+ DEFAULT_BACKGROUND_COLOR,
+ DEFAULT_OVERLAY_COLOR,
+} from './color-utils';
function getInnerBlocksTemplate( attributes ) {
return [
@@ -83,6 +84,8 @@ function CoverEdit( {
const {
contentPosition,
id,
+ url: originalUrl,
+ backgroundType: originalBackgroundType,
useFeaturedImage,
dimRatio,
focalPoint,
@@ -95,6 +98,7 @@ function CoverEdit( {
allowedBlocks,
templateLock,
tagName: TagName = 'div',
+ isUserOverlayColor,
} = attributes;
const [ featuredImage ] = useEntityProp(
@@ -114,23 +118,34 @@ function CoverEdit( {
);
const mediaUrl = media?.source_url;
+ // User can change the featured image outside of the block, but we still
+ // need to update the block when that happens. This effect should only
+ // run when the featured image changes in that case. All other cases are
+ // handled in their respective callbacks.
useEffect( () => {
- async function setIsDark() {
- __unstableMarkNextChangeAsNotPersistent();
- const isDarkSetting = await getCoverIsDark(
- mediaUrl,
+ ( async () => {
+ if ( ! useFeaturedImage ) {
+ return;
+ }
+
+ const averageBackgroundColor = await getMediaColor( mediaUrl );
+
+ let newOverlayColor = overlayColor.color;
+ if ( ! isUserOverlayColor ) {
+ newOverlayColor = averageBackgroundColor;
+ __unstableMarkNextChangeAsNotPersistent();
+ setOverlayColor( newOverlayColor );
+ }
+
+ const newIsDark = compositeIsDark(
dimRatio,
- overlayColor.color
+ newOverlayColor,
+ averageBackgroundColor
);
- setAttributes( {
- isDark: isDarkSetting,
- } );
- }
- if ( useFeaturedImage ) {
- setIsDark();
- }
- // We only ever want to run this effect if the mediaUrl changes.
- // All other changes to the isDark state are handled in the appropriate event handlers.
+ __unstableMarkNextChangeAsNotPersistent();
+ setAttributes( { isDark: newIsDark } );
+ } )();
+ // Disable reason: Update the block only when the featured image changes.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ mediaUrl ] );
@@ -141,32 +156,62 @@ function CoverEdit( {
const url = useFeaturedImage
? mediaUrl
: // Ensure the url is not malformed due to sanitization through `wp_kses`.
- attributes.url?.replaceAll( '&', '&' );
+ originalUrl?.replaceAll( '&', '&' );
const backgroundType = useFeaturedImage
? IMAGE_BACKGROUND_TYPE
- : attributes.backgroundType;
+ : originalBackgroundType;
const { createErrorNotice } = useDispatch( noticesStore );
const { gradientClass, gradientValue } = __experimentalUseGradient();
- const setMedia = attributesFromMedia( setAttributes, dimRatio );
const onSelectMedia = async ( newMedia ) => {
- // Only pass the url to getCoverIsDark if the media is an image as video is not handled.
- const newUrl = newMedia?.type === 'image' ? newMedia.url : undefined;
- const isDarkSetting = await getCoverIsDark(
- newUrl,
- dimRatio,
- overlayColor.color
+ const mediaAttributes = attributesFromMedia( newMedia );
+
+ const averageBackgroundColor = await getMediaColor(
+ newMedia?.type === IMAGE_BACKGROUND_TYPE ? newMedia?.url : undefined
+ );
+
+ let newOverlayColor = overlayColor.color;
+ if ( ! isUserOverlayColor ) {
+ newOverlayColor = averageBackgroundColor;
+ setOverlayColor( newOverlayColor );
+
+ // Make undo revert the next setAttributes and the previous setOverlayColor.
+ __unstableMarkNextChangeAsNotPersistent();
+ }
+
+ const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+ const newIsDark = compositeIsDark(
+ newDimRatio,
+ newOverlayColor,
+ averageBackgroundColor
);
- setMedia( newMedia, isDarkSetting );
+
+ setAttributes( {
+ ...mediaAttributes,
+ focalPoint: undefined,
+ useFeaturedImage: undefined,
+ dimRatio: newDimRatio,
+ isDark: newIsDark,
+ } );
};
- const onClearMedia = async () => {
- const isDarkSetting = await getCoverIsDark(
- undefined,
+ const onClearMedia = () => {
+ let newOverlayColor = overlayColor.color;
+ if ( ! isUserOverlayColor ) {
+ newOverlayColor = DEFAULT_OVERLAY_COLOR;
+ setOverlayColor( undefined );
+
+ // Make undo revert the next setAttributes and the previous setOverlayColor.
+ __unstableMarkNextChangeAsNotPersistent();
+ }
+
+ const newIsDark = compositeIsDark(
dimRatio,
- overlayColor.color
+ newOverlayColor,
+ DEFAULT_BACKGROUND_COLOR
);
+
setAttributes( {
url: undefined,
id: undefined,
@@ -174,39 +219,50 @@ function CoverEdit( {
focalPoint: undefined,
hasParallax: undefined,
isRepeated: undefined,
- useFeaturedImage: false,
- isDark: isDarkSetting,
+ useFeaturedImage: undefined,
+ isDark: newIsDark,
} );
};
- const onSetOverlayColor = async ( colorValue ) => {
- const isDarkSetting = await getCoverIsDark( url, dimRatio, colorValue );
- setOverlayColor( colorValue );
+ const onSetOverlayColor = async ( newOverlayColor ) => {
+ const averageBackgroundColor = await getMediaColor( url );
+ const newIsDark = compositeIsDark(
+ dimRatio,
+ newOverlayColor,
+ averageBackgroundColor
+ );
+
+ setOverlayColor( newOverlayColor );
+
+ // Make undo revert the next setAttributes and the previous setOverlayColor.
__unstableMarkNextChangeAsNotPersistent();
+
setAttributes( {
- isDark: isDarkSetting,
+ isUserOverlayColor: true,
+ isDark: newIsDark,
} );
};
const onUpdateDimRatio = async ( newDimRatio ) => {
- const isDarkSetting = await getCoverIsDark(
- url,
+ const averageBackgroundColor = await getMediaColor( url );
+ const newIsDark = compositeIsDark(
newDimRatio,
- overlayColor.color
+ overlayColor.color,
+ averageBackgroundColor
);
setAttributes( {
dimRatio: newDimRatio,
- isDark: isDarkSetting,
+ isDark: newIsDark,
} );
};
- const isUploadingMedia = isTemporaryMedia( id, url );
-
const onUploadError = ( message ) => {
createErrorNotice( message, { type: 'snackbar' } );
};
+ const isUploadingMedia = isTemporaryMedia( id, url );
+
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
@@ -285,18 +341,43 @@ function CoverEdit( {
};
const toggleUseFeaturedImage = async () => {
- const isDarkSetting = await ( useFeaturedImage
- ? getCoverIsDark( undefined, dimRatio, overlayColor.color )
- : getCoverIsDark( mediaUrl, dimRatio, overlayColor.color ) );
+ const newUseFeaturedImage = ! useFeaturedImage;
+
+ const averageBackgroundColor = newUseFeaturedImage
+ ? await getMediaColor( mediaUrl )
+ : DEFAULT_BACKGROUND_COLOR;
+
+ const newOverlayColor = ! isUserOverlayColor
+ ? averageBackgroundColor
+ : overlayColor.color;
+
+ if ( ! isUserOverlayColor ) {
+ if ( newUseFeaturedImage ) {
+ setOverlayColor( newOverlayColor );
+ } else {
+ setOverlayColor( undefined );
+ }
+
+ // Make undo revert the next setAttributes and the previous setOverlayColor.
+ __unstableMarkNextChangeAsNotPersistent();
+ }
+
+ const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+ const newIsDark = compositeIsDark(
+ newDimRatio,
+ newOverlayColor,
+ averageBackgroundColor
+ );
+
setAttributes( {
id: undefined,
url: undefined,
- useFeaturedImage: ! useFeaturedImage,
- dimRatio: dimRatio === 100 ? 50 : dimRatio,
+ useFeaturedImage: newUseFeaturedImage,
+ dimRatio: newDimRatio,
backgroundType: useFeaturedImage
? IMAGE_BACKGROUND_TYPE
: undefined,
- isDark: isDarkSetting,
+ isDark: newIsDark,
} );
};
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 02058243f9f781..ed2501a0d0ec52 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -149,7 +149,7 @@ export default function CoverInspectorControls( {
'The element should represent introductory content, typically a group of introductory or navigational aids.'
),
main: __(
- 'The element should be used for the primary content of your document only. '
+ 'The element should be used for the primary content of your document only.'
),
section: __(
"The element should represent a standalone portion of the document that can't be better represented by another element."
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index 72a42c0d5c70b8..5b59a28fbd00fa 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import { FastAverageColor } from 'fast-average-color';
-import { colord } from 'colord';
-
/**
* WordPress dependencies
*/
import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
-import { applyFilters } from '@wordpress/hooks';
const POSITION_CLASSNAMES = {
'top left': 'is-position-top-left',
@@ -41,50 +34,47 @@ export function dimRatioToClass( ratio ) {
: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
}
-export function attributesFromMedia( setAttributes, dimRatio ) {
- return ( media, isDark ) => {
- if ( ! media || ! media.url ) {
- setAttributes( { url: undefined, id: undefined, isDark } );
- return;
- }
+export function attributesFromMedia( media ) {
+ if ( ! media || ! media.url ) {
+ return {
+ url: undefined,
+ id: undefined,
+ };
+ }
- if ( isBlobURL( media.url ) ) {
- media.type = getBlobTypeByURL( media.url );
- }
+ if ( isBlobURL( media.url ) ) {
+ media.type = getBlobTypeByURL( media.url );
+ }
- let mediaType;
- // For media selections originated from a file upload.
- if ( media.media_type ) {
- if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
- mediaType = IMAGE_BACKGROUND_TYPE;
- } else {
- // only images and videos are accepted so if the media_type is not an image we can assume it is a video.
- // Videos contain the media type of 'file' in the object returned from the rest api.
- mediaType = VIDEO_BACKGROUND_TYPE;
- }
+ let mediaType;
+ // For media selections originated from a file upload.
+ if ( media.media_type ) {
+ if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+ mediaType = IMAGE_BACKGROUND_TYPE;
} else {
- // For media selections originated from existing files in the media library.
- if (
- media.type !== IMAGE_BACKGROUND_TYPE &&
- media.type !== VIDEO_BACKGROUND_TYPE
- ) {
- return;
- }
- mediaType = media.type;
+ // only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+ // Videos contain the media type of 'file' in the object returned from the rest api.
+ mediaType = VIDEO_BACKGROUND_TYPE;
}
+ } else {
+ // For media selections originated from existing files in the media library.
+ if (
+ media.type !== IMAGE_BACKGROUND_TYPE &&
+ media.type !== VIDEO_BACKGROUND_TYPE
+ ) {
+ return;
+ }
+ mediaType = media.type;
+ }
- setAttributes( {
- isDark,
- dimRatio: dimRatio === 100 ? 50 : dimRatio,
- url: media.url,
- id: media.id,
- alt: media?.alt,
- backgroundType: mediaType,
- focalPoint: undefined,
- ...( mediaType === VIDEO_BACKGROUND_TYPE
- ? { hasParallax: undefined }
- : {} ),
- } );
+ return {
+ url: media.url,
+ id: media.id,
+ alt: media?.alt,
+ backgroundType: mediaType,
+ ...( mediaType === VIDEO_BACKGROUND_TYPE
+ ? { hasParallax: undefined }
+ : {} ),
};
}
@@ -117,86 +107,3 @@ export function getPositionClassName( contentPosition ) {
return POSITION_CLASSNAMES[ contentPosition ];
}
-
-/**
- * Performs a Porter Duff composite source over operation on two rgba colors.
- *
- * @see https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover
- *
- * @param {import('colord').RgbaColor} source Source color.
- * @param {import('colord').RgbaColor} dest Destination color.
- * @return {import('colord').RgbaColor} Composite color.
- */
-function compositeSourceOver( source, dest ) {
- return {
- r: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),
- g: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),
- b: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),
- a: source.a + dest.a * ( 1 - source.a ),
- };
-}
-
-function retrieveFastAverageColor() {
- if ( ! retrieveFastAverageColor.fastAverageColor ) {
- retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
- }
- return retrieveFastAverageColor.fastAverageColor;
-}
-
-/**
- * This method evaluates if the cover block's background is dark or not and this boolean
- * can then be applied to the relevant attribute to help ensure that text is visible by default.
- * This needs to be recalculated in all of the following Cover block scenarios:
- * - When an overlay image is added, changed or removed
- * - When the featured image is selected as the overlay image, or removed from the overlay
- * - When the overlay color is changed
- * - When the overlay color is removed
- * - When the dimRatio is changed
- *
- * See the comments below for more details about which aspects take priority when
- * calculating the relative darkness of the Cover.
- *
- * @param {string} url
- * @param {number} dimRatio
- * @param {string} overlayColor
- * @return {Promise} True if cover should be considered to be dark.
- */
-export async function getCoverIsDark( url, dimRatio = 50, overlayColor ) {
- const overlay = colord( overlayColor )
- .alpha( dimRatio / 100 )
- .toRgb();
-
- if ( url ) {
- try {
- const imgCrossOrigin = applyFilters(
- 'media.crossOrigin',
- undefined,
- url
- );
- const {
- value: [ r, g, b, a ],
- } = await retrieveFastAverageColor().getColorAsync( url, {
- // Previously the default color was white, but that changed
- // in v6.0.0 so it has to be manually set now.
- defaultColor: [ 255, 255, 255, 255 ],
- // Errors that come up don't reject the promise, so error
- // logging has to be silenced with this option.
- silent: process.env.NODE_ENV === 'production',
- crossOrigin: imgCrossOrigin,
- } );
- // FAC uses 0-255 for alpha, but colord expects 0-1.
- const media = { r, g, b, a: a / 255 };
- const composite = compositeSourceOver( overlay, media );
- return colord( composite ).isDark();
- } catch ( error ) {
- // If there's an error, just assume the image is dark.
- return true;
- }
- }
-
- // Assume a white background because it isn't easy to get the actual
- // parent background color.
- const background = { r: 255, g: 255, b: 255, a: 1 };
- const composite = compositeSourceOver( overlay, background );
- return colord( composite ).isDark();
-}
diff --git a/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
index 09904a664294b3..25bd83daf06caf 100644
--- a/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"
+"
@@ -17,7 +17,7 @@ exports[`color settings sets a color for the overlay background when the placeho
`;
exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"
+"
@@ -33,7 +33,7 @@ exports[`color settings toggles between solid colors and gradients 1`] = `
`;
exports[`minimum height settings changes the height value between units 1`] = `
-"
+"
-
+
@@ -14,7 +14,7 @@ exports[`Cover block transformations with Image to Columns block 1`] = `
exports[`Cover block transformations with Image to Group block 1`] = `
"
-
+
@@ -39,7 +39,7 @@ exports[`Cover block transformations with Image to Media & Text block 1`] = `
exports[`Cover block transformations with Video to Columns block 1`] = `
"
-
+
@@ -50,7 +50,7 @@ exports[`Cover block transformations with Video to Columns block 1`] = `
exports[`Cover block transformations with Video to Group block 1`] = `
"
-
+
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
index 74db754ff16969..d1febe3c6fa115 100644
--- a/packages/block-library/src/cover/test/edit.js
+++ b/packages/block-library/src/cover/test/edit.js
@@ -64,9 +64,9 @@ describe( 'Cover block', () => {
await setup();
expect(
- screen.getByRole( 'group', {
- name: 'To edit this block, you need permission to upload media.',
- } )
+ within( screen.getByLabelText( 'Block: Cover' ) ).getByText(
+ 'To edit this block, you need permission to upload media.'
+ )
).toBeInTheDocument();
} );
@@ -260,7 +260,7 @@ describe( 'Cover block', () => {
} )
);
expect(
- within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
+ within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
'img'
)
).not.toBeInTheDocument();
diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js
index 3eedfc45ae123f..3ca2755ee1aebb 100644
--- a/packages/block-library/src/cover/test/edit.native.js
+++ b/packages/block-library/src/cover/test/edit.native.js
@@ -11,6 +11,8 @@ import {
within,
getBlock,
openBlockSettings,
+ setupMediaPicker,
+ setupPicker,
} from 'test/helpers';
/**
@@ -68,6 +70,13 @@ const COLOR_GRAY = '#abb8c3';
const GRADIENT_GREEN =
'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
+const MEDIA_OPTIONS = [
+ 'Choose from device',
+ 'Take a Photo',
+ 'Take a Video',
+ 'WordPress Media Library',
+];
+
// Simplified tree to render Cover edit within slot.
const CoverEdit = ( props ) => (
@@ -127,6 +136,35 @@ describe( 'when no media is attached', () => {
} );
} );
+describe( 'when no media is attached and overlay color is set', () => {
+ it( 'adds image', async () => {
+ const media = {
+ type: 'image',
+ id: 2000,
+ url: 'https://test.files.wordpress.com/local-image-1.mp4',
+ };
+ const { mediaPickerCallback } = setupMediaPicker();
+ const screen = await initializeEditor( {
+ initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+ } );
+ const { getByText } = screen;
+ const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
+
+ // Get block
+ const coverBlock = await getBlock( screen, 'Cover' );
+ fireEvent.press( coverBlock );
+
+ // Open block settings
+ await openBlockSettings( screen );
+
+ fireEvent.press( getByText( 'Add image or video' ) );
+ selectOption( 'WordPress Media Library' );
+ await mediaPickerCallback( media );
+
+ expect( getEditorHtml() ).toMatchSnapshot();
+ } );
+} );
+
describe( 'when an image is attached', () => {
it( 'edits the image', async () => {
const screen = render(
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 28902020c75e8e..2945fb0fbe888b 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -29,6 +29,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { useBlockProps } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
const EmbedEdit = ( props ) => {
const {
@@ -137,6 +138,20 @@ const EmbedEdit = ( props ) => {
setAttributes( { url: newURL } );
}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
+ // Try a different provider in case the embed url is not supported.
+ useEffect( () => {
+ if ( ! cannotEmbed || fetching || ! url ) {
+ return;
+ }
+
+ // Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+ if ( getAuthority( url ) === 'x.com' ) {
+ const newURL = new URL( url );
+ newURL.host = 'twitter.com';
+ setAttributes( { url: newURL.toString() } );
+ }
+ }, [ url, cannotEmbed, fetching, setAttributes ] );
+
// Handle incoming preview.
useEffect( () => {
if ( preview && ! isEditingURL ) {
diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js
index eec991c7b2037b..a04e49fbd6d54e 100644
--- a/packages/block-library/src/embed/edit.native.js
+++ b/packages/block-library/src/embed/edit.native.js
@@ -33,6 +33,7 @@ import {
} from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
// The inline preview feature will be released progressible, for this reason
// the embed will only be considered previewable for the following providers list.
@@ -160,6 +161,20 @@ const EmbedEdit = ( props ) => {
setAttributes( { url: newURL } );
}, [ preview?.html, url, cannotEmbed, fetching ] );
+ // Try a different provider in case the embed url is not supported.
+ useEffect( () => {
+ if ( ! cannotEmbed || fetching || ! url ) {
+ return;
+ }
+
+ // Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+ if ( getAuthority( url ) === 'x.com' ) {
+ const newURL = new URL( url );
+ newURL.host = 'twitter.com';
+ setAttributes( { url: newURL.toString() } );
+ }
+ }, [ url, cannotEmbed, fetching, setAttributes ] );
+
// Handle incoming preview.
useEffect( () => {
if ( preview && ! isEditingURL ) {
diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js
index 761aed2ea32210..1b456c668a9c52 100644
--- a/packages/block-library/src/embed/test/index.native.js
+++ b/packages/block-library/src/embed/test/index.native.js
@@ -138,7 +138,12 @@ const mockEmbedResponses = ( mockedResponses ) => {
async function mockOtherResponses( { path } ) {
if ( path.startsWith( '/wp/v2/themes' ) ) {
- return [ { theme_supports: { 'responsive-embeds': true } } ];
+ return [
+ {
+ stylesheet: 'test-theme',
+ theme_supports: { 'responsive-embeds': true },
+ },
+ ];
}
if ( path.startsWith( '/wp/v2/block-patterns/patterns' ) ) {
diff --git a/packages/block-library/src/embed/wp-embed-preview.js b/packages/block-library/src/embed/wp-embed-preview.js
index 0e812ffa647e3e..1992310217aca4 100644
--- a/packages/block-library/src/embed/wp-embed-preview.js
+++ b/packages/block-library/src/embed/wp-embed-preview.js
@@ -4,7 +4,7 @@
import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
import { useRef, useEffect, useMemo } from '@wordpress/element';
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
const attributeMap = {
class: 'className',
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index f8949b2701985f..83c6dab20157df 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -70,6 +70,8 @@ static function ( $matches ) {
* Ensure that the view script has the `wp-interactivity` dependency.
*
* @since 6.4.0
+ *
+ * @global WP_Scripts $wp_scripts
*/
function block_core_file_ensure_interactivity_dependency() {
global $wp_scripts;
diff --git a/packages/block-library/src/footnotes/block.json b/packages/block-library/src/footnotes/block.json
index 28b094f24f9164..4a2db992863db2 100644
--- a/packages/block-library/src/footnotes/block.json
+++ b/packages/block-library/src/footnotes/block.json
@@ -4,7 +4,7 @@
"name": "core/footnotes",
"title": "Footnotes",
"category": "text",
- "description": "",
+ "description": "Display footnotes added to the page.",
"keywords": [ "references" ],
"textdomain": "default",
"usesContext": [ "postId", "postType" ],
diff --git a/packages/block-library/src/footnotes/index.php b/packages/block-library/src/footnotes/index.php
index 5924db3a190c20..bc6291dd21c38b 100644
--- a/packages/block-library/src/footnotes/index.php
+++ b/packages/block-library/src/footnotes/index.php
@@ -39,15 +39,20 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
}
$wrapper_attributes = get_block_wrapper_attributes();
+ $footnote_index = 1;
$block_content = '';
foreach ( $footnotes as $footnote ) {
+ // Translators: %d: Integer representing the number of return links on the page.
+ $aria_label = sprintf( __( 'Jump to footnote reference %1$d' ), $footnote_index );
$block_content .= sprintf(
- '%2$s ↩︎ ',
+ '%2$s ↩︎ ',
$footnote['id'],
- $footnote['content']
+ $footnote['content'],
+ $aria_label
);
+ ++$footnote_index;
}
return sprintf(
@@ -68,9 +73,10 @@ function register_block_core_footnotes() {
$post_type,
'footnotes',
array(
- 'show_in_rest' => true,
- 'single' => true,
- 'type' => 'string',
+ 'show_in_rest' => true,
+ 'single' => true,
+ 'type' => 'string',
+ 'revisions_enabled' => true,
)
);
}
@@ -84,106 +90,7 @@ function register_block_core_footnotes() {
add_action( 'init', 'register_block_core_footnotes' );
/**
- * Saves the footnotes meta value to the revision.
- *
- * @since 6.3.0
- *
- * @param int $revision_id The revision ID.
- */
-function wp_save_footnotes_meta( $revision_id ) {
- $post_id = wp_is_post_revision( $revision_id );
-
- if ( $post_id ) {
- $footnotes = get_post_meta( $post_id, 'footnotes', true );
-
- if ( $footnotes ) {
- // Can't use update_post_meta() because it doesn't allow revisions.
- update_metadata( 'post', $revision_id, 'footnotes', wp_slash( $footnotes ) );
- }
- }
-}
-add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
-
-/**
- * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param int $revision_id The revision ID.
- */
-function wp_keep_footnotes_revision_id( $revision_id ) {
- global $wp_temporary_footnote_revision_id;
- $wp_temporary_footnote_revision_id = $revision_id;
-}
-add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
-
-/**
- * This is a specific fix for the REST API. The REST API doesn't update
- * the post and post meta in one go (through `meta_input`). While it
- * does fix the `wp_after_insert_post` hook to be called correctly after
- * updating meta, it does NOT fix hooks such as post_updated and
- * save_post, which are normally also fired after post meta is updated
- * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
- * added to the `post_updated` action, which means the meta is not
- * available at the time, so we have to add it afterwards through the
- * `"rest_after_insert_{$post_type}"` action.
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param WP_Post $post The post object.
- */
-function wp_add_footnotes_revisions_to_post_meta( $post ) {
- global $wp_temporary_footnote_revision_id;
-
- if ( $wp_temporary_footnote_revision_id ) {
- $revision = get_post( $wp_temporary_footnote_revision_id );
-
- if ( ! $revision ) {
- return;
- }
-
- $post_id = $revision->post_parent;
-
- // Just making sure we're updating the right revision.
- if ( $post->ID === $post_id ) {
- $footnotes = get_post_meta( $post_id, 'footnotes', true );
-
- if ( $footnotes ) {
- // Can't use update_post_meta() because it doesn't allow revisions.
- update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', wp_slash( $footnotes ) );
- }
- }
- }
-}
-
-add_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
-add_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
-
-/**
- * Restores the footnotes meta value from the revision.
- *
- * @since 6.3.0
- *
- * @param int $post_id The post ID.
- * @param int $revision_id The revision ID.
- */
-function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
- $footnotes = get_post_meta( $revision_id, 'footnotes', true );
-
- if ( $footnotes ) {
- update_post_meta( $post_id, 'footnotes', wp_slash( $footnotes ) );
- } else {
- delete_post_meta( $post_id, 'footnotes' );
- }
-}
-add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
-
-/**
- * Adds the footnotes field to the revision.
+ * Adds the footnotes field to the revisions display.
*
* @since 6.3.0
*
@@ -197,7 +104,7 @@ function wp_add_footnotes_to_revision( $fields ) {
add_filter( '_wp_post_revision_fields', 'wp_add_footnotes_to_revision' );
/**
- * Gets the footnotes field from the revision.
+ * Gets the footnotes field from the revision for the revisions screen.
*
* @since 6.3.0
*
@@ -211,76 +118,3 @@ function wp_get_footnotes_from_revision( $revision_field, $field, $revision ) {
return get_metadata( 'post', $revision->ID, $field, true );
}
add_filter( '_wp_post_revision_field_footnotes', 'wp_get_footnotes_from_revision', 10, 3 );
-
-/**
- * The REST API autosave endpoint doesn't save meta, so we can use the
- * `wp_creating_autosave` when it updates an exiting autosave, and
- * `_wp_put_post_revision` when it creates a new autosave.
- *
- * @since 6.3.0
- *
- * @param int|array $autosave The autosave ID or array.
- */
-function _wp_rest_api_autosave_meta( $autosave ) {
- // Ensure it's a REST API request.
- if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
- return;
- }
-
- $body = rest_get_server()->get_raw_data();
- $body = json_decode( $body, true );
-
- if ( ! isset( $body['meta']['footnotes'] ) ) {
- return;
- }
-
- // `wp_creating_autosave` passes the array,
- // `_wp_put_post_revision` passes the ID.
- $id = is_int( $autosave ) ? $autosave : $autosave['ID'];
-
- if ( ! $id ) {
- return;
- }
-
- update_post_meta( $id, 'footnotes', wp_slash( $body['meta']['footnotes'] ) );
-}
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
-add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
-// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
-add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
-
-/**
- * This is a workaround for the autosave endpoint returning early if the
- * revision field are equal. The problem is that "footnotes" is not real
- * revision post field, so there's nothing to compare against.
- *
- * This trick sets the "footnotes" field (value doesn't matter), which will
- * cause the autosave endpoint to always update the latest revision. That should
- * be fine, it should be ok to update the revision even if nothing changed. Of
- * course, this is temporary fix.
- *
- * @since 6.3.0
- *
- * @param WP_Post $prepared_post The prepared post object.
- * @param WP_REST_Request $request The request object.
- *
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
- */
-function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
- // We only want to be altering POST requests.
- if ( $request->get_method() !== 'POST' ) {
- return $prepared_post;
- }
-
- // Only alter requests for the '/autosaves' route.
- if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
- return $prepared_post;
- }
-
- $prepared_post->footnotes = '[]';
- return $prepared_post;
-}
-
-add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );
diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 5cb2b457633b13..3cf2ee08bb68b2 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -8,7 +8,13 @@ import {
PlainText,
useBlockProps,
} from '@wordpress/block-editor';
-import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+import {
+ ToolbarButton,
+ Disabled,
+ ToolbarGroup,
+ VisuallyHidden,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
@@ -19,6 +25,8 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
const [ isPreview, setIsPreview ] = useState();
const isDisabled = useContext( Disabled.Context );
+ const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
+
function switchToPreview() {
setIsPreview( true );
}
@@ -27,8 +35,13 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
setIsPreview( false );
}
+ const blockProps = useBlockProps( {
+ className: 'block-library-html__edit',
+ 'aria-describedby': isPreview ? instanceId : undefined,
+ } );
+
return (
-
+
{ isPreview || isDisabled ? (
-
+ <>
+
+
+ { __(
+ 'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'
+ ) }
+
+
) : (
<![CDATA[
- <SandBox html={ content } styles={ styles } />
+ <SandBox
+ html={ content }
+ styles={ styles }
+ title={ __( 'Custom HTML Preview' ) }
+ tabIndex={ -1 }
+ />
{ /*
An overlay is added when the block is not selected in order to register click events.
Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 04839a47b880af..d49a8f7cd05783 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -372,10 +372,10 @@ export default function Image( {
const lightboxSetting = useSetting( 'lightbox' );
const showLightboxToggle =
- lightboxSetting === true || lightboxSetting?.allowEditing === true;
+ !! lightbox || lightboxSetting?.allowEditing === true;
const lightboxChecked =
- lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
+ !! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
const dimensionsControl = (
<DimensionsTool
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 8cf1d9484541e8..54aa8fca6d5f42 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -64,7 +64,12 @@ function render_block_core_image( $attributes, $content, $block ) {
}
if ( $lightbox_enabled ) {
- return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block );
+ // This render needs to happen in a filter with priority 15 to ensure that it
+ // runs after the duotone filter and that duotone styles are applied to the image
+ // in the lightbox. We also need to ensure that the lightbox works with any plugins
+ // that might use filters as well. We can consider removing this in the future if the
+ // way the blocks are rendered changes, or if a new kind of filter is introduced.
+ add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
}
return $processor->get_updated_html();
@@ -91,16 +96,16 @@ function block_core_image_get_lightbox_settings( $block ) {
}
if ( ! isset( $lightbox_settings ) ) {
- $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) );
+ $lightbox_settings = wp_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) );
// If not present in global settings, check the top-level global settings.
//
// NOTE: If no block-level settings are found, the previous call to
- // `gutenberg_get_global_settings` will return the whole `theme.json`
+ // `wp_get_global_settings` will return the whole `theme.json`
// structure in which case we can check if the "lightbox" key is present at
// the top-level of the global settings and use its value.
if ( isset( $lightbox_settings['lightbox'] ) ) {
- $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) );
+ $lightbox_settings = wp_get_global_settings( array( 'lightbox' ) );
}
}
@@ -117,7 +122,7 @@ function block_core_image_get_lightbox_settings( $block ) {
function block_core_image_render_lightbox( $block_content, $block ) {
$processor = new WP_HTML_Tag_Processor( $block_content );
- $aria_label = __( 'Enlarge image', 'gutenberg' );
+ $aria_label = __( 'Enlarge image' );
$alt_attribute = $processor->get_attribute( 'alt' );
@@ -127,7 +132,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
if ( $alt_attribute ) {
/* translators: %s: Image alt text. */
- $aria_label = sprintf( __( 'Enlarge image: %s', 'gutenberg' ), $alt_attribute );
+ $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
}
$content = $processor->get_updated_html();
@@ -251,8 +256,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
$close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) );
- $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image', 'gutenberg' );
- $close_button_label = esc_attr__( 'Close', 'gutenberg' );
+ $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
+ $close_button_label = esc_attr__( 'Close' );
$lightbox_html = <<<HTML
<div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
@@ -267,7 +272,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
aria-modal="false"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
- data-wp-on--mousewheel="actions.core.image.hideLightbox"
+ data-wp-on--touchstart="actions.core.image.handleTouchStart"
+ data-wp-on--touchmove="actions.core.image.handleTouchMove"
+ data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
>
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
@@ -286,6 +293,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
* Ensure that the view script has the `wp-interactivity` dependency.
*
* @since 6.4.0
+ *
+ * @global WP_Scripts $wp_scripts
*/
function block_core_image_ensure_interactivity_dependency() {
global $wp_scripts;
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index c7eec224f65878..5c3552fd80c2ee 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -186,8 +186,8 @@
.close-button {
position: absolute;
- top: calc(env(safe-area-inset-top) + 12.5px);
- right: calc(env(safe-area-inset-right) + 12.5px);
+ top: calc(env(safe-area-inset-top) + 20px);
+ right: calc(env(safe-area-inset-right) + 20px);
padding: 0;
cursor: pointer;
z-index: 5000000;
@@ -297,10 +297,6 @@
}
}
-html.wp-has-lightbox-open {
- overflow: hidden;
-}
-
@keyframes turn-on-visibility {
0% {
opacity: 0;
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 53a2d1f7d567fc..13f20c9cd7cb68 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -17,6 +17,69 @@ const focusableSelectors = [
'[tabindex]:not([tabindex^="-"])',
];
+/*
+ * Stores a context-bound scroll handler.
+ *
+ * This callback could be defined inline inside of the store
+ * object but it's created externally to avoid confusion about
+ * how its logic is called. This logic is not referenced directly
+ * by the directives in the markup because the scroll event we
+ * need to listen to is triggered on the window; so by defining it
+ * outside of the store, we signal that the behavior here is different.
+ * If we find a compelling reason to move it to the store, feel free.
+ *
+ * @type {Function}
+ */
+let scrollCallback;
+
+/*
+ * Tracks whether user is touching screen; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {boolean}
+ */
+let isTouching = false;
+
+/*
+ * Tracks the last time the screen was touched; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {number}
+ */
+let lastTouchTime = 0;
+
+/*
+ * Lightbox page-scroll handler: prevents scrolling.
+ *
+ * This handler is added to prevent scrolling behaviors that
+ * trigger content shift while the lightbox is open.
+ *
+ * It would be better to accomplish this through CSS alone, but
+ * using overflow: hidden is currently the only way to do so, and
+ * that causes the layout to shift and prevents the zoom animation
+ * from working in some cases because we're unable to account for
+ * the layout shift when doing the animation calculations. Instead,
+ * here we use JavaScript to prevent and reset the scrolling
+ * behavior. In the future, we may be able to use CSS or overflow: hidden
+ * instead to not rely on JavaScript, but this seems to be the best approach
+ * for now that provides the best visual experience.
+ *
+ * @param {Object} context Interactivity page context?
+ */
+function handleScroll( context ) {
+ // We can't override the scroll behavior on mobile devices
+ // because doing so breaks the pinch to zoom functionality, and we
+ // want to allow users to zoom in further on the high-res image.
+ if ( ! isTouching && Date.now() - lastTouchTime > 450 ) {
+ // We are unable to use event.preventDefault() to prevent scrolling
+ // because the scroll event can't be canceled, so we reset the position instead.
+ window.scrollTo(
+ context.core.image.scrollLeftReset,
+ context.core.image.scrollTopReset
+ );
+ }
+}
+
store(
{
state: {
@@ -43,54 +106,49 @@ store(
context.core.image.lightboxEnabled = true;
setStyles( context, event );
- // Hide overflow only when the animation is in progress,
- // otherwise the removal of the scrollbars will draw attention
- // to itself and look like an error
- document.documentElement.classList.add(
- 'wp-has-lightbox-open'
+
+ context.core.image.scrollTopReset =
+ window.pageYOffset ||
+ document.documentElement.scrollTop;
+
+ // In most cases, this value will be 0, but this is included
+ // in case a user has created a page with horizontal scrolling.
+ context.core.image.scrollLeftReset =
+ window.pageXOffset ||
+ document.documentElement.scrollLeft;
+
+ // We define and bind the scroll callback here so
+ // that we can pass the context and as an argument.
+ // We may be able to change this in the future if we
+ // define the scroll callback in the store instead, but
+ // this approach seems to tbe clearest for now.
+ scrollCallback = handleScroll.bind( null, context );
+
+ // We need to add a scroll event listener to the window
+ // here because we are unable to otherwise access it via
+ // the Interactivity API directives. If we add a native way
+ // to access the window, we can remove this.
+ window.addEventListener(
+ 'scroll',
+ scrollCallback,
+ false
);
},
- hideLightbox: async ( { context, event } ) => {
+ hideLightbox: async ( { context } ) => {
context.core.image.hideAnimationEnabled = true;
if ( context.core.image.lightboxEnabled ) {
- // If scrolling, wait a moment before closing the lightbox.
- if (
- context.core.image.lightboxAnimation === 'fade'
- ) {
- context.core.image.scrollDelta += event.deltaY;
- if (
- event.type === 'mousewheel' &&
- Math.abs(
- window.scrollY -
- context.core.image.scrollDelta
- ) < 10
- ) {
- return;
- }
- } else if (
- context.core.image.lightboxAnimation === 'zoom'
- ) {
- // Disable scroll until the zoom animation ends.
- // Get the current page scroll position
- const scrollTop =
- window.pageYOffset ||
- document.documentElement.scrollTop;
- const scrollLeft =
- window.pageXOffset ||
- document.documentElement.scrollLeft;
- // if any scroll is attempted, set this to the previous value.
- window.onscroll = function () {
- window.scrollTo( scrollLeft, scrollTop );
- };
- // Enable scrolling after the animation finishes
- setTimeout( function () {
- window.onscroll = function () {};
- }, 400 );
- }
-
- document.documentElement.classList.remove(
- 'wp-has-lightbox-open'
- );
+ // We want to wait until the close animation is completed
+ // before allowing a user to scroll again. The duration of this
+ // animation is defined in the styles.scss and depends on if the
+ // animation is 'zoom' or 'fade', but in any case we should wait
+ // a few milliseconds longer than the duration, otherwise a user
+ // may scroll too soon and cause the animation to look sloppy.
+ setTimeout( function () {
+ window.removeEventListener(
+ 'scroll',
+ scrollCallback
+ );
+ }, 450 );
context.core.image.lightboxEnabled = false;
context.core.image.lastFocusedElement.focus( {
@@ -139,6 +197,27 @@ store(
ref,
} );
},
+ handleTouchStart: () => {
+ isTouching = true;
+ },
+ handleTouchMove: ( { context, event } ) => {
+ // On mobile devices, we want to prevent triggering the
+ // scroll event because otherwise the page jumps around as
+ // we reset the scroll position. This also means that closing
+ // the lightbox requires that a user perform a simple tap. This
+ // may be changed in the future if we find a better alternative
+ // to override or reset the scroll position during swipe actions.
+ if ( context.core.image.lightboxEnabled ) {
+ event.preventDefault();
+ }
+ },
+ handleTouchEnd: () => {
+ // We need to wait a few milliseconds before resetting
+ // to ensure that pinch to zoom works consistently
+ // on mobile devices when the lightbox is open.
+ lastTouchTime = Date.now();
+ isTouching = false;
+ },
},
},
},
@@ -266,6 +345,13 @@ store(
}
);
+/*
+ * Computes styles for the lightbox and adds them to the document.
+ *
+ * @function
+ * @param {Object} context - An Interactivity API context
+ * @param {Object} event - A triggering event
+ */
function setStyles( context, event ) {
// The reference img element lies adjacent
// to the event target button in the DOM.
@@ -434,6 +520,13 @@ function setStyles( context, event ) {
`;
}
+/*
+ * Debounces a function call.
+ *
+ * @function
+ * @param {Function} func - A function to be called
+ * @param {number} wait - The time to wait before calling the function
+ */
function debounce( func, wait = 50 ) {
let timeout;
return () => {
diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
index 3593961c09cfdc..59fceec596e37c 100644
--- a/packages/block-library/src/loginout/block.json
+++ b/packages/block-library/src/loginout/block.json
@@ -19,6 +19,14 @@
},
"supports": {
"className": true,
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "__experimentalDefaultControls": {
+ "margin": false,
+ "padding": false
+ }
+ },
"typography": {
"fontSize": true,
"lineHeight": true,
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 30181c9044c34d..f3baeb8c1756ba 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -244,7 +244,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Crop image to fill entire column' ) }
- checked={ imageFill }
+ checked={ !! imageFill }
onChange={ () =>
setAttributes( {
imageFill: ! imageFill,
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
index 3a7b7d28f9e800..3c3d91e7b0a052 100644
--- a/packages/block-library/src/navigation-link/link-ui.js
+++ b/packages/block-library/src/navigation-link/link-ui.js
@@ -44,7 +44,15 @@ export function getSuggestionsQuery( type, kind ) {
if ( kind === 'post-type' ) {
return { type: 'post', subtype: type };
}
- return {};
+ return {
+ // for custom link which has no type
+ // always show pages as initial suggestions
+ initialSuggestionsSearchOptions: {
+ type: 'post',
+ subtype: 'page',
+ perPage: 20,
+ },
+ };
}
}
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 19080c8d384823..2a45c3c545d301 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -5,7 +5,6 @@
.wp-block-navigation {
// This wraps just the innermost text for custom menu items.
.wp-block-navigation-item__label {
- word-break: normal;
overflow-wrap: break-word;
}
diff --git a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
index c787b90b76682f..6386cee71431e0 100644
--- a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
+++ b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
@@ -4,14 +4,19 @@
import { Warning } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
function DeletedNavigationWarning( { onCreateNew } ) {
return (
<Warning>
- { __( 'Navigation menu has been deleted or is unavailable. ' ) }
- <Button onClick={ onCreateNew } variant="link">
- { __( 'Create a new menu?' ) }
- </Button>
+ { createInterpolateElement(
+ __(
+ 'Navigation menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+ ),
+ {
+ button: <Button onClick={ onCreateNew } variant="link" />,
+ }
+ ) }
</Warning>
);
}
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 483e8abaab24f1..7c29f18d4940d4 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -93,6 +93,7 @@ function Navigation( {
// navigation block settings.
hasSubmenuIndicatorSetting = true,
customPlaceholder: CustomPlaceholder = null,
+ __unstableLayoutClassNames: layoutClassNames,
} ) {
const {
openSubmenusOnClick,
@@ -293,23 +294,31 @@ function Navigation( {
const isResponsive = 'never' !== overlayMenu;
const blockProps = useBlockProps( {
ref: navRef,
- className: classnames( className, {
- 'items-justified-right': justifyContent === 'right',
- 'items-justified-space-between': justifyContent === 'space-between',
- 'items-justified-left': justifyContent === 'left',
- 'items-justified-center': justifyContent === 'center',
- 'is-vertical': orientation === 'vertical',
- 'no-wrap': flexWrap === 'nowrap',
- 'is-responsive': isResponsive,
- 'has-text-color': !! textColor.color || !! textColor?.class,
- [ getColorClassName( 'color', textColor?.slug ) ]:
- !! textColor?.slug,
- 'has-background': !! backgroundColor.color || backgroundColor.class,
- [ getColorClassName( 'background-color', backgroundColor?.slug ) ]:
- !! backgroundColor?.slug,
- [ `has-text-decoration-${ textDecoration }` ]: textDecoration,
- 'block-editor-block-content-overlay': hasBlockOverlay,
- } ),
+ className: classnames(
+ className,
+ {
+ 'items-justified-right': justifyContent === 'right',
+ 'items-justified-space-between':
+ justifyContent === 'space-between',
+ 'items-justified-left': justifyContent === 'left',
+ 'items-justified-center': justifyContent === 'center',
+ 'is-vertical': orientation === 'vertical',
+ 'no-wrap': flexWrap === 'nowrap',
+ 'is-responsive': isResponsive,
+ 'has-text-color': !! textColor.color || !! textColor?.class,
+ [ getColorClassName( 'color', textColor?.slug ) ]:
+ !! textColor?.slug,
+ 'has-background':
+ !! backgroundColor.color || backgroundColor.class,
+ [ getColorClassName(
+ 'background-color',
+ backgroundColor?.slug
+ ) ]: !! backgroundColor?.slug,
+ [ `has-text-decoration-${ textDecoration }` ]: textDecoration,
+ 'block-editor-block-content-overlay': hasBlockOverlay,
+ },
+ layoutClassNames
+ ),
style: {
color: ! textColor?.slug && textColor?.color,
backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,
diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
index 812b37ea71a641..19258213f26e5f 100644
--- a/packages/block-library/src/navigation/edit/inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -118,6 +118,7 @@ export default function NavigationInnerBlocks( {
: false,
placeholder: showPlaceholder ? placeholder : undefined,
__experimentalCaptureToolbars: true,
+ __unstableDisableLayoutClassNames: true,
}
);
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index e562578e474954..a07235b601abb1 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -813,6 +813,8 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
* Ensure that the view script has the `wp-interactivity` dependency.
*
* @since 6.4.0
+ *
+ * @global WP_Scripts $wp_scripts
*/
function block_core_navigation_ensure_interactivity_dependency() {
global $wp_scripts;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 180b40b43daca1..eb8ef7683e1988 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -506,10 +506,10 @@ button.wp-block-navigation-item__content {
@include reduce-motion("animation");
// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
- padding-top: var(--wp--style--root--padding-top, 2rem);
- padding-right: var(--wp--style--root--padding-right, 2rem);
- padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
- padding-left: var(--wp--style--root--padding-left, 2rem);
+ padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+ padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+ padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+ padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
// Allow modal to scroll.
overflow: auto;
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 09d0157e987fd1..21f692bd25b263 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -155,7 +155,7 @@ function ParagraphBlock( {
onRemove={ onRemove }
aria-label={
content
- ? __( 'Paragraph block' )
+ ? __( 'Block: Paragraph' )
: __(
'Empty block; start writing or type forward slash to choose a block'
)
diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js
index d9f0c2c53cebcd..e8068faf5013d9 100644
--- a/packages/block-library/src/pattern/edit.js
+++ b/packages/block-library/src/pattern/edit.js
@@ -29,6 +29,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
const { getBlockRootClientId, getBlockEditingMode } =
useSelect( blockEditorStore );
+ // Duplicated in packages/edit-site/src/components/start-template-options/index.js.
function injectThemeAttributeInBlockTemplateContent( block ) {
if (
block.innerBlocks.find(
diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php
index b117e31e125cf2..fc4652a7c22e89 100644
--- a/packages/block-library/src/pattern/index.php
+++ b/packages/block-library/src/pattern/index.php
@@ -41,12 +41,12 @@ function render_block_core_pattern( $attributes ) {
}
$pattern = $registry->get_registered( $slug );
- $content = _inject_theme_attribute_in_block_template_content( $pattern['content'] );
+ $content = $pattern['content'];
+ // Backward compatibility for handling Block Hooks and injecting the theme attribute in the Gutenberg plugin.
// This can be removed when the minimum supported WordPress is >= 6.4.
- if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
- // TODO: In the long run, we'd likely want to have a filter in the `WP_Block_Patterns_Registry` class
- // instead to allow us plugging in code like this.
+ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && ! function_exists( 'traverse_and_serialize_blocks' ) ) {
+ $content = _inject_theme_attribute_in_block_template_content( $content );
$blocks = parse_blocks( $content );
$content = gutenberg_serialize_blocks( $blocks );
}
diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index 4821e634b60327..e740b8c56e608c 100644
--- a/packages/block-library/src/post-featured-image/style.scss
+++ b/packages/block-library/src/post-featured-image/style.scss
@@ -39,4 +39,8 @@
}
}
}
+
+ &:where(.alignleft, .alignright) {
+ width: 100%;
+ }
}
diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss
index 00305a17123369..4af30e30b23098 100644
--- a/packages/block-library/src/post-template/style.scss
+++ b/packages/block-library/src/post-template/style.scss
@@ -37,3 +37,23 @@
grid-template-columns: 1fr;
}
}
+
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+ float: right;
+ margin-inline-start: 2em;
+ margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+ float: left;
+ margin-inline-start: 0;
+ margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+}
diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php
index 8b0e431b3a8be4..d0eef8572ba139 100644
--- a/packages/block-library/src/post-title/index.php
+++ b/packages/block-library/src/post-title/index.php
@@ -38,7 +38,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
$rel = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
- $title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+ $title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', esc_url( get_the_permalink( $block->context['postId'] ) ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
}
$classes = array();
diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php
index 6b1861be8a1ef6..fe22410c246573 100644
--- a/packages/block-library/src/query-pagination-next/index.php
+++ b/packages/block-library/src/query-pagination-next/index.php
@@ -74,6 +74,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
$p->set_attribute( 'data-wp-on--mouseenter', 'actions.core.query.prefetch' );
+ $p->set_attribute( 'data-wp-effect', 'effects.core.query.prefetch' );
$content = $p->get_updated_html();
}
}
diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php
index be5d62d6b0a918..dc61f5d38b2828 100644
--- a/packages/block-library/src/query-pagination-previous/index.php
+++ b/packages/block-library/src/query-pagination-previous/index.php
@@ -62,6 +62,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
$p->set_attribute( 'data-wp-on--mouseenter', 'actions.core.query.prefetch' );
+ $p->set_attribute( 'data-wp-effect', 'effects.core.query.prefetch' );
$content = $p->get_updated_html();
}
}
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index 15bc2bf7542ac7..c35bf2ba00af21 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -95,6 +95,8 @@ class="wp-block-query__enhanced-pagination-animation"
* Ensure that the view script has the `wp-interactivity` dependency.
*
* @since 6.4.0
+ *
+ * @global WP_Scripts $wp_scripts
*/
function block_core_query_ensure_interactivity_dependency() {
global $wp_scripts;
diff --git a/packages/block-library/src/query/view.js b/packages/block-library/src/query/view.js
index 2f334692e32910..96be4ee513fcec 100644
--- a/packages/block-library/src/query/view.js
+++ b/packages/block-library/src/query/view.js
@@ -11,10 +11,10 @@ const isValidLink = ( ref ) =>
ref.origin === window.location.origin;
const isValidEvent = ( event ) =>
- event.button === 0 && // left clicks only
- ! event.metaKey && // open in new tab (mac)
- ! event.ctrlKey && // open in new tab (windows)
- ! event.altKey && // download
+ event.button === 0 && // Left clicks only.
+ ! event.metaKey && // Open in new tab (Mac).
+ ! event.ctrlKey && // Open in new tab (Windows).
+ ! event.altKey && // Download.
! event.shiftKey &&
! event.defaultPrevented;
@@ -39,7 +39,7 @@ store( {
const id = ref.closest( '[data-wp-navigation-id]' )
.dataset.wpNavigationId;
- // Don't announce the navigation immediately, wait 300 ms.
+ // Don't announce the navigation immediately, wait 400 ms.
const timeout = setTimeout( () => {
context.core.query.message =
context.core.query.loadingText;
@@ -62,13 +62,11 @@ store( {
: '' );
context.core.query.animation = 'finish';
+ context.core.query.url = ref.href;
// Focus the first anchor of the Query block.
- document
- .querySelector(
- `[data-wp-navigation-id=${ id }] a[href]`
- )
- ?.focus();
+ const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
+ document.querySelector( firstAnchor )?.focus();
}
},
prefetch: async ( { ref } ) => {
@@ -79,4 +77,15 @@ store( {
},
},
},
+ effects: {
+ core: {
+ query: {
+ prefetch: async ( { ref, context } ) => {
+ if ( context.core.query.url && isValidLink( ref ) ) {
+ await prefetch( ref.href );
+ }
+ },
+ },
+ },
+ },
} );
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
index d24de5c291d511..7c35d63f4fc894 100644
--- a/packages/block-library/src/rss/edit.js
+++ b/packages/block-library/src/rss/edit.js
@@ -69,7 +69,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
>
<HStack wrap>
<InputControl
- __next36pxDefaultSize
+ __next40pxDefaultSize
placeholder={ __( 'Enter URL here…' ) }
value={ feedURL }
onChange={ ( value ) =>
@@ -77,7 +77,11 @@ export default function RSSEdit( { attributes, setAttributes } ) {
}
className="wp-block-rss__placeholder-input"
/>
- <Button variant="primary" type="submit">
+ <Button
+ __next40pxDefaultSize
+ variant="primary"
+ type="submit"
+ >
{ __( 'Use URL' ) }
</Button>
</HStack>
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index ff957b575c7a4f..616478d8013f72 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -84,7 +84,7 @@ export default function SearchEdit( {
style,
} = attributes;
- const insertedInNavigationBlock = useSelect(
+ const wasJustInsertedIntoNavigationBlock = useSelect(
( select ) => {
const { getBlockParentsByBlockName, wasBlockJustInserted } =
select( blockEditorStore );
@@ -98,15 +98,21 @@ export default function SearchEdit( {
const { __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );
- if ( insertedInNavigationBlock ) {
- // This side-effect should not create an undo level.
- __unstableMarkNextChangeAsNotPersistent();
- setAttributes( {
- showLabel: false,
- buttonUseIcon: true,
- buttonPosition: 'button-inside',
- } );
- }
+ useEffect( () => {
+ if ( wasJustInsertedIntoNavigationBlock ) {
+ // This side-effect should not create an undo level.
+ __unstableMarkNextChangeAsNotPersistent();
+ setAttributes( {
+ showLabel: false,
+ buttonUseIcon: true,
+ buttonPosition: 'button-inside',
+ } );
+ }
+ }, [
+ __unstableMarkNextChangeAsNotPersistent,
+ wasJustInsertedIntoNavigationBlock,
+ setAttributes,
+ ] );
const borderRadius = style?.border?.radius;
const borderProps = useBorderProps( attributes );
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index 381e009d5ee07c..effa741249e919 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -13,6 +13,7 @@
display: flex;
align-items: center;
justify-content: center;
+ text-align: center;
}
&__components-button-group {
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index b2052307805651..ed3d1cf4b847a7 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -210,6 +210,8 @@ function register_block_core_search() {
* Ensure that the view script has the `wp-interactivity` dependency.
*
* @since 6.4.0
+ *
+ * @global WP_Scripts $wp_scripts
*/
function block_core_search_ensure_interactivity_dependency() {
global $wp_scripts;
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 967b2282ba6d57..b8a446721241b8 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -55,7 +55,11 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
margin-left: 0;
// Prevent unintended text wrapping.
flex-shrink: 0;
- // Ensure minimum input field width in small viewports.
+ max-width: 100%;
+ }
+
+ // Ensure minimum input field width in small viewports.
+ .wp-block-search__button[aria-expanded="true"] {
max-width: calc(100% - 100px);
}
}
diff --git a/packages/block-library/src/social-link/icons/index.js b/packages/block-library/src/social-link/icons/index.js
index 62c32d2d5f35c7..85de13090ad5dc 100644
--- a/packages/block-library/src/social-link/icons/index.js
+++ b/packages/block-library/src/social-link/icons/index.js
@@ -40,5 +40,6 @@ export * from './vimeo';
export * from './vk';
export * from './whatsapp';
export * from './wordpress';
+export * from './x';
export * from './yelp';
export * from './youtube';
diff --git a/packages/block-library/src/social-link/icons/x.js b/packages/block-library/src/social-link/icons/x.js
new file mode 100644
index 00000000000000..cd70775ad7cb89
--- /dev/null
+++ b/packages/block-library/src/social-link/icons/x.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const XIcon = () => (
+ <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+ <Path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />
+ </SVG>
+);
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 1ce60ff49fb41e..cda8e125097a50 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -238,6 +238,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
'name' => 'Reddit',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg>',
),
+ 'share' => array(
+ 'name' => 'Share Icon',
+ 'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
+ ),
'skype' => array(
'name' => 'Skype',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M10.113,2.699c0.033-0.006,0.067-0.013,0.1-0.02c0.033,0.017,0.066,0.033,0.098,0.051L10.113,2.699z M2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223z M21.275,13.771 c0.007-0.035,0.011-0.071,0.018-0.106c-0.018-0.031-0.033-0.064-0.052-0.095L21.275,13.771z M13.563,21.199 c0.032,0.019,0.065,0.035,0.096,0.053c0.036-0.006,0.071-0.011,0.105-0.017L13.563,21.199z M22,16.386 c0,1.494-0.581,2.898-1.637,3.953c-1.056,1.057-2.459,1.637-3.953,1.637c-0.967,0-1.914-0.251-2.75-0.725 c0.036-0.006,0.071-0.011,0.105-0.017l-0.202-0.035c0.032,0.019,0.065,0.035,0.096,0.053c-0.543,0.096-1.099,0.147-1.654,0.147 c-1.275,0-2.512-0.25-3.676-0.743c-1.125-0.474-2.135-1.156-3.002-2.023c-0.867-0.867-1.548-1.877-2.023-3.002 c-0.493-1.164-0.743-2.401-0.743-3.676c0-0.546,0.049-1.093,0.142-1.628c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103C2.244,9.5,2,8.566,2,7.615c0-1.493,0.582-2.898,1.637-3.953 c1.056-1.056,2.46-1.638,3.953-1.638c0.915,0,1.818,0.228,2.622,0.655c-0.033,0.007-0.067,0.013-0.1,0.02l0.199,0.031 c-0.032-0.018-0.066-0.034-0.098-0.051c0.002,0,0.003-0.001,0.004-0.001c0.586-0.112,1.187-0.169,1.788-0.169 c1.275,0,2.512,0.249,3.676,0.742c1.124,0.476,2.135,1.156,3.002,2.024c0.868,0.867,1.548,1.877,2.024,3.002 c0.493,1.164,0.743,2.401,0.743,3.676c0,0.575-0.054,1.15-0.157,1.712c-0.018-0.031-0.033-0.064-0.052-0.095l0.034,0.201 c0.007-0.035,0.011-0.071,0.018-0.106C21.754,14.494,22,15.432,22,16.386z M16.817,14.138c0-1.331-0.613-2.743-3.033-3.282 l-2.209-0.49c-0.84-0.192-1.807-0.444-1.807-1.237c0-0.794,0.679-1.348,1.903-1.348c2.468,0,2.243,1.696,3.468,1.696 c0.645,0,1.209-0.379,1.209-1.031c0-1.521-2.435-2.663-4.5-2.663c-2.242,0-4.63,0.952-4.63,3.488c0,1.221,0.436,2.521,2.839,3.123 l2.984,0.745c0.903,0.223,1.129,0.731,1.129,1.189c0,0.762-0.758,1.507-2.129,1.507c-2.679,0-2.307-2.062-3.743-2.062 c-0.645,0-1.113,0.444-1.113,1.078c0,1.236,1.501,2.886,4.856,2.886C15.236,17.737,16.817,16.199,16.817,14.138z"></path></svg>',
@@ -294,6 +298,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
'name' => 'WhatsApp',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z"></path></svg>',
),
+ 'x' => array(
+ 'name' => 'X',
+ 'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg>',
+ ),
'yelp' => array(
'name' => 'Yelp',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>',
@@ -302,10 +310,6 @@ function block_core_social_link_services( $service = '', $field = '' ) {
'name' => 'YouTube',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg>',
),
- 'share' => array(
- 'name' => 'Share Icon',
- 'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
- ),
);
if ( ! empty( $service )
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index 38c1ef91f99384..909e9b90a54c5c 100644
--- a/packages/block-library/src/social-link/social-list.js
+++ b/packages/block-library/src/social-link/social-list.js
@@ -14,7 +14,7 @@ import { ChainIcon } from './icons';
*
* @param {string} name key for a social service (lowercase slug)
*
- * @return {WPComponent} Icon component for social service.
+ * @return {Component} Icon component for social service.
*/
export const getIconBySite = ( name ) => {
const variation = variations.find( ( v ) => v.name === name );
diff --git a/packages/block-library/src/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss
index 042db464f6ee26..3ee9b4b5148a8a 100644
--- a/packages/block-library/src/social-link/socials-with-bg.scss
+++ b/packages/block-library/src/social-link/socials-with-bg.scss
@@ -199,6 +199,11 @@
color: #fff;
}
+.wp-social-link-x {
+ background-color: #000;
+ color: #fff;
+}
+
.wp-social-link-yelp {
background-color: #d32422;
color: #fff;
diff --git a/packages/block-library/src/social-link/socials-without-bg.scss b/packages/block-library/src/social-link/socials-without-bg.scss
index ea8fca5d7ab835..aa84b5ab1433c0 100644
--- a/packages/block-library/src/social-link/socials-without-bg.scss
+++ b/packages/block-library/src/social-link/socials-without-bg.scss
@@ -155,6 +155,10 @@
color: #3499cd;
}
+.wp-social-link-x {
+ color: #000;
+}
+
.wp-social-link-yelp {
color: #d32422;
}
diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js
index 47307ca65c0882..5b03b85ae4e60e 100644
--- a/packages/block-library/src/social-link/variations.js
+++ b/packages/block-library/src/social-link/variations.js
@@ -44,6 +44,7 @@ import {
VkIcon,
WhatsAppIcon,
WordPressIcon,
+ XIcon,
YelpIcon,
YouTubeIcon,
} from './icons';
@@ -304,6 +305,13 @@ const variations = [
title: 'WhatsApp',
icon: WhatsAppIcon,
},
+ {
+ name: 'x',
+ attributes: { service: 'x' },
+ keywords: [ 'twitter' ],
+ title: 'X',
+ icon: XIcon,
+ },
{
name: 'yelp',
attributes: { service: 'yelp' },
diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
index 915375606b10c3..7c2d7e1f8eb148 100644
--- a/packages/block-library/src/table-of-contents/edit.js
+++ b/packages/block-library/src/table-of-contents/edit.js
@@ -19,6 +19,8 @@ import {
import { useDispatch, useSelect } from '@wordpress/data';
import { renderToString } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { store as noticeStore } from '@wordpress/notices';
/**
* Internal dependencies
@@ -40,7 +42,7 @@ import { useObserveHeadings } from './hooks';
* @param {string} props.clientId
* @param {(attributes: Object) => void} props.setAttributes
*
- * @return {WPComponent} The component.
+ * @return {Component} The component.
*/
export default function TableOfContentsEdit( {
attributes: { headings = [], onlyIncludeCurrentPage },
@@ -50,6 +52,24 @@ export default function TableOfContentsEdit( {
useObserveHeadings( clientId );
const blockProps = useBlockProps();
+ const instanceId = useInstanceId(
+ TableOfContentsEdit,
+ 'table-of-contents'
+ );
+
+ // If a user clicks to a link prevent redirection and show a warning.
+ const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+ let noticeId;
+ const showRedirectionPreventedNotice = ( event ) => {
+ event.preventDefault();
+ // Remove previous warning if any, to show one at a time per block.
+ removeNotice( noticeId );
+ noticeId = `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`;
+ createWarningNotice( __( 'Links are disabled in the editor.' ), {
+ id: noticeId,
+ type: 'snackbar',
+ } );
+ };
const canInsertList = useSelect(
( select ) => {
@@ -137,8 +157,12 @@ export default function TableOfContentsEdit( {
return (
<>
<nav { ...blockProps }>
- <ol inert="true">
- <TableOfContentsList nestedHeadingList={ headingTree } />
+ <ol>
+ <TableOfContentsList
+ nestedHeadingList={ headingTree }
+ disableLinkActivation={ true }
+ onClick={ showRedirectionPreventedNotice }
+ />
</ol>
</nav>
{ toolbarControls }
diff --git a/packages/block-library/src/table-of-contents/list.tsx b/packages/block-library/src/table-of-contents/list.tsx
index e327f8dfe2e86b..fcb4736bab091d 100644
--- a/packages/block-library/src/table-of-contents/list.tsx
+++ b/packages/block-library/src/table-of-contents/list.tsx
@@ -1,7 +1,7 @@
/**
- * WordPress dependencies
+ * External dependencies
*/
-import type { WPElement } from '@wordpress/element';
+import type { MouseEvent, ReactElement } from 'react';
/**
* Internal dependencies
@@ -12,16 +12,30 @@ const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';
export default function TableOfContentsList( {
nestedHeadingList,
+ disableLinkActivation,
+ onClick,
}: {
nestedHeadingList: NestedHeadingData[];
-} ): WPElement {
+ disableLinkActivation?: boolean;
+ onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
+} ): ReactElement {
return (
<>
{ nestedHeadingList.map( ( node, index ) => {
const { content, link } = node.heading;
const entry = link ? (
- <a className={ ENTRY_CLASS_NAME } href={ link }>
+ <a
+ className={ ENTRY_CLASS_NAME }
+ href={ link }
+ aria-disabled={ disableLinkActivation || undefined }
+ onClick={
+ disableLinkActivation &&
+ 'function' === typeof onClick
+ ? onClick
+ : undefined
+ }
+ >
{ content }
</a>
) : (
@@ -35,6 +49,15 @@ export default function TableOfContentsList( {
<ol>
<TableOfContentsList
nestedHeadingList={ node.children }
+ disableLinkActivation={
+ disableLinkActivation
+ }
+ onClick={
+ disableLinkActivation &&
+ 'function' === typeof onClick
+ ? onClick
+ : undefined
+ }
/>
</ol>
) : null }
diff --git a/packages/block-library/src/template-part/edit/import-controls.js b/packages/block-library/src/template-part/edit/import-controls.js
index c8f4fbc2e647df..ca9708f65764b4 100644
--- a/packages/block-library/src/template-part/edit/import-controls.js
+++ b/packages/block-library/src/template-part/edit/import-controls.js
@@ -147,7 +147,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
options={ options }
onChange={ ( value ) => setSelectedSidebar( value ) }
disabled={ ! options.length }
- __next36pxDefaultSize
+ __next40pxDefaultSize
__nextHasNoMarginBottom
/>
</FlexBlock>
@@ -158,6 +158,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
} }
>
<Button
+ __next40pxDefaultSize
variant="primary"
type="submit"
isBusy={ isBusy }
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
index 48b5692aee3d71..6c1798756b40c9 100644
--- a/packages/block-library/src/video/edit.native.js
+++ b/packages/block-library/src/video/edit.native.js
@@ -162,7 +162,7 @@ class VideoEdit extends Component {
onSelectURL( url ) {
const { createErrorNotice, onReplace, setAttributes } = this.props;
- if ( isURL( url ) ) {
+ if ( isURL( url ) && /^https?:/.test( getProtocol( url ) ) ) {
// Check if there's an embed block that handles this URL.
const embedBlock = createUpgradedEmbedBlock( {
attributes: { url },
diff --git a/packages/block-library/src/video/test/edit.native.js b/packages/block-library/src/video/test/edit.native.js
new file mode 100644
index 00000000000000..9b7f4b0bdffbb4
--- /dev/null
+++ b/packages/block-library/src/video/test/edit.native.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import {
+ addBlock,
+ dismissModal,
+ fireEvent,
+ initializeEditor,
+ screen,
+ setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/video' ] );
+
+describe( 'Video block', () => {
+ it( 'should gracefully handle invalid URLs', async () => {
+ await initializeEditor();
+
+ await addBlock( screen, 'Video' );
+ fireEvent.press( screen.getByText( 'Insert from URL' ) );
+ fireEvent.changeText(
+ screen.getByPlaceholderText( 'Type a URL' ),
+ 'h://wordpress.org/video.mp4'
+ );
+ dismissModal( screen.getByTestId( 'bottom-sheet' ) );
+
+ expect( screen.getByText( 'Invalid URL.' ) ).toBeVisible();
+ } );
+} );
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 91cfec30c6a726..cbde04f72fd95b 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -914,11 +914,11 @@ A Higher Order Component used to inject BlockContent using context to the wrappe
_Parameters_
-- _OriginalComponent_ `WPComponent`: The component to enhance.
+- _OriginalComponent_ `Component`: The component to enhance.
_Returns_
-- `WPComponent`: The same component.
+- `Component`: The same component.
<!-- END TOKEN(Autogenerated API docs) -->
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 66aa2f142e4e9f..41b3e2204f6d3a 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -54,7 +54,7 @@
"remove-accents": "^0.5.0",
"showdown": "^1.9.1",
"simple-html-tokenizer": "^0.5.7",
- "uuid": "^8.3.0"
+ "uuid": "^9.0.1"
},
"peerDependencies": {
"react": "^18.0.0"
diff --git a/packages/blocks/src/api/children.js b/packages/blocks/src/api/children.js
index 8d0b3488017d5d..fe46a30870af97 100644
--- a/packages/blocks/src/api/children.js
+++ b/packages/blocks/src/api/children.js
@@ -20,7 +20,7 @@ import * as node from './node';
*
* @param {WPBlockChildren} children Block children object to convert.
*
- * @return {WPElement} A serialize-capable element.
+ * @return {Element} A serialize-capable element.
*/
export function getSerializeCapableElement( children ) {
// The fact that block children are compatible with the element serializer is
diff --git a/packages/blocks/src/api/raw-handling/paste-handler.js b/packages/blocks/src/api/raw-handling/paste-handler.js
index c4ad40e0b1f509..c63b207c1dbad6 100644
--- a/packages/blocks/src/api/raw-handling/paste-handler.js
+++ b/packages/blocks/src/api/raw-handling/paste-handler.js
@@ -121,17 +121,34 @@ export function pasteHandler( {
HTML = HTML.normalize();
}
- // Parse Markdown (and encoded HTML) if:
+ // Must be run before checking if it's inline content.
+ HTML = deepFilterHTML( HTML, [ slackParagraphCorrector ] );
+
+ // Consider plain text if:
// * There is a plain text version.
// * There is no HTML version, or it has no formatting.
- if ( plainText && ( ! HTML || isPlain( HTML ) ) ) {
+ const isPlainText = plainText && ( ! HTML || isPlain( HTML ) );
+
+ // Parse Markdown (and encoded HTML) if it's considered plain text.
+ if ( isPlainText ) {
HTML = plainText;
// The markdown converter (Showdown) trims whitespace.
if ( ! /^\s+$/.test( plainText ) ) {
HTML = markdownConverter( HTML );
}
+ }
+
+ // An array of HTML strings and block objects. The blocks replace matched
+ // shortcodes.
+ const pieces = shortcodeConverter( HTML );
+
+ // The call to shortcodeConverter will always return more than one element
+ // if shortcodes are matched. The reason is when shortcodes are matched
+ // empty HTML strings are included.
+ const hasShortcodes = pieces.length > 1;
+ if ( isPlainText && ! hasShortcodes ) {
// Switch to inline mode if:
// * The current mode is AUTO.
// * The original plain text had no line breaks.
@@ -151,18 +168,6 @@ export function pasteHandler( {
return filterInlineHTML( HTML, preserveWhiteSpace );
}
- // Must be run before checking if it's inline content.
- HTML = deepFilterHTML( HTML, [ slackParagraphCorrector ] );
-
- // An array of HTML strings and block objects. The blocks replace matched
- // shortcodes.
- const pieces = shortcodeConverter( HTML );
-
- // The call to shortcodeConverter will always return more than one element
- // if shortcodes are matched. The reason is when shortcodes are matched
- // empty HTML strings are included.
- const hasShortcodes = pieces.length > 1;
-
if (
mode === 'AUTO' &&
! hasShortcodes &&
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index 818a26fdb4e5c4..b1dbee47b9b7cb 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -17,7 +17,7 @@ import { unlock } from '../lock-unlock';
* An icon type definition. One of a Dashicon slug, an element,
* or a component.
*
- * @typedef {(string|WPElement|WPComponent)} WPIcon
+ * @typedef {(string|Element|Component)} WPIcon
*
* @see https://developer.wordpress.org/resource/dashicons/
*/
@@ -112,10 +112,10 @@ import { unlock } from '../lock-unlock';
* @property {string[]} [keywords] Additional keywords to produce block
* type as result in search interfaces.
* @property {Object} [attributes] Block type attributes.
- * @property {WPComponent} [save] Optional component describing
+ * @property {Component} [save] Optional component describing
* serialized markup structure of a
* block type.
- * @property {WPComponent} edit Component rendering an element to
+ * @property {Component} edit Component rendering an element to
* manipulate the attributes of a block
* in the context of an editor.
* @property {WPBlockVariation[]} [variations] The list of block variations.
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 29ac9f9a2228f3..5883f47536431d 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -174,9 +174,9 @@ export function getSaveElement(
/**
* Filters the save result of a block during serialization.
*
- * @param {WPElement} element Block save result.
- * @param {WPBlock} blockType Block type definition.
- * @param {Object} attributes Block attributes.
+ * @param {Element} element Block save result.
+ * @param {WPBlock} blockType Block type definition.
+ * @param {Object} attributes Block attributes.
*/
return applyFilters(
'blocks.getSaveElement',
diff --git a/packages/blocks/src/api/test/matchers.js b/packages/blocks/src/api/test/matchers.js
index 2068ae18c6e066..894c18abe3a01a 100644
--- a/packages/blocks/src/api/test/matchers.js
+++ b/packages/blocks/src/api/test/matchers.js
@@ -22,9 +22,9 @@ describe( 'matchers', () => {
expect( typeof source ).toBe( 'function' );
} );
- it( 'should return HTML equivalent WPElement of matched element', () => {
+ it( 'should return HTML equivalent React Element of matched element', () => {
// Assumption here is that we can cleanly convert back and forth
- // between a string and WPElement representation.
+ // between a string and React Element representation.
const html =
'<blockquote><p>A delicious sundae dessert</p></blockquote>';
const match = parse( html, sources.children() );
@@ -42,9 +42,9 @@ describe( 'matchers', () => {
expect( typeof source ).toBe( 'function' );
} );
- it( 'should return HTML equivalent WPElement of matched element', () => {
+ it( 'should return HTML equivalent React Element of matched element', () => {
// Assumption here is that we can cleanly convert back and forth
- // between a string and WPElement representation.
+ // between a string and React Element representation.
const html =
'<blockquote><p>A delicious sundae dessert</p></blockquote>';
const match = parse( html, sources.node() );
diff --git a/packages/blocks/src/deprecated.js b/packages/blocks/src/deprecated.js
index ec8a5b7bddb3c8..b3d01d1167bf51 100644
--- a/packages/blocks/src/deprecated.js
+++ b/packages/blocks/src/deprecated.js
@@ -9,8 +9,8 @@ import deprecated from '@wordpress/deprecated';
*
* @deprecated
*
- * @param {WPComponent} OriginalComponent The component to enhance.
- * @return {WPComponent} The same component.
+ * @param {Component} OriginalComponent The component to enhance.
+ * @return {Component} The same component.
*/
export function withBlockContentContext( OriginalComponent ) {
deprecated( 'wp.blocks.withBlockContentContext', {
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7e1bbe82a95757..b29e40ba900d9c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,10 +2,42 @@
## Unreleased
+### Enhancements
+
+- `SearchControl`: polish metrics for `compact` size variant ([#54663](https://github.com/WordPress/gutenberg/pull/54663)).
+- `Button`: deprecating `isPressed` prop in favour of `aria-pressed` ([#54740](https://github.com/WordPress/gutenberg/pull/54740)).
+- `DuotonePicker/ColorListPicker`: Adds appropriate label and description to 'Duotone Filter' picker ([#54473](https://github.com/WordPress/gutenberg/pull/54473)).
+- `Modal`: Accessibly hide/show outer modal when nested ([#54743](https://github.com/WordPress/gutenberg/pull/54743)).
+- `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `CustomSelectControl`, `TreeSelect`: Add opt-in prop for next 40px default size, superseding the `__next36pxDefaultSize` prop ([#53819](https://github.com/WordPress/gutenberg/pull/53819)).
+- `Modal`: add a new `size` prop to support preset widths, including a `fill` option to eventually replace the `isFullScreen` prop ([#54471](https://github.com/WordPress/gutenberg/pull/54471)).
+- Wrapped `TextareaControl` in a `forwardRef` call ([#54975](https://github.com/WordPress/gutenberg/pull/54975)).
+
+### Bug Fix
+
+- `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).
+- `DateTimePicker`: fix onChange callback check so that it also works inside iframes ([#54669](https://github.com/WordPress/gutenberg/pull/54669)).
+- `FormTokenField`: Add `box-sizing` reset style and reset default padding ([#54734](https://github.com/WordPress/gutenberg/pull/54734)).
+- `SlotFill`: Pass `Component` instance to unregisterSlot ([#54765](https://github.com/WordPress/gutenberg/pull/54765)).
+- `Button`: Remove `aria-selected` CSS selector from styling 'active' buttons ([#54931](https://github.com/WordPress/gutenberg/pull/54931)).
+- `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
+- `Button`: Remove hover styles when `aria-disabled` is set to `true` for the secondary variant. ([#54978](https://github.com/WordPress/gutenberg/pull/54978))
+
+### Internal
+
+- Update `@ariakit/react` to version `0.3.3` ([#54818](https://github.com/WordPress/gutenberg/pull/54818))
+- `Tooltip`, `Shortcut`: Remove unused `ui/` components from the codebase ([#54573](https://github.com/WordPress/gutenberg/pull/54573))
+- Refactor ariakit usages to use the `render` prop instead of `as` and to use the namespace import ([#54696](https://github.com/WordPress/gutenberg/pull/54696)).
+- Update `uuid` package to 9.0.1 ([#54725](https://github.com/WordPress/gutenberg/pull/54725)).
+- `ContextSystemProvider`: Move out of `ui/` ([#54847](https://github.com/WordPress/gutenberg/pull/54847)).
+- `SlotFill`: Migrate to TypeScript and Convert to Functional Component `<Slot bubblesVirtually />`. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
+- `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)).
+- Ensure `@types/` dependencies used by final type files are included in the main dependency field ([#50231](https://github.com/WordPress/gutenberg/pull/50231)).
+
## 25.8.0 (2023-09-20)
### Enhancements
+- Add new option `firstContentElement` to Modal's `focusOnMount` prop to allow consumers to focus the first element within the Modal's **contents** ([#54590](https://github.com/WordPress/gutenberg/pull/54590)).
- `Notice`: Improve accessibility by adding visually hidden text to clarify what a notice text is about and the notice type (success, error, warning, info) ([#54498](https://github.com/WordPress/gutenberg/pull/54498)).
- Making Circular Option Picker a `listbox`. Note that while this changes some public API, new props are optional, and currently have default values; this will change in another patch ([#52255](https://github.com/WordPress/gutenberg/pull/52255)).
- `ToggleGroupControl`: Rewrite backdrop animation using framer motion shared layout animations, add better support for controlled and uncontrolled modes ([#50278](https://github.com/WordPress/gutenberg/pull/50278)).
@@ -18,6 +50,7 @@
- `DuotonePicker/ColorListPicker`: Adds appropriate labels to 'Duotone Filter' color pickers ([#54468](https://github.com/WordPress/gutenberg/pull/54468)).
- `SearchControl`: support new `40px` and `32px` sizes ([#54548](https://github.com/WordPress/gutenberg/pull/54548)).
- `FormTokenField`: Add `tokenizeOnBlur` prop to add any incompleteTokenValue as a new token when field loses focus ([#54445](https://github.com/WordPress/gutenberg/pull/54445)).
+- `Sandbox`: Add `tabIndex` prop ([#54408](https://github.com/WordPress/gutenberg/pull/54408)).
### Bug Fix
@@ -112,6 +145,7 @@
- `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).
- `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)).
+- `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)).
### Bug Fix
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 5a94194fa63585..3d682c584f383d 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -328,7 +328,7 @@ An example of how this is used can be found in the [`Card` component family](/pa
//=========================================================================
// Simplified snippet from `packages/components/src/card/card/hook.ts`
//=========================================================================
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem } from '../../context';
export function useCard( props ) {
// Read any derived registered prop from the Context System in the `Card` namespace
@@ -342,7 +342,7 @@ export function useCard( props ) {
//=========================================================================
// Simplified snippet from `packages/components/src/card/card/component.ts`
//=========================================================================
-import { contextConnect, ContextSystemProvider } from '../../ui/context';
+import { contextConnect, ContextSystemProvider } from '../../context';
function Card( props, forwardedRef ) {
const {
@@ -379,7 +379,7 @@ export default ConnectedCard;
//=========================================================================
// Simplified snippet from `packages/components/src/card/card-body/hook.ts`
//=========================================================================
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem } from '../../context';
export function useCardBody( props ) {
// Read any derived registered prop from the Context System in the `CardBody` namespace.
@@ -581,7 +581,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
6. If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
```tsx
- import type { WordPressComponentProps } from '../ui/context';
+ import type { WordPressComponentProps } from '../context';
import type { ComponentOwnProps } from './types';
function UnconnectedMyComponent(
diff --git a/packages/components/README.md b/packages/components/README.md
index f324cb48c66d7e..f3e4399fe3d518 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -29,17 +29,12 @@ Many components include CSS to add styles, which you will need to load in order
In non-WordPress projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@wordpress/components/build-style/style.css`.
-### Popovers and Tooltips
-
-_If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._
+### Popovers
By default, the `Popover` component will render within an extra element appended to the body of the document.
If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
-A `Popover` is also used as the underlying mechanism to display `Tooltip` components.
-So the same considerations should be applied to them.
-
The following example illustrates how you can wrap a component using a
`Popover` and have those popovers render to a single location in the DOM.
@@ -58,7 +53,7 @@ const Example = () => {
<SlotFillProvider>
<MyComponentWithPopover />
<Popover.Slot />
- </SlotFillProvider>
+ </SlotFillProvider>;
};
```
diff --git a/packages/components/package.json b/packages/components/package.json
index 9c3cacc586fb2a..926f99de3c6278 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -30,7 +30,7 @@
],
"types": "build-types",
"dependencies": {
- "@ariakit/react": "^0.2.12",
+ "@ariakit/react": "^0.3.3",
"@babel/runtime": "^7.16.0",
"@emotion/cache": "^11.7.1",
"@emotion/css": "^11.7.1",
@@ -40,6 +40,8 @@
"@emotion/utils": "^1.0.0",
"@floating-ui/react-dom": "^2.0.1",
"@radix-ui/react-dropdown-menu": "2.0.4",
+ "@types/gradient-parser": "0.1.3",
+ "@types/highlight-words-core": "1.2.1",
"@use-gesture/react": "^10.2.24",
"@wordpress/a11y": "file:../a11y",
"@wordpress/compose": "file:../compose",
@@ -77,7 +79,7 @@
"reakit": "^1.3.11",
"remove-accents": "^0.5.0",
"use-lilius": "^2.0.1",
- "uuid": "^8.3.0",
+ "uuid": "^9.0.1",
"valtio": "1.7.0"
},
"peerDependencies": {
diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md
index 576fe77c1f25a4..d087a177d8d414 100644
--- a/packages/components/src/alignment-matrix-control/README.md
+++ b/packages/components/src/alignment-matrix-control/README.md
@@ -9,8 +9,8 @@ AlignmentMatrixControl components enable adjustments to horizontal and vertical
## Usage
```jsx
+import { useState } from 'react';
import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ alignment, setAlignment ] = useState( 'center center' );
diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/packages/components/src/alignment-matrix-control/cell.tsx
index b6e19c56022915..00daa6fb316954 100644
--- a/packages/components/src/alignment-matrix-control/cell.tsx
+++ b/packages/components/src/alignment-matrix-control/cell.tsx
@@ -14,7 +14,7 @@ import {
Point,
} from './styles/alignment-matrix-control-styles';
import type { AlignmentMatrixControlCellProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export default function Cell( {
isActive = false,
diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx
index b294bc7551e19d..33528e63fc87f0 100644
--- a/packages/components/src/alignment-matrix-control/icon.tsx
+++ b/packages/components/src/alignment-matrix-control/icon.tsx
@@ -13,7 +13,7 @@ import {
Point,
} from './styles/alignment-matrix-control-icon-styles';
import type { AlignmentMatrixControlIconProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
const BASE_SIZE = 24;
diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
index 0e34e4052346da..2d52bb0e248435 100644
--- a/packages/components/src/alignment-matrix-control/index.tsx
+++ b/packages/components/src/alignment-matrix-control/index.tsx
@@ -18,7 +18,7 @@ import { Composite, CompositeGroup, useCompositeState } from '../composite';
import { Root, Row } from './styles/alignment-matrix-control-styles';
import AlignmentMatrixControlIcon from './icon';
import { GRID, getItemId } from './utils';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type {
AlignmentMatrixControlProps,
AlignmentMatrixControlValue,
diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md
index c91a24272e0f7c..3cbc1f6c8d9e1a 100644
--- a/packages/components/src/angle-picker-control/README.md
+++ b/packages/components/src/angle-picker-control/README.md
@@ -6,7 +6,7 @@ Users can choose an angle in a visual UI with the mouse by dragging an angle ind
## Usage
```jsx
-import { useState } from '@wordpress/element';
+import { useState } from 'react';
import { AnglePickerControl } from '@wordpress/components';
function Example() {
diff --git a/packages/components/src/angle-picker-control/angle-circle.tsx b/packages/components/src/angle-picker-control/angle-circle.tsx
index 77518efb21bc1a..8558b23279302d 100644
--- a/packages/components/src/angle-picker-control/angle-circle.tsx
+++ b/packages/components/src/angle-picker-control/angle-circle.tsx
@@ -13,7 +13,7 @@ import {
CircleIndicator,
} from './styles/angle-picker-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { AngleCircleProps } from './types';
type UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];
diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
index 1fb17f86acfd2d..f90394b12078f4 100644
--- a/packages/components/src/angle-picker-control/index.tsx
+++ b/packages/components/src/angle-picker-control/index.tsx
@@ -20,7 +20,7 @@ import NumberControl from '../number-control';
import AngleCircle from './angle-circle';
import { Root, UnitText } from './styles/angle-picker-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { AnglePickerControlProps } from './types';
function UnforwardedAnglePickerControl(
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
index 65ac5b77d0da6c..08a907b21e0c99 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
*/
import { Flex } from '../../flex';
import { COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
import { Text } from '../../text';
import CONFIG from '../../utils/config-values';
diff --git a/packages/components/src/autocomplete/types.ts b/packages/components/src/autocomplete/types.ts
index cd0e5029580ba8..ebe69648fc7e96 100644
--- a/packages/components/src/autocomplete/types.ts
+++ b/packages/components/src/autocomplete/types.ts
@@ -1,7 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
/**
* WordPress dependencies
*/
-import type { WPElement } from '@wordpress/element';
import type { RichTextValue } from '@wordpress/rich-text';
/**
@@ -20,7 +24,7 @@ export type ReplaceOption = { action: 'replace'; value: RichTextValue };
export type OptionCompletion = React.ReactNode | InsertOption | ReplaceOption;
-type OptionLabel = string | WPElement | Array< string | WPElement >;
+type OptionLabel = string | ReactElement | Array< string | ReactElement >;
export type KeyedOption = {
key: string;
value: any;
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index fa2df39bddd458..29251a114e0343 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -15,7 +15,7 @@ import {
StyledHelp,
StyledVisualLabel,
} from './styles/base-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export { useBaseControlProps } from './hooks';
diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts
index abd2f3affc45ae..6ddfe10229fdbb 100644
--- a/packages/components/src/base-control/styles/base-control-styles.ts
+++ b/packages/components/src/base-control/styles/base-control-styles.ts
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
* Internal dependencies
*/
import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
export const Wrapper = styled.div`
font-family: ${ font( 'default.fontFamily' ) };
diff --git a/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx b/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx
index f782fb89340200..ee76c39742d417 100644
--- a/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx
@@ -10,8 +10,8 @@ import { __ } from '@wordpress/i18n';
import Button from '../../button';
import Tooltip from '../../tooltip';
import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderBoxControlLinkedButton } from './hook';
import type { LinkedButtonProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
index cd65758416ca13..3d535a6583a13c 100644
--- a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { LinkedButtonProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
index 922f0b39c09c97..ee7a6d86cb33fb 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -11,8 +11,8 @@ import { useMergeRefs } from '@wordpress/compose';
import BorderBoxControlVisualizer from '../border-box-control-visualizer';
import { BorderControl } from '../../border-control';
import { Grid } from '../../grid';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderBoxControlSplitControls } from './hook';
import type { BorderControlProps } from '../../border-control/types';
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
index ff152c9bc674ad..3a8194819ef0c8 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/';
import type { SplitControlsProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx b/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
index d815b0b8c088e8..2656911d765797 100644
--- a/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
@@ -7,8 +7,8 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderBoxControlVisualizer } from './hook';
import type { VisualizerProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
index d7ae390dcd146d..8cc678c7e2708c 100644
--- a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils';
import type { VisualizerProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index 4efe365cb50b7b..20352e03c8243d 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -27,9 +27,9 @@ show "Mixed" placeholder text.
## Usage
```jsx
+import { useState } from 'react';
import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
const colors = [
{ name: 'Blue 20', color: '#72aee6' },
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index ad3162851c2670..4f3517937f2046 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -14,8 +14,8 @@ import { BorderControl } from '../../border-control';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { VisuallyHidden } from '../../visually-hidden';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderBoxControl } from './hook';
import type { BorderBoxControlProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
index cf5aae4e09f725..a303e7d5a39e8b 100644
--- a/packages/components/src/border-box-control/border-box-control/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -16,8 +16,8 @@ import {
isCompleteBorder,
isEmptyBorder,
} from '../utils';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { Border } from '../../border-control/types';
diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 4a34d6ed7ffe34..4f43a6ed0ce55d 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -19,8 +19,8 @@ import ColorPalette from '../../color-palette';
import Dropdown from '../../dropdown';
import { HStack } from '../../h-stack';
import { VStack } from '../../v-stack';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderControlDropdown } from './hook';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index 99309bb3374c58..b60aa52a34e2eb 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -8,8 +8,8 @@ import { useMemo } from '@wordpress/element';
*/
import * as styles from '../styles';
import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { DropdownProps } from '../types';
diff --git a/packages/components/src/border-control/border-control-style-picker/component.tsx b/packages/components/src/border-control/border-control-style-picker/component.tsx
index 66858531f62cab..ffb44855be9fa4 100644
--- a/packages/components/src/border-control/border-control-style-picker/component.tsx
+++ b/packages/components/src/border-control/border-control-style-picker/component.tsx
@@ -12,8 +12,8 @@ import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { Flex } from '../../flex';
import { VisuallyHidden } from '../../visually-hidden';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderControlStylePicker } from './hook';
import type { LabelProps, StylePickerProps } from '../types';
diff --git a/packages/components/src/border-control/border-control-style-picker/hook.ts b/packages/components/src/border-control/border-control-style-picker/hook.ts
index 7a77c735b9c2c9..27233c40309a3a 100644
--- a/packages/components/src/border-control/border-control-style-picker/hook.ts
+++ b/packages/components/src/border-control/border-control-style-picker/hook.ts
@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { StylePickerProps } from '../types';
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 55c860720f2394..51fb7172b7c553 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -20,9 +20,9 @@ a "shape" abstraction.
## Usage
```jsx
+import { useState } from 'react';
import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
const colors = [
{ name: 'Blue 20', color: '#72aee6' },
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 617ff5dd5997c2..960be4bf171ea4 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -13,8 +13,8 @@ import { HStack } from '../../h-stack';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { VisuallyHidden } from '../../visually-hidden';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useBorderControl } from './hook';
import type { BorderControlProps, LabelProps } from '../types';
diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
index 39917793de72de..63034527cfa1a8 100644
--- a/packages/components/src/border-control/border-control/hook.ts
+++ b/packages/components/src/border-control/border-control/hook.ts
@@ -8,8 +8,8 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
*/
import * as styles from '../styles';
import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { Border, BorderControlProps } from '../types';
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index c828536e199f9a..322e9563d58a4d 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
* Internal dependencies
*/
import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { StyledLabel } from '../base-control/styles/base-control-styles';
import {
ValueInput as UnitControlWrapper,
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 83ccd50a6f1ffc..2fd214b79157f7 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -9,8 +9,8 @@ BoxControl components let users set values for Top, Right, Bottom, and Left. Thi
## Usage
```jsx
+import { useState } from 'react';
import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ values, setValues ] = useState( {
diff --git a/packages/components/src/box-control/icon.tsx b/packages/components/src/box-control/icon.tsx
index 6cb893648d68ab..480235aa7c0ad8 100644
--- a/packages/components/src/box-control/icon.tsx
+++ b/packages/components/src/box-control/icon.tsx
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import {
Root,
Viewbox,
diff --git a/packages/components/src/button-group/index.tsx b/packages/components/src/button-group/index.tsx
index 6185792b6e4d90..2eb7451e3e00db 100644
--- a/packages/components/src/button-group/index.tsx
+++ b/packages/components/src/button-group/index.tsx
@@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element';
* Internal dependencies
*/
import type { ButtonGroupProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
function UnforwardedButtonGroup(
props: WordPressComponentProps< ButtonGroupProps, 'div', false >,
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index fdd46b0255ccf2..3af46280b1bc9a 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -186,6 +186,8 @@ Renders a red text-based button style to indicate destructive behavior.
Renders a pressed button style.
+If the native `aria-pressed` attribute is also set, it will take precedence.
+
- Required: No
#### `isSmall`: `boolean`
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index a199c1bb350cd7..b14e85fa52f7f6 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -34,6 +34,7 @@ function useDeprecatedProps( {
isSecondary,
isTertiary,
isLink,
+ isPressed,
isSmall,
size,
variant,
@@ -42,6 +43,11 @@ function useDeprecatedProps( {
let computedSize = size;
let computedVariant = variant;
+ const newProps: { 'aria-pressed'?: boolean } = {
+ // @TODO Mark `isPressed` as deprecated
+ 'aria-pressed': isPressed,
+ };
+
if ( isSmall ) {
computedSize ??= 'small';
}
@@ -73,6 +79,7 @@ function useDeprecatedProps( {
}
return {
+ ...newProps,
...otherProps,
size: computedSize,
variant: computedVariant,
@@ -85,7 +92,6 @@ export function UnforwardedButton(
) {
const {
__next40pxDefaultSize,
- isPressed,
isBusy,
isDestructive,
className,
@@ -106,10 +112,16 @@ export function UnforwardedButton(
...buttonOrAnchorProps
} = useDeprecatedProps( props );
- const { href, target, ...additionalProps } =
- 'href' in buttonOrAnchorProps
- ? buttonOrAnchorProps
- : { href: undefined, target: undefined, ...buttonOrAnchorProps };
+ const {
+ href,
+ target,
+ 'aria-checked': ariaChecked,
+ 'aria-pressed': ariaPressed,
+ 'aria-selected': ariaSelected,
+ ...additionalProps
+ } = 'href' in buttonOrAnchorProps
+ ? buttonOrAnchorProps
+ : { href: undefined, target: undefined, ...buttonOrAnchorProps };
const instanceId = useInstanceId(
Button,
@@ -124,6 +136,12 @@ export function UnforwardedButton(
// Tooltip should not considered as a child
children?.[ 0 ]?.props?.className !== 'components-tooltip' );
+ const truthyAriaPressedValues: ( typeof ariaPressed )[] = [
+ true,
+ 'true',
+ 'mixed',
+ ];
+
const classes = classnames( 'components-button', className, {
'is-next-40px-default-size': __next40pxDefaultSize,
'is-secondary': variant === 'secondary',
@@ -131,7 +149,10 @@ export function UnforwardedButton(
'is-small': size === 'small',
'is-compact': size === 'compact',
'is-tertiary': variant === 'tertiary',
- 'is-pressed': isPressed,
+
+ 'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),
+ 'is-pressed-mixed': ariaPressed === 'mixed',
+
'is-busy': isBusy,
'is-link': variant === 'link',
'is-destructive': isDestructive,
@@ -146,7 +167,9 @@ export function UnforwardedButton(
? {
type: 'button',
disabled: trulyDisabled,
- 'aria-pressed': isPressed,
+ 'aria-checked': ariaChecked,
+ 'aria-pressed': ariaPressed,
+ 'aria-selected': ariaSelected,
}
: {};
const anchorProps: ComponentPropsWithoutRef< 'a' > =
diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx
index a1dadab081d8ac..2981319cfb3233 100644
--- a/packages/components/src/button/stories/index.story.tsx
+++ b/packages/components/src/button/stories/index.story.tsx
@@ -26,6 +26,17 @@ const meta: Meta< typeof Button > = {
component: Button,
argTypes: {
// Overrides a limitation of the docgen interpreting our TS types for this as required.
+ 'aria-pressed': {
+ control: { type: 'select' },
+ description:
+ 'Indicates the current "pressed" state, implying it is a toggle button. Implicitly set by `isPressed`, but takes precedence if both are provided.',
+ options: [ undefined, 'true', 'false', 'mixed' ],
+ table: {
+ type: {
+ summary: 'boolean | "true" | "false" | "mixed"',
+ },
+ },
+ },
href: { type: { name: 'string', required: false } },
icon: {
control: { type: 'select' },
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index b572e96e4335fc..e3b8c55f074e8d 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -145,7 +145,7 @@
color: $components-color-accent;
background: transparent;
- &:hover:not(:disabled) {
+ &:hover:not(:disabled, [aria-disabled="true"]) {
box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
}
}
@@ -308,7 +308,8 @@
}
// Toggled style.
- &.is-pressed {
+ &[aria-pressed="true"],
+ &[aria-pressed="mixed"] {
color: $components-color-foreground-inverted;
background: $components-color-foreground;
diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
index d70b8b075aa1eb..fb6c6a72b9adcb 100644
--- a/packages/components/src/button/test/index.tsx
+++ b/packages/components/src/button/test/index.tsx
@@ -72,12 +72,6 @@ describe( 'Button', () => {
expect( button ).toHaveClass( 'is-link' );
} );
- it( 'should render a button element with is-pressed without button class', () => {
- render( <Button isPressed /> );
-
- expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
- } );
-
it( 'should render a button element with has-text when children are passed', async () => {
const user = userEvent.setup();
@@ -347,6 +341,56 @@ describe( 'Button', () => {
await cleanupTooltip( user );
} );
+
+ describe( 'using `aria-pressed` prop', () => {
+ it( 'should render a button element with is-pressed when `true`', () => {
+ render( <Button aria-pressed /> );
+
+ expect( screen.getByRole( 'button' ) ).toHaveClass(
+ 'is-pressed'
+ );
+ } );
+
+ it( 'should render a button element with is-pressed when `"true"`', () => {
+ render( <Button aria-pressed="true" /> );
+
+ expect( screen.getByRole( 'button' ) ).toHaveClass(
+ 'is-pressed'
+ );
+ } );
+
+ it( 'should render a button element with is-pressed/is-pressed-mixed when `"mixed"`', () => {
+ render( <Button aria-pressed="mixed" /> );
+
+ expect( screen.getByRole( 'button' ) ).toHaveClass(
+ 'is-pressed is-pressed-mixed'
+ );
+ } );
+
+ it( 'should render a button element without is-pressed when `undefined`', () => {
+ render( <Button aria-pressed={ undefined } /> );
+
+ expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+ 'is-pressed'
+ );
+ } );
+
+ it( 'should render a button element without is-pressed when `false`', () => {
+ render( <Button aria-pressed={ false } /> );
+
+ expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+ 'is-pressed'
+ );
+ } );
+
+ it( 'should render a button element without is-pressed when `"false"`', () => {
+ render( <Button aria-pressed="false" /> );
+
+ expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+ 'is-pressed'
+ );
+ } );
+ } );
} );
describe( 'with href property', () => {
@@ -434,6 +478,23 @@ describe( 'Button', () => {
);
expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-compact' );
} );
+
+ it( 'should not break when the legacy isPressed prop is passed', () => {
+ render( <Button isPressed /> );
+
+ expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+ 'aria-pressed',
+ 'true'
+ );
+ } );
+
+ it( 'should prioritize the `aria-pressed` prop over `isPressed`', () => {
+ render( <Button isPressed aria-pressed="mixed" /> );
+ expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+ 'aria-pressed',
+ 'mixed'
+ );
+ } );
} );
describe( 'static typing', () => {
diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts
index 13b3fa5e00207e..b781786cc12711 100644
--- a/packages/components/src/button/types.ts
+++ b/packages/components/src/button/types.ts
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
*/
import type { Props as IconProps } from '../icon';
import type { PopoverProps } from '../popover/types';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
export type ButtonProps =
| WordPressComponentProps< ButtonAsButtonProps, 'button', false >
diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index f515162bbc1b76..44f96ec951123c 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { Scrollable } from '../../scrollable';
import { View } from '../../view';
import { useCardBody } from './hook';
diff --git a/packages/components/src/card/card-body/hook.ts b/packages/components/src/card/card-body/hook.ts
index 1418571fb71f58..d4cefb9ed9e670 100644
--- a/packages/components/src/card/card-body/hook.ts
+++ b/packages/components/src/card/card-body/hook.ts
@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
import type { BodyProps } from '../types';
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index 494d3451bb5ca9..8716f7caa9f238 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import type { DividerProps } from '../../divider';
import { Divider } from '../../divider';
import { useCardDivider } from './hook';
diff --git a/packages/components/src/card/card-divider/hook.ts b/packages/components/src/card/card-divider/hook.ts
index 969bdf0a43b71d..e7eb5c92b08cbe 100644
--- a/packages/components/src/card/card-divider/hook.ts
+++ b/packages/components/src/card/card-divider/hook.ts
@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
import type { DividerProps } from '../../divider';
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index 1507c7139cda27..74834eb1ca72ed 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { Flex } from '../../flex';
import { useCardFooter } from './hook';
import type { FooterProps } from '../types';
diff --git a/packages/components/src/card/card-footer/hook.ts b/packages/components/src/card/card-footer/hook.ts
index 1530faccaf15ce..844417848b8aee 100644
--- a/packages/components/src/card/card-footer/hook.ts
+++ b/packages/components/src/card/card-footer/hook.ts
@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
import type { FooterProps } from '../types';
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index 01c7942e438f2c..2ba12b5ed854f5 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { Flex } from '../../flex';
import { useCardHeader } from './hook';
import type { HeaderProps } from '../types';
diff --git a/packages/components/src/card/card-header/hook.ts b/packages/components/src/card/card-header/hook.ts
index 4804e76262d1dd..b45d75ff5467d0 100644
--- a/packages/components/src/card/card-header/hook.ts
+++ b/packages/components/src/card/card-header/hook.ts
@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
import type { HeaderProps } from '../types';
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 13e453c2aedcd6..36b645d98d822d 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
import { useCardMedia } from './hook';
import type { MediaProps } from '../types';
diff --git a/packages/components/src/card/card-media/hook.ts b/packages/components/src/card/card-media/hook.ts
index dfe67b8ed19731..b9f3a7b2edff47 100644
--- a/packages/components/src/card/card-media/hook.ts
+++ b/packages/components/src/card/card-media/hook.ts
@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
import type { MediaProps } from '../types';
diff --git a/packages/components/src/card/card/README.md b/packages/components/src/card/card/README.md
index ffad1e2ec36e53..c7b70c8c6c907a 100644
--- a/packages/components/src/card/card/README.md
+++ b/packages/components/src/card/card/README.md
@@ -66,7 +66,7 @@ Determines the amount of padding within the component.
### Inherited props
-`Card` also inherits all of the [`Surface` props](/packages/components/src/ui/surface/README.md#props).
+`Card` also inherits all of the [`Surface` props](/packages/components/src/surface/README.md#props).
## Sub-Components
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index b4f3831ce2f7e4..8fefc33bd48027 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -12,8 +12,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, ContextSystemProvider } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, ContextSystemProvider } from '../../context';
import { Elevation } from '../../elevation';
import { View } from '../../view';
import * as styles from '../styles';
diff --git a/packages/components/src/card/card/hook.ts b/packages/components/src/card/card/hook.ts
index eb4580941d01c3..93e313934b22a2 100644
--- a/packages/components/src/card/card/hook.ts
+++ b/packages/components/src/card/card/hook.ts
@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useSurface } from '../../surface';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
index 4bc19ed9bfe5f0..12f792ea8577bf 100644
--- a/packages/components/src/checkbox-control/README.md
+++ b/packages/components/src/checkbox-control/README.md
@@ -56,8 +56,8 @@ If only a few child checkboxes are checked, the parent checkbox becomes a mixed
Render an is author checkbox:
```jsx
+import { useState } from 'react';
import { CheckboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyCheckboxControl = () => {
const [ isChecked, setChecked ] = useState( true );
@@ -85,7 +85,7 @@ If no prop is passed an empty label is rendered.
- Required: No
-#### `help`: `string|WPElement`
+#### `help`: `string|Element`
If this property is added, a help text will be generated using help property as the content.
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 1b7cae04cd81f6..cd70bb8485ac7e 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -17,7 +17,7 @@ import { Icon, check, reset } from '@wordpress/icons';
*/
import BaseControl from '../base-control';
import type { CheckboxControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
/**
* Checkboxes allow the user to select one or more items from a set.
diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
index a7595daa349cd7..1dc230686cae17 100644
--- a/packages/components/src/circular-option-picker/README.md
+++ b/packages/components/src/circular-option-picker/README.md
@@ -9,8 +9,8 @@ This component is not exported, and therefore can only be used internally to the
## Usage
```jsx
+import { useState } from 'react';
import { CircularOptionPicker } from '../circular-option-picker';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ currentColor, setCurrentColor ] = useState();
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
index 2817569b0564ed..a9c86b4240ee9b 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
@@ -9,7 +9,7 @@ import classnames from 'classnames';
import Button from '../button';
import Dropdown from '../dropdown';
import type { DropdownLinkActionProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { ButtonAsButtonProps } from '../button/types';
export function DropdownLinkAction( {
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
index 0cfbea06538aab..2834228715115a 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -34,7 +34,14 @@ function UnforwardedOptionAsButton(
},
forwardedRef: ForwardedRef< any >
) {
- return <Button { ...props } ref={ forwardedRef }></Button>;
+ const { isPressed, ...additionalProps } = props;
+ return (
+ <Button
+ { ...additionalProps }
+ aria-pressed={ isPressed }
+ ref={ forwardedRef }
+ ></Button>
+ );
}
const OptionAsButton = forwardRef( UnforwardedOptionAsButton );
@@ -48,7 +55,7 @@ function UnforwardedOptionAsOption(
},
forwardedRef: ForwardedRef< any >
) {
- const { id, className, isSelected, context, ...additionalProps } = props;
+ const { id, isSelected, context, ...additionalProps } = props;
const { isComposite, ..._compositeState } = context;
const compositeState =
_compositeState as CircularOptionPickerCompositeState;
@@ -73,15 +80,6 @@ function UnforwardedOptionAsOption(
{ ...compositeState }
as={ Button }
id={ id }
- // Ideally we'd let the underlying `Button` component
- // handle this by passing `isPressed` as a prop.
- // Unfortunately doing so also sets `aria-pressed` as
- // an attribute on the element, which is incompatible
- // with `role="option"`, and there is no way at this
- // point to override that behaviour.
- className={ classnames( className, {
- 'is-pressed': isSelected,
- } ) }
role="option"
aria-selected={ !! isSelected }
ref={ forwardedRef }
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index e0e4f3e81d4190..a705bf62fdb11d 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -83,7 +83,8 @@ $color-palette-circle-spacing: 12px;
box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5) !important;
}
- &.is-pressed {
+ &[aria-pressed="true"],
+ &[aria-selected="true"] {
box-shadow: inset 0 0 0 4px;
position: relative;
z-index: z-index(".components-circular-option-picker__option.is-pressed");
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index da443c7691a95b..cd9d9dca6be8df 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -13,7 +13,7 @@ import type { Icon } from '@wordpress/icons';
*/
import type { ButtonAsButtonProps } from '../button/types';
import type { DropdownProps } from '../dropdown/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { CompositeState } from '../composite';
type CommonCircularOptionPickerProps = {
diff --git a/packages/components/src/clipboard-button/README.md b/packages/components/src/clipboard-button/README.md
index 0f1bbdf44b99db..94bd50b0476a58 100644
--- a/packages/components/src/clipboard-button/README.md
+++ b/packages/components/src/clipboard-button/README.md
@@ -11,8 +11,8 @@ With a clipboard button, users copy text (or other elements) with a single click
## Usage
```jsx
+import { useState } from 'react';
import { ClipboardButton } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyClipboardButton = () => {
const [ hasCopied, setHasCopied ] = useState( false );
diff --git a/packages/components/src/clipboard-button/index.tsx b/packages/components/src/clipboard-button/index.tsx
index ded4e9ad45d1a6..5a9cec30f7d49d 100644
--- a/packages/components/src/clipboard-button/index.tsx
+++ b/packages/components/src/clipboard-button/index.tsx
@@ -15,7 +15,7 @@ import deprecated from '@wordpress/deprecated';
*/
import Button from '../button';
import type { ClipboardButtonProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
const TIMEOUT = 4000;
diff --git a/packages/components/src/color-indicator/index.tsx b/packages/components/src/color-indicator/index.tsx
index fc402eac03f8c1..00312a39cdc7de 100644
--- a/packages/components/src/color-indicator/index.tsx
+++ b/packages/components/src/color-indicator/index.tsx
@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { ColorIndicatorProps } from './types';
function UnforwardedColorIndicator(
diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md
index 7b13b3905dd4ae..0fbfbd4d710013 100644
--- a/packages/components/src/color-palette/README.md
+++ b/packages/components/src/color-palette/README.md
@@ -5,8 +5,8 @@
## Usage
```jsx
+import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyColorPalette = () => {
const [ color, setColor ] = useState ( '#f00' )
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 60aeb6ed4d39ed..86f52305587c06 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -32,7 +32,7 @@ import type {
PaletteObject,
SinglePaletteProps,
} from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { DropdownProps } from '../dropdown/types';
import {
extractColorNameFromCurrentValue,
diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md
index 91656ca32851a9..ed6ab104cd26ab 100644
--- a/packages/components/src/color-picker/README.md
+++ b/packages/components/src/color-picker/README.md
@@ -5,8 +5,8 @@
## Usage
```jsx
+import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
function Example() {
const [color, setColor] = useState();
diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index f5d7f2978ddfce..99450b07628c21 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -10,8 +10,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { CopyButton } from './styles';
-import { Text } from '../text';
-import { Tooltip } from '../ui/tooltip';
+import Tooltip from '../tooltip';
import type { ColorCopyButtonProps } from './types';
@@ -56,14 +55,11 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
return (
<Tooltip
- content={
- <Text color="white">
- { copiedColor === color.toHex()
- ? __( 'Copied!' )
- : __( 'Copy' ) }
- </Text>
+ delay={ 0 }
+ hideOnClick={ false }
+ text={
+ copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
}
- placement="bottom"
>
<CopyButton
isSmall
diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index b4183dd071bfda..cff3b5d9c8ae4f 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import { useContextSystem, contextConnect } from '../ui/context';
+import { useContextSystem, contextConnect } from '../context';
import {
ColorfulWrapper,
SelectControl,
diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index edbb5350ef1d59..6001892ff8afa5 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
import { InputControl } from '../input-control';
import { Text } from '../text';
import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { COLORS } from '../utils/colors-values';
import type { StateReducer } from '../input-control/reducer/state';
import type { HexInputProps } from './types';
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index cb346bff8fd86e..b51db75c1f4513 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -4,7 +4,7 @@
import { HStack } from '../h-stack';
import { Text } from '../text';
import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { RangeControl, NumberControlWrapper } from './styles';
import { COLORS } from '../utils/colors-values';
import type { InputWithSliderProps } from './types';
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index f78db13a8fd73f..eee163d047ff06 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
import NumberControl from '../number-control';
import InnerSelectControl from '../select-control';
import InnerRangeControl from '../range-control';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { boxSizingReset } from '../utils';
import Button from '../button';
import { Flex } from '../flex';
diff --git a/packages/components/src/color-picker/types.ts b/packages/components/src/color-picker/types.ts
index 83f1f1621a76ba..5f98404c528444 100644
--- a/packages/components/src/color-picker/types.ts
+++ b/packages/components/src/color-picker/types.ts
@@ -13,7 +13,7 @@ import type { HslaColor } from 'react-colorful';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { useDeprecatedProps } from './use-deprecated-props';
export type ColorType = 'rgb' | 'hsl' | 'hex';
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 86b760e694a9aa..30f1f47e653e87 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -17,8 +17,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
### Usage
```jsx
+import { useState } from 'react';
import { ComboboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const options = [
{
diff --git a/packages/components/src/combobox-control/styles.ts b/packages/components/src/combobox-control/styles.ts
index de1ed2fb76677c..676c70f9e8f572 100644
--- a/packages/components/src/combobox-control/styles.ts
+++ b/packages/components/src/combobox-control/styles.ts
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
* Internal dependencies
*/
import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import type { ComboboxControlProps } from './types';
const deprecatedDefaultSize = ( {
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
index 0f1a25c2513665..c26d8ab5afeb96 100644
--- a/packages/components/src/combobox-control/test/index.tsx
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -56,7 +56,6 @@ const getOption = ( name: string ) => screen.getByRole( 'option', { name } );
const getAllOptions = () => screen.getAllByRole( 'option' );
const getOptionSearchString = ( option: ComboboxControlOption ) =>
option.label.substring( 0, 11 );
-const setupUser = () => userEvent.setup();
const ControlledComboboxControl = ( {
value: valueProp,
@@ -112,7 +111,7 @@ describe.each( [
} );
it( 'should render with the correct options', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
render(
<Component options={ timezones } label={ defaultLabelText } />
);
@@ -133,7 +132,7 @@ describe.each( [
} );
it( 'should select the correct option via click events', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const targetOption = timezones[ 2 ];
const onChangeSpy = jest.fn();
render(
@@ -157,7 +156,7 @@ describe.each( [
} );
it( 'should select the correct option via keypress events', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const targetIndex = 4;
const targetOption = timezones[ targetIndex ];
const onChangeSpy = jest.fn();
@@ -187,7 +186,7 @@ describe.each( [
} );
it( 'should select the correct option from a search', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const targetOption = timezones[ 13 ];
const onChangeSpy = jest.fn();
render(
@@ -214,7 +213,7 @@ describe.each( [
} );
it( 'should render aria-live announcement upon selection', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const targetOption = timezones[ 9 ];
const onChangeSpy = jest.fn();
render(
@@ -242,7 +241,7 @@ describe.each( [
} );
it( 'should process multiple entries in a single session', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const unmatchedString = 'Mordor';
const targetOption = timezones[ 6 ];
const onChangeSpy = jest.fn();
diff --git a/packages/components/src/confirm-dialog/README.md b/packages/components/src/confirm-dialog/README.md
index 9274a8fa2eaea1..86d38bccdec3c6 100644
--- a/packages/components/src/confirm-dialog/README.md
+++ b/packages/components/src/confirm-dialog/README.md
@@ -43,8 +43,8 @@ Let the parent component control when the dialog is open/closed. It's activated
- You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
```jsx
+import { useState } from 'react';
import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { useState } from '@wordpress/element';
function Example() {
const [ isOpen, setIsOpen ] = useState( true );
diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index 1de1c08ffbcf40..4a8efd06e139c7 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -14,8 +14,8 @@ import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
*/
import Modal from '../modal';
import type { OwnProps, DialogInputEvent } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem, contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnect } from '../context';
import { Flex } from '../flex';
import Button from '../button';
import { Text } from '../text';
diff --git a/packages/components/src/ui/context/constants.js b/packages/components/src/context/constants.js
similarity index 100%
rename from packages/components/src/ui/context/constants.js
rename to packages/components/src/context/constants.js
diff --git a/packages/components/src/ui/context/context-connect.ts b/packages/components/src/context/context-connect.ts
similarity index 97%
rename from packages/components/src/ui/context/context-connect.ts
rename to packages/components/src/context/context-connect.ts
index 8db2bbc987c0df..f938fa0b1f3241 100644
--- a/packages/components/src/ui/context/context-connect.ts
+++ b/packages/components/src/context/context-connect.ts
@@ -99,7 +99,7 @@ function _contextConnect<
}
// @ts-expect-error We can't rely on inferred types here because of the
- // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
+ // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
return Object.assign( WrappedComponent, {
[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],
displayName: namespace,
diff --git a/packages/components/src/ui/context/context-system-provider.js b/packages/components/src/context/context-system-provider.js
similarity index 98%
rename from packages/components/src/ui/context/context-system-provider.js
rename to packages/components/src/context/context-system-provider.js
index b03a8c63228286..741d2d833227fa 100644
--- a/packages/components/src/ui/context/context-system-provider.js
+++ b/packages/components/src/context/context-system-provider.js
@@ -20,7 +20,7 @@ import warn from '@wordpress/warning';
/**
* Internal dependencies
*/
-import { useUpdateEffect } from '../../utils';
+import { useUpdateEffect } from '../utils';
export const ComponentsContext = createContext(
/** @type {Record<string, any>} */ ( {} )
diff --git a/packages/components/src/ui/context/get-styled-class-name-from-key.ts b/packages/components/src/context/get-styled-class-name-from-key.ts
similarity index 100%
rename from packages/components/src/ui/context/get-styled-class-name-from-key.ts
rename to packages/components/src/context/get-styled-class-name-from-key.ts
diff --git a/packages/components/src/ui/context/index.ts b/packages/components/src/context/index.ts
similarity index 100%
rename from packages/components/src/ui/context/index.ts
rename to packages/components/src/context/index.ts
diff --git a/packages/components/src/ui/context/stories/ComponentsProvider.stories.js b/packages/components/src/context/stories/ComponentsProvider.stories.js
similarity index 100%
rename from packages/components/src/ui/context/stories/ComponentsProvider.stories.js
rename to packages/components/src/context/stories/ComponentsProvider.stories.js
diff --git a/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap b/packages/components/src/context/test/__snapshots__/context-system-provider.js.snap
similarity index 100%
rename from packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap
rename to packages/components/src/context/test/__snapshots__/context-system-provider.js.snap
diff --git a/packages/components/src/ui/context/test/context-connect.tsx b/packages/components/src/context/test/context-connect.tsx
similarity index 100%
rename from packages/components/src/ui/context/test/context-connect.tsx
rename to packages/components/src/context/test/context-connect.tsx
diff --git a/packages/components/src/ui/context/test/context-system-provider.js b/packages/components/src/context/test/context-system-provider.js
similarity index 100%
rename from packages/components/src/ui/context/test/context-system-provider.js
rename to packages/components/src/context/test/context-system-provider.js
diff --git a/packages/components/src/ui/context/test/wordpress-component.tsx b/packages/components/src/context/test/wordpress-component.tsx
similarity index 100%
rename from packages/components/src/ui/context/test/wordpress-component.tsx
rename to packages/components/src/context/test/wordpress-component.tsx
diff --git a/packages/components/src/ui/context/use-context-system.js b/packages/components/src/context/use-context-system.js
similarity index 98%
rename from packages/components/src/ui/context/use-context-system.js
rename to packages/components/src/context/use-context-system.js
index 07297ddb30f7e9..213d4ad67a2f55 100644
--- a/packages/components/src/ui/context/use-context-system.js
+++ b/packages/components/src/context/use-context-system.js
@@ -9,7 +9,7 @@ import warn from '@wordpress/warning';
import { useComponentsContext } from './context-system-provider';
import { getNamespace, getConnectedNamespace } from './utils';
import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
-import { useCx } from '../../utils/hooks/use-cx';
+import { useCx } from '../utils/hooks/use-cx';
/**
* @template TProps
diff --git a/packages/components/src/ui/context/utils.js b/packages/components/src/context/utils.js
similarity index 100%
rename from packages/components/src/ui/context/utils.js
rename to packages/components/src/context/utils.js
diff --git a/packages/components/src/ui/context/wordpress-component.ts b/packages/components/src/context/wordpress-component.ts
similarity index 100%
rename from packages/components/src/ui/context/wordpress-component.ts
rename to packages/components/src/context/wordpress-component.ts
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
index 4d09f256620219..291776b91f2ff1 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
@@ -34,7 +34,7 @@ import {
MINIMUM_SIGNIFICANT_MOVE,
KEYBOARD_CONTROL_POINT_VARIATION,
} from './constants';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import type {
ControlPointButtonProps,
ControlPointMoveState,
diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index 3f93291c34dde4..696fca338e465c 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -17,11 +17,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
### Usage
```jsx
-/**
- * WordPress dependencies
- */
+import { useState } from 'react';
import { CustomSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const options = [
{
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 10b9f0a307c010..ed9e73e525e449 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -21,6 +21,7 @@ import { Select as SelectControlSelect } from '../select-control/styles/select-c
import SelectControlChevronDown from '../select-control/chevron-down';
import { InputBaseWithBackCompatMinWidth } from './styles';
import { StyledLabel } from '../base-control/styles/base-control-styles';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
const itemToString = ( item ) => item?.name;
// This is needed so that in Windows, where
@@ -65,7 +66,7 @@ const stateReducer = (
export default function CustomSelectControl( props ) {
const {
/** Start opting into the larger default height that will become the default size in a future version. */
- __next36pxDefaultSize = false,
+ __next40pxDefaultSize = false,
/** Start opting into the unconstrained width that will become the default in a future version. */
__nextUnconstrainedWidth = false,
className,
@@ -82,7 +83,11 @@ export default function CustomSelectControl( props ) {
onFocus,
onBlur,
__experimentalShowSelectedHint = false,
- } = props;
+ } = useDeprecated36pxDefaultSizeProp(
+ props,
+ 'wp.components.CustomSelectControl',
+ '6.4'
+ );
const {
getLabelProps,
@@ -180,7 +185,7 @@ export default function CustomSelectControl( props ) {
</StyledLabel>
) }
<InputBaseWithBackCompatMinWidth
- __next36pxDefaultSize={ __next36pxDefaultSize }
+ __next40pxDefaultSize={ __next40pxDefaultSize }
__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
isFocused={ isOpen || isFocused }
__unstableInputWidth={
@@ -197,7 +202,7 @@ export default function CustomSelectControl( props ) {
onFocus={ handleOnFocus }
onBlur={ handleOnBlur }
selectSize={ size }
- __next36pxDefaultSize={ __next36pxDefaultSize }
+ __next40pxDefaultSize={ __next40pxDefaultSize }
{ ...getToggleButtonProps( {
// This is needed because some speech recognition software don't support `aria-labelledby`.
'aria-label': label,
@@ -232,8 +237,8 @@ export default function CustomSelectControl( props ) {
'is-highlighted':
index === highlightedIndex,
'has-hint': !! item.__experimentalHint,
- 'is-next-36px-default-size':
- __next36pxDefaultSize,
+ 'is-next-40px-default-size':
+ __next40pxDefaultSize,
}
),
style: item.style,
diff --git a/packages/components/src/custom-select-control/stories/index.story.js b/packages/components/src/custom-select-control/stories/index.story.js
index f7075afb0026be..d8fea5c7baa003 100644
--- a/packages/components/src/custom-select-control/stories/index.story.js
+++ b/packages/components/src/custom-select-control/stories/index.story.js
@@ -7,7 +7,7 @@ export default {
title: 'Components/CustomSelectControl',
component: CustomSelectControl,
argTypes: {
- __next36pxDefaultSize: { control: { type: 'boolean' } },
+ __next40pxDefaultSize: { control: { type: 'boolean' } },
__experimentalShowSelectedHint: { control: { type: 'boolean' } },
size: {
options: [ 'small', 'default', '__unstable-large' ],
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index b231218ef4b611..06c912cd510f91 100644
--- a/packages/components/src/custom-select-control/style.scss
+++ b/packages/components/src/custom-select-control/style.scss
@@ -44,7 +44,7 @@
cursor: default;
line-height: $icon-size + $grid-unit-05;
- &:not(.is-next-36px-default-size) {
+ &:not(.is-next-40px-default-size) {
padding: $grid-unit-10;
}
diff --git a/packages/components/src/dashicon/index.tsx b/packages/components/src/dashicon/index.tsx
index ab56548108fa83..d0abe7374da10d 100644
--- a/packages/components/src/dashicon/index.tsx
+++ b/packages/components/src/dashicon/index.tsx
@@ -9,7 +9,7 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { DashiconProps } from './types';
function Dashicon( {
diff --git a/packages/components/src/date-time/README.md b/packages/components/src/date-time/README.md
index c65cf6d3a1aaea..3d6b0e7761d6a6 100644
--- a/packages/components/src/date-time/README.md
+++ b/packages/components/src/date-time/README.md
@@ -15,8 +15,8 @@ Date pickers should:
Render a DateTimePicker.
```jsx
+import { useState } from 'react';
import { DateTimePicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyDateTimePicker = () => {
const [ date, setDate ] = useState( new Date() );
diff --git a/packages/components/src/date-time/date/styles.ts b/packages/components/src/date-time/date/styles.ts
index 0e7a3881d821c6..5500206abd40a2 100644
--- a/packages/components/src/date-time/date/styles.ts
+++ b/packages/components/src/date-time/date/styles.ts
@@ -10,7 +10,7 @@ import Button from '../../button';
import { COLORS, CONFIG } from '../../utils';
import { HStack } from '../../h-stack';
import { Heading } from '../../heading';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
export const Wrapper = styled.div`
box-sizing: border-box;
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index e5772bf7ab34c0..b0d8c20be74ac6 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
import BaseControl from '../../base-control';
import Button from '../../button';
import ButtonGroup from '../../button-group';
+import SelectControl from '../../select-control';
import TimeZone from './timezone';
import type { TimePickerProps } from '../types';
import {
@@ -24,7 +25,6 @@ import {
TimeSeparator,
MinutesInput,
MonthSelectWrapper,
- MonthSelect,
DayInput,
YearInput,
TimeWrapper,
@@ -127,7 +127,14 @@ export function TimePicker( {
method: 'hours' | 'minutes' | 'date' | 'year'
) => {
const callback: InputChangeCallback = ( value, { event } ) => {
- if ( ! ( event.target instanceof HTMLInputElement ) ) {
+ // `instanceof` checks need to get the instance definition from the
+ // corresponding window object — therefore, the following logic makes
+ // the component work correctly even when rendered inside an iframe.
+ const HTMLInputElementInstance =
+ ( event.target as HTMLInputElement )?.ownerDocument.defaultView
+ ?.HTMLInputElement ?? HTMLInputElement;
+
+ if ( ! ( event.target instanceof HTMLInputElementInstance ) ) {
return;
}
@@ -174,7 +181,7 @@ export function TimePicker( {
className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
label={ __( 'Day' ) }
hideLabelFromVision
- __next36pxDefaultSize
+ __next40pxDefaultSize
value={ day }
step={ 1 }
min={ 1 }
@@ -190,10 +197,11 @@ export function TimePicker( {
const monthField = (
<MonthSelectWrapper>
- <MonthSelect
+ <SelectControl
className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
label={ __( 'Month' ) }
hideLabelFromVision
+ __next40pxDefaultSize
__nextHasNoMarginBottom
value={ month }
options={ [
@@ -240,7 +248,7 @@ export function TimePicker( {
className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
label={ __( 'Hours' ) }
hideLabelFromVision
- __next36pxDefaultSize
+ __next40pxDefaultSize
value={ hours }
step={ 1 }
min={ is12Hour ? 1 : 0 }
@@ -267,7 +275,7 @@ export function TimePicker( {
className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
label={ __( 'Minutes' ) }
hideLabelFromVision
- __next36pxDefaultSize
+ __next40pxDefaultSize
value={ minutes }
step={ 1 }
min={ 0 }
@@ -294,6 +302,7 @@ export function TimePicker( {
variant={
am === 'AM' ? 'primary' : 'secondary'
}
+ __next40pxDefaultSize
onClick={ buildAmPmChangeCallback( 'AM' ) }
>
{ __( 'AM' ) }
@@ -303,6 +312,7 @@ export function TimePicker( {
variant={
am === 'PM' ? 'primary' : 'secondary'
}
+ __next40pxDefaultSize
onClick={ buildAmPmChangeCallback( 'PM' ) }
>
{ __( 'PM' ) }
@@ -338,7 +348,7 @@ export function TimePicker( {
className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
label={ __( 'Year' ) }
hideLabelFromVision
- __next36pxDefaultSize
+ __next40pxDefaultSize
value={ year }
step={ 1 }
min={ 1 }
diff --git a/packages/components/src/date-time/time/styles.ts b/packages/components/src/date-time/time/styles.ts
index bc579a6731ee98..bba0cc500e0c8a 100644
--- a/packages/components/src/date-time/time/styles.ts
+++ b/packages/components/src/date-time/time/styles.ts
@@ -8,14 +8,12 @@ import { css } from '@emotion/react';
* Internal dependencies
*/
import { COLORS, CONFIG } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
import {
Input,
BackdropUI,
} from '../../input-control/styles/input-control-styles';
import NumberControl from '../../number-control';
-import SelectControl from '../../select-control';
-import { Select } from '../../select-control/styles/select-control-styles';
export const Wrapper = styled.div`
box-sizing: border-box;
@@ -92,14 +90,6 @@ export const MonthSelectWrapper = styled.div`
flex-grow: 1;
`;
-export const MonthSelect = styled( SelectControl )`
- height: 36px;
-
- ${ Select } {
- line-height: 30px;
- }
-`;
-
export const DayInput = styled( NumberControl )`
${ baseInput }
diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md
index 0dea7ed40e13b8..498322931b7ab6 100644
--- a/packages/components/src/dimension-control/README.md
+++ b/packages/components/src/dimension-control/README.md
@@ -9,8 +9,8 @@ This feature is still experimental. “Experimental” means this is an early im
## Usage
```jsx
+import { useState } from 'react';
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
export default function MyCustomDimensionControl() {
const [ paddingSize, setPaddingSize ] = useState( '' );
diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md
index c36afc2044bd20..918f6b785e3876 100644
--- a/packages/components/src/disabled/README.md
+++ b/packages/components/src/disabled/README.md
@@ -7,8 +7,8 @@ Disabled is a component which disables descendant tabbable elements and prevents
Assuming you have a form component, you can disable all form inputs by wrapping the form with `<Disabled>`.
```jsx
+import { useState } from 'react';
import { Button, Disabled, TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyDisabled = () => {
const [ isDisabled, setIsDisabled ] = useState( true );
diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
index 91c4316f3a6d82..32baac3411054c 100644
--- a/packages/components/src/disabled/index.tsx
+++ b/packages/components/src/disabled/index.tsx
@@ -8,7 +8,7 @@ import { createContext } from '@wordpress/element';
*/
import { disabledStyles } from './styles/disabled-styles';
import type { DisabledProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import { useCx } from '../utils';
const Context = createContext< boolean >( false );
diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index 98b4edd61d4937..4ac2524456ab75 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -8,8 +8,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
import { DividerView } from './styles';
import type { DividerProps } from './types';
diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index ad13e357c53b08..189f0a0223041e 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { rtl } from '../utils';
import type { DividerProps } from './types';
diff --git a/packages/components/src/divider/types.ts b/packages/components/src/divider/types.ts
index feaa0b4f4c19b0..03caedb6a5b3e7 100644
--- a/packages/components/src/divider/types.ts
+++ b/packages/components/src/divider/types.ts
@@ -7,7 +7,7 @@ import type { SeparatorProps } from 'reakit';
/**
* Internal dependencies
*/
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
export type DividerProps = Omit<
SeparatorProps,
diff --git a/packages/components/src/drop-zone/README.md b/packages/components/src/drop-zone/README.md
index b06d278c5d1e5d..e06327ec774361 100644
--- a/packages/components/src/drop-zone/README.md
+++ b/packages/components/src/drop-zone/README.md
@@ -5,8 +5,8 @@
## Usage
```jsx
+import { useState } from 'react';
import { DropZone } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyDropZone = () => {
const [ hasDropped, setHasDropped ] = useState( false );
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
index b6d35f79ac4a39..f620e6a03c6b85 100644
--- a/packages/components/src/drop-zone/index.tsx
+++ b/packages/components/src/drop-zone/index.tsx
@@ -23,7 +23,7 @@ import {
__unstableAnimatePresence as AnimatePresence,
} from '../animation';
import type { DropType, DropZoneProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
/**
* `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
index 02f8322aa6a52f..085a1f2c144cce 100644
--- a/packages/components/src/dropdown-menu-v2/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -19,7 +19,7 @@ import { SVG, Circle } from '@wordpress/primitives';
/**
* Internal dependencies
*/
-import { useContextSystem, contextConnectWithoutRef } from '../ui/context';
+import { useContextSystem, contextConnectWithoutRef } from '../context';
import { useSlot } from '../slot-fill';
import Icon from '../icon';
import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
index 78aee12bf1f93a..9c76a6f6f0f72f 100644
--- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -32,7 +32,7 @@ import { menu, wordpress } from '@wordpress/icons';
* Internal dependencies
*/
import Icon from '../../icon';
-import { ContextSystemProvider } from '../../ui/context';
+import { ContextSystemProvider } from '../../context';
const meta: Meta< typeof DropdownMenu > = {
title: 'Components (Experimental)/DropdownMenu v2',
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index f1ba603797a7ff..cdeeed077b5f3a 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -9,7 +9,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
* Internal dependencies
*/
import { COLORS, font, rtl, CONFIG } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import Icon from '../icon';
import type { DropdownMenuInternalContext } from './types';
diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts
index 5c7d6469b656c9..c06bb5aac626a7 100644
--- a/packages/components/src/dropdown-menu-v2/types.ts
+++ b/packages/components/src/dropdown-menu-v2/types.ts
@@ -261,5 +261,5 @@ export type DropdownMenuPrivateContext = Pick<
DropdownMenuInternalContext,
'variant'
> & {
- portalContainer: HTMLElement | null;
+ portalContainer?: HTMLElement | null;
};
diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx
index 9105555927f47c..5d0e69f528204a 100644
--- a/packages/components/src/dropdown-menu/index.tsx
+++ b/packages/components/src/dropdown-menu/index.tsx
@@ -11,7 +11,7 @@ import { menu } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import { contextConnectWithoutRef, useContextSystem } from '../ui/context';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
import Button from '../button';
import Dropdown from '../dropdown';
import { NavigableMenu } from '../navigable-container';
diff --git a/packages/components/src/dropdown-menu/types.ts b/packages/components/src/dropdown-menu/types.ts
index 7b141c97acf580..7deb08abaa28ec 100644
--- a/packages/components/src/dropdown-menu/types.ts
+++ b/packages/components/src/dropdown-menu/types.ts
@@ -6,7 +6,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
* Internal dependencies
*/
import type { ButtonAsButtonProps } from '../button/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { DropdownProps } from '../dropdown/types';
import type { Props as IconProps } from '../icon';
import type { NavigableMenuProps } from '../navigable-container/types';
diff --git a/packages/components/src/dropdown/dropdown-content-wrapper.tsx b/packages/components/src/dropdown/dropdown-content-wrapper.tsx
index ba9a15218f6f3a..ce41f24081f819 100644
--- a/packages/components/src/dropdown/dropdown-content-wrapper.tsx
+++ b/packages/components/src/dropdown/dropdown-content-wrapper.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
import { DropdownContentWrapperDiv } from './styles';
import type { DropdownContentWrapperProps } from './types';
diff --git a/packages/components/src/dropdown/index.tsx b/packages/components/src/dropdown/index.tsx
index 0a870049a5b697..0527f4f0c2cd8d 100644
--- a/packages/components/src/dropdown/index.tsx
+++ b/packages/components/src/dropdown/index.tsx
@@ -14,7 +14,7 @@ import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
-import { contextConnect, useContextSystem } from '../ui/context';
+import { contextConnect, useContextSystem } from '../context';
import { useControlledValue } from '../utils/hooks';
import Popover from '../popover';
import type { DropdownProps, DropdownInternalContext } from './types';
diff --git a/packages/components/src/dropdown/styles.ts b/packages/components/src/dropdown/styles.ts
index f64e886e8be264..6d5412f9a81213 100644
--- a/packages/components/src/dropdown/styles.ts
+++ b/packages/components/src/dropdown/styles.ts
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import type { DropdownContentWrapperProps } from './types';
const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {
diff --git a/packages/components/src/duotone-picker/README.md b/packages/components/src/duotone-picker/README.md
index 4c1b5c13c4be10..550cf5774b2a76 100644
--- a/packages/components/src/duotone-picker/README.md
+++ b/packages/components/src/duotone-picker/README.md
@@ -3,8 +3,8 @@
## Usage
```jsx
+import { useState } from 'react';
import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const DUOTONE_PALETTE = [
{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index 70e5753175eac0..759c517b4759e1 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -67,6 +67,7 @@ function DuotonePicker( {
onChange,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
+ ...otherProps
}: DuotonePickerProps ) {
const [ defaultDark, defaultLight ] = useMemo(
() => getDefaultColors( colorPalette ),
@@ -74,13 +75,15 @@ function DuotonePicker( {
);
const isUnset = value === 'unset';
+ const unsetOptionLabel = __( 'Unset' );
const unsetOption = (
<CircularOptionPicker.Option
key="unset"
value="unset"
isSelected={ isUnset }
- tooltipText={ __( 'Unset' ) }
+ tooltipText={ unsetOptionLabel }
+ aria-label={ unsetOptionLabel }
className="components-duotone-picker__color-indicator"
onClick={ () => {
onChange( isUnset ? undefined : 'unset' );
@@ -154,6 +157,7 @@ function DuotonePicker( {
return (
<CircularOptionPicker
+ { ...otherProps }
{ ...metaProps }
options={ unsetable ? [ unsetOption, ...options ] : options }
actions={
diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx
index 269929820824f3..d116859d9a303a 100644
--- a/packages/components/src/elevation/component.tsx
+++ b/packages/components/src/elevation/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useElevation } from './hook';
import type { ElevationProps } from './types';
diff --git a/packages/components/src/elevation/hook.ts b/packages/components/src/elevation/hook.ts
index 1aa97c9167bc93..1eeda29cb600f2 100644
--- a/packages/components/src/elevation/hook.ts
+++ b/packages/components/src/elevation/hook.ts
@@ -12,8 +12,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
import * as styles from './styles';
import { CONFIG, reduceMotion } from '../utils';
import { useCx } from '../utils/hooks/use-cx';
diff --git a/packages/components/src/external-link/index.tsx b/packages/components/src/external-link/index.tsx
index d11f7e1eb71f67..312aa88f491d24 100644
--- a/packages/components/src/external-link/index.tsx
+++ b/packages/components/src/external-link/index.tsx
@@ -17,7 +17,7 @@ import { external } from '@wordpress/icons';
import { VisuallyHidden } from '../visually-hidden';
import { StyledIcon } from './styles/external-link-styles';
import type { ExternalLinkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
function UnforwardedExternalLink(
props: Omit<
diff --git a/packages/components/src/external-link/test/index.tsx b/packages/components/src/external-link/test/index.tsx
index 810874577231d3..18fc0104270b0d 100644
--- a/packages/components/src/external-link/test/index.tsx
+++ b/packages/components/src/external-link/test/index.tsx
@@ -9,11 +9,9 @@ import userEvent from '@testing-library/user-event';
*/
import { ExternalLink } from '..';
-const setupUser = () => userEvent.setup();
-
describe( 'ExternalLink', () => {
test( 'should call function passed in onClick handler when clicking the link', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const onClickMock = jest.fn();
render(
@@ -32,7 +30,7 @@ describe( 'ExternalLink', () => {
} );
test( 'should prevent default action when clicking an internal anchor link without passing onClick prop', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
render(
<ExternalLink href="#test">I'm an anchor link!</ExternalLink>
@@ -55,7 +53,7 @@ describe( 'ExternalLink', () => {
} );
test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const onClickMock = jest.fn();
render(
@@ -76,7 +74,7 @@ describe( 'ExternalLink', () => {
} );
test( 'should not prevent default action when clicking a non anchor link without passing onClick prop', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
render(
<ExternalLink href="https://wordpress.org">
diff --git a/packages/components/src/flex/flex-block/component.tsx b/packages/components/src/flex/flex-block/component.tsx
index 4d01f16e3abd94..c156b0af5a01f1 100644
--- a/packages/components/src/flex/flex-block/component.tsx
+++ b/packages/components/src/flex/flex-block/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
import type { FlexBlockProps } from '../types';
import { useFlexBlock } from './hook';
diff --git a/packages/components/src/flex/flex-block/hook.ts b/packages/components/src/flex/flex-block/hook.ts
index 1c0497ac56d0fd..aa702e752a8121 100644
--- a/packages/components/src/flex/flex-block/hook.ts
+++ b/packages/components/src/flex/flex-block/hook.ts
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useFlexItem } from '../flex-item';
import type { FlexBlockProps } from '../types';
diff --git a/packages/components/src/flex/flex-item/component.tsx b/packages/components/src/flex/flex-item/component.tsx
index 446e2b94839705..c02d3dda7cb8f6 100644
--- a/packages/components/src/flex/flex-item/component.tsx
+++ b/packages/components/src/flex/flex-item/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
import { useFlexItem } from './hook';
import type { FlexItemProps } from '../types';
diff --git a/packages/components/src/flex/flex-item/hook.ts b/packages/components/src/flex/flex-item/hook.ts
index db130f0b62aa0a..4de791905a4065 100644
--- a/packages/components/src/flex/flex-item/hook.ts
+++ b/packages/components/src/flex/flex-item/hook.ts
@@ -7,8 +7,8 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useFlexContext } from '../context';
import * as styles from '../styles';
import { useCx } from '../../utils/hooks/use-cx';
diff --git a/packages/components/src/flex/flex/component.tsx b/packages/components/src/flex/flex/component.tsx
index 8fce9ea144c704..c1802c102cc764 100644
--- a/packages/components/src/flex/flex/component.tsx
+++ b/packages/components/src/flex/flex/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useFlex } from './hook';
import { FlexContext } from './../context';
import { View } from '../../view';
diff --git a/packages/components/src/flex/flex/hook.ts b/packages/components/src/flex/flex/hook.ts
index 6ac032f75dc4c1..df53667915999c 100644
--- a/packages/components/src/flex/flex/hook.ts
+++ b/packages/components/src/flex/flex/hook.ts
@@ -12,10 +12,10 @@ import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
-import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
-import { space } from '../../ui/utils/space';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
+import { useResponsiveValue } from '../../utils/use-responsive-value';
+import { space } from '../../utils/space';
import * as styles from '../styles';
import { useCx } from '../../utils';
import type { FlexProps } from '../types';
diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts
index e36a906392b8d9..cc5553a660a831 100644
--- a/packages/components/src/flex/types.ts
+++ b/packages/components/src/flex/types.ts
@@ -6,8 +6,8 @@ import type { CSSProperties, ReactNode } from 'react';
/**
* Internal dependencies
*/
-import type { ResponsiveCSSValue } from '../ui/utils/types';
-import type { SpaceInput } from '../ui/utils/space';
+import type { ResponsiveCSSValue } from '../utils/types';
+import type { SpaceInput } from '../utils/space';
export type FlexDirection = ResponsiveCSSValue<
CSSProperties[ 'flexDirection' ]
diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
index 4d8c1324328766..9abb147831409a 100644
--- a/packages/components/src/focal-point-picker/README.md
+++ b/packages/components/src/focal-point-picker/README.md
@@ -8,8 +8,8 @@ Focal Point Picker is a component which creates a UI for identifying the most im
## Usage
```jsx
+import { useState } from 'react';
import { FocalPointPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ focalPoint, setFocalPoint ] = useState( {
diff --git a/packages/components/src/focal-point-picker/focal-point.tsx b/packages/components/src/focal-point-picker/focal-point.tsx
index 21a25f5a832f34..5b82bef4bfb2ea 100644
--- a/packages/components/src/focal-point-picker/focal-point.tsx
+++ b/packages/components/src/focal-point-picker/focal-point.tsx
@@ -8,7 +8,7 @@ import { PointerCircle } from './styles/focal-point-style';
*/
import classnames from 'classnames';
import type { FocalPointProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export default function FocalPoint( {
left = '50%',
diff --git a/packages/components/src/focal-point-picker/grid.tsx b/packages/components/src/focal-point-picker/grid.tsx
index 9b7ef9cff25f50..a52f5b11c1b2fd 100644
--- a/packages/components/src/focal-point-picker/grid.tsx
+++ b/packages/components/src/focal-point-picker/grid.tsx
@@ -7,7 +7,7 @@ import {
GridLineY,
} from './styles/focal-point-picker-style';
import type { FocalPointPickerGridProps } from './types';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
export default function FocalPointPickerGrid( {
bounds,
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 1c9077483dfda3..65efdc322cf0c6 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/packages/components/src/focal-point-picker/index.tsx
@@ -28,7 +28,7 @@ import {
} from './styles/focal-point-picker-style';
import { INITIAL_BOUNDS } from './utils';
import { useUpdateEffect } from '../utils/hooks';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
import type {
FocalPoint as FocalPointType,
FocalPointPickerProps,
diff --git a/packages/components/src/focusable-iframe/README.md b/packages/components/src/focusable-iframe/README.md
index a7cd2f0b31b5b4..f083cff58cacb8 100644
--- a/packages/components/src/focusable-iframe/README.md
+++ b/packages/components/src/focusable-iframe/README.md
@@ -32,7 +32,7 @@ Callback to invoke when iframe receives focus. Passes an emulated `FocusEvent` o
### `iframeRef`
-- Type: `wp.element.Ref`
+- Type: `React.Ref`
- Required: No
-If a reference to the underlying DOM element is needed, pass `iframeRef` as the result of a `wp.element.createRef` called from your component.
+If a reference to the underlying DOM element is needed, pass `iframeRef` as the result of a `React.createRef` called from your component.
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 3eee5683407075..56391ad0c7c33f 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -6,8 +6,8 @@ The component renders a user interface that allows the user to select predefined
## Usage
```jsx
+import { useState } from 'react';
import { FontSizePicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
const fontSizes = [
diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts
index 8ba0ce661c5eb7..ef8ec8ebb30cb2 100644
--- a/packages/components/src/font-size-picker/styles.ts
+++ b/packages/components/src/font-size-picker/styles.ts
@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
import BaseControl from '../base-control';
import Button from '../button';
import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { COLORS } from '../utils';
export const Container = styled.fieldset`
diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
index 38dd50dd039155..f4dc4d1ef5a023 100644
--- a/packages/components/src/form-file-upload/README.md
+++ b/packages/components/src/form-file-upload/README.md
@@ -38,9 +38,9 @@ Children are passed as children of `Button`.
### icon
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+The icon to render. Supported values are: Dashicons (specified as strings), functions, Component instances and `null`.
-- Type: `String|Function|WPComponent|null`
+- Type: `String|Function|Component|null`
- Required: No
- Default: `null`
diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
index 608fdf837300f4..0600e47d7324c3 100644
--- a/packages/components/src/form-file-upload/index.tsx
+++ b/packages/components/src/form-file-upload/index.tsx
@@ -7,7 +7,7 @@ import { useRef } from '@wordpress/element';
* Internal dependencies
*/
import Button from '../button';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { FormFileUploadProps } from './types';
/**
diff --git a/packages/components/src/form-toggle/README.md b/packages/components/src/form-toggle/README.md
index 941e431654e50b..5d385e23f7bdec 100644
--- a/packages/components/src/form-toggle/README.md
+++ b/packages/components/src/form-toggle/README.md
@@ -54,8 +54,8 @@ When a user switches a toggle, its corresponding action takes effect immediately
### Usage
```jsx
+import { useState } from 'react';
import { FormToggle } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyFormToggle = () => {
const [ isChecked, setChecked ] = useState( true );
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
index e7ee1ae0bebdee..19cb828023ad89 100644
--- a/packages/components/src/form-toggle/index.tsx
+++ b/packages/components/src/form-toggle/index.tsx
@@ -7,7 +7,7 @@ import classnames from 'classnames';
* Internal dependencies
*/
import type { FormToggleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export const noop = () => {};
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index 3a4ce2a143624a..41083789f1340f 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -67,8 +67,8 @@ The `value` property is handled in a manner similar to controlled form component
## Usage
```jsx
+import { useState } from 'react';
import { FormTokenField } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const continents = [
'Africa',
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index ba820f23c9d32d..72a5b7929a7b04 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -164,6 +164,7 @@
list-style: none;
box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
margin: 0;
+ padding: 0;
}
.components-form-token-field__suggestion {
@@ -174,6 +175,7 @@
min-height: $button-size-compact;
margin: 0;
cursor: pointer;
+ box-sizing: border-box;
&.is-selected {
background: $components-color-accent;
diff --git a/packages/components/src/form-token-field/styles.ts b/packages/components/src/form-token-field/styles.ts
index ee67f44a5f3244..e4d41ad90c472c 100644
--- a/packages/components/src/form-token-field/styles.ts
+++ b/packages/components/src/form-token-field/styles.ts
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
* Internal dependencies
*/
import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { boxSizingReset } from '../utils';
type TokensAndInputWrapperProps = {
diff --git a/packages/components/src/form-token-field/token-input.tsx b/packages/components/src/form-token-field/token-input.tsx
index 196ac03c799af8..a8367695670b20 100644
--- a/packages/components/src/form-token-field/token-input.tsx
+++ b/packages/components/src/form-token-field/token-input.tsx
@@ -12,7 +12,7 @@ import { forwardRef, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { TokenInputProps } from './types';
export function UnForwardedTokenInput(
diff --git a/packages/components/src/gradient-picker/README.md b/packages/components/src/gradient-picker/README.md
index 6d7a482df82820..c092c8b5673cc9 100644
--- a/packages/components/src/gradient-picker/README.md
+++ b/packages/components/src/gradient-picker/README.md
@@ -9,8 +9,8 @@ GradientPicker is a React component that renders a color gradient picker to defi
Render a GradientPicker.
```jsx
+import { useState } from 'react';
import { GradientPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const myGradientPicker = () => {
const [ gradient, setGradient ] = useState( null );
diff --git a/packages/components/src/grid/component.tsx b/packages/components/src/grid/component.tsx
index 3ea6db0ba85448..f18909c8e1c9ae 100644
--- a/packages/components/src/grid/component.tsx
+++ b/packages/components/src/grid/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import useGrid from './hook';
import type { GridProps } from './types';
diff --git a/packages/components/src/grid/hook.ts b/packages/components/src/grid/hook.ts
index 7fd54d6c4f19eb..621438c96df7b3 100644
--- a/packages/components/src/grid/hook.ts
+++ b/packages/components/src/grid/hook.ts
@@ -11,10 +11,10 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
import { getAlignmentProps } from './utils';
-import { useResponsiveValue } from '../ui/utils/use-responsive-value';
+import { useResponsiveValue } from '../utils/use-responsive-value';
import CONFIG from '../utils/config-values';
import { useCx } from '../utils/hooks/use-cx';
import type { GridProps } from './types';
diff --git a/packages/components/src/grid/types.ts b/packages/components/src/grid/types.ts
index 878e23f8ff5317..44258064e46a69 100644
--- a/packages/components/src/grid/types.ts
+++ b/packages/components/src/grid/types.ts
@@ -6,7 +6,7 @@ import type { CSSProperties, ReactNode } from 'react';
/**
* Internal dependencies
*/
-import type { ResponsiveCSSValue } from '../ui/utils/types';
+import type { ResponsiveCSSValue } from '../utils/types';
type GridAlignment =
| 'bottom'
diff --git a/packages/components/src/guide/page.tsx b/packages/components/src/guide/page.tsx
index dcad2780203c8a..04dbabb34854ac 100644
--- a/packages/components/src/guide/page.tsx
+++ b/packages/components/src/guide/page.tsx
@@ -7,7 +7,7 @@ import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export default function GuidePage(
props: WordPressComponentProps< {}, 'div', false >
diff --git a/packages/components/src/h-stack/component.tsx b/packages/components/src/h-stack/component.tsx
index 51b25486f0b389..1d1efebe8a0912 100644
--- a/packages/components/src/h-stack/component.tsx
+++ b/packages/components/src/h-stack/component.tsx
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useHStack } from './hook';
import type { Props } from './types';
diff --git a/packages/components/src/h-stack/hook.tsx b/packages/components/src/h-stack/hook.tsx
index cab7df1cad79c5..b7b8cf92954a1d 100644
--- a/packages/components/src/h-stack/hook.tsx
+++ b/packages/components/src/h-stack/hook.tsx
@@ -6,11 +6,11 @@ import type { ReactElement } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { hasConnectNamespace, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { hasConnectNamespace, useContextSystem } from '../context';
import { FlexItem, useFlex } from '../flex';
import { getAlignmentProps } from './utils';
-import { getValidChildren } from '../ui/utils/get-valid-children';
+import { getValidChildren } from '../utils/get-valid-children';
import type { Props } from './types';
export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
diff --git a/packages/components/src/heading/component.tsx b/packages/components/src/heading/component.tsx
index b15739f9c17b87..a42af8b05f471d 100644
--- a/packages/components/src/heading/component.tsx
+++ b/packages/components/src/heading/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useHeading } from './hook';
import type { HeadingProps } from './types';
diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts
index 13153bc8530381..e493343967cba8 100644
--- a/packages/components/src/heading/hook.ts
+++ b/packages/components/src/heading/hook.ts
@@ -1,10 +1,10 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
import { useText } from '../text';
-import { getHeadingFontSize } from '../ui/utils/font-size';
+import { getHeadingFontSize } from '../utils/font-size';
import { CONFIG, COLORS } from '../utils';
import type { HeadingProps } from './types';
diff --git a/packages/components/src/higher-order/with-constrained-tabbing/README.md b/packages/components/src/higher-order/with-constrained-tabbing/README.md
index e6ef44b061e3c7..47cb8a033dfbdd 100644
--- a/packages/components/src/higher-order/with-constrained-tabbing/README.md
+++ b/packages/components/src/higher-order/with-constrained-tabbing/README.md
@@ -7,12 +7,12 @@
Wrap your original component with `withConstrainedTabbing`.
```jsx
+import { useState } from 'react';
import {
withConstrainedTabbing,
TextControl,
Button,
} from '@wordpress/components';
-import { useState } from '@wordpress/element';
const ConstrainedTabbing = withConstrainedTabbing(
( { children } ) => children
diff --git a/packages/components/src/higher-order/with-focus-return/README.md b/packages/components/src/higher-order/with-focus-return/README.md
index b038e090390040..b99d76bc6f1c9a 100644
--- a/packages/components/src/higher-order/with-focus-return/README.md
+++ b/packages/components/src/higher-order/with-focus-return/README.md
@@ -7,8 +7,8 @@
### `withFocusReturn`
```jsx
+import { useState } from 'react';
import { withFocusReturn, TextControl, Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const EnhancedComponent = withFocusReturn( () => (
<div>
diff --git a/packages/components/src/higher-order/with-focus-return/index.tsx b/packages/components/src/higher-order/with-focus-return/index.tsx
index 2596617ad382d2..196226def624c1 100644
--- a/packages/components/src/higher-order/with-focus-return/index.tsx
+++ b/packages/components/src/higher-order/with-focus-return/index.tsx
@@ -36,7 +36,7 @@ type Props = {
*/
export default createHigherOrderComponent(
// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
- ( options: WPComponent | Record< string, unknown > ) => {
+ ( options: React.ComponentType | Record< string, unknown > ) => {
const HoC =
( { onFocusReturn }: Props = {} ) =>
( WrappedComponent: React.ComponentType ) => {
diff --git a/packages/components/src/higher-order/with-spoken-messages/index.tsx b/packages/components/src/higher-order/with-spoken-messages/index.tsx
index b987d44c4be315..5e0d52c81ad438 100644
--- a/packages/components/src/higher-order/with-spoken-messages/index.tsx
+++ b/packages/components/src/higher-order/with-spoken-messages/index.tsx
@@ -4,7 +4,7 @@
import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
import { speak } from '@wordpress/a11y';
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
/**
* A Higher Order Component used to be provide speak and debounced speak
@@ -12,9 +12,9 @@ import { speak } from '@wordpress/a11y';
*
* @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
*
- * @param {WPComponent} Component The component to be wrapped.
+ * @param {ComponentType} Component The component to be wrapped.
*
- * @return {WPComponent} The wrapped component.
+ * @return {ComponentType} The wrapped component.
*/
export default createHigherOrderComponent(
( Component ) => ( props ) => (
diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md
index 4566ed9831a5df..5e78f029f169f7 100644
--- a/packages/components/src/icon/README.md
+++ b/packages/components/src/icon/README.md
@@ -67,9 +67,9 @@ The component accepts the following props. Any additional props are passed throu
### icon
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+The icon to render. Supported values are: Dashicons (specified as strings), functions, Component instances and `null`.
-- Type: `String|Function|WPComponent|null`
+- Type: `String|Function|Component|null`
- Required: No
- Default: `null`
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index b1586995caa54e..f9eafb7757e47e 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -16,9 +16,10 @@ import { useState, forwardRef } from '@wordpress/element';
import InputBase from './input-base';
import InputField from './input-field';
import type { InputControlProps } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { useDraft } from './utils';
import BaseControl from '../base-control';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
const noop = () => {};
@@ -30,8 +31,11 @@ function useUniqueId( idProp?: string ) {
}
export function UnforwardedInputControl(
- {
- __next36pxDefaultSize,
+ props: InputControlProps,
+ ref: ForwardedRef< HTMLInputElement >
+) {
+ const {
+ __next40pxDefaultSize,
__unstableStateReducer: stateReducer = ( state ) => state,
__unstableInputWidth,
className,
@@ -50,10 +54,13 @@ export function UnforwardedInputControl(
style,
suffix,
value,
- ...props
- }: InputControlProps,
- ref: ForwardedRef< HTMLInputElement >
-) {
+ ...restProps
+ } = useDeprecated36pxDefaultSizeProp< InputControlProps >(
+ props,
+ 'wp.components.InputControl',
+ '6.4'
+ );
+
const [ isFocused, setIsFocused ] = useState( false );
const id = useUniqueId( idProp );
@@ -61,7 +68,7 @@ export function UnforwardedInputControl(
const draftHookProps = useDraft( {
value,
- onBlur: props.onBlur,
+ onBlur: restProps.onBlur,
onChange,
} );
@@ -78,7 +85,7 @@ export function UnforwardedInputControl(
__nextHasNoMarginBottom
>
<InputBase
- __next36pxDefaultSize={ __next36pxDefaultSize }
+ __next40pxDefaultSize={ __next40pxDefaultSize }
__unstableInputWidth={ __unstableInputWidth }
disabled={ disabled }
gap={ 3 }
@@ -94,9 +101,9 @@ export function UnforwardedInputControl(
suffix={ suffix }
>
<InputField
- { ...props }
+ { ...restProps }
{ ...helpProp }
- __next36pxDefaultSize={ __next36pxDefaultSize }
+ __next40pxDefaultSize={ __next40pxDefaultSize }
className="components-input-control__input"
disabled={ disabled }
id={ id }
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index f0a89b92772a5b..64544971840b34 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -22,8 +22,9 @@ import {
getSizeConfig,
} from './styles/input-control-styles';
import type { InputBaseProps, LabelPosition } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { ContextSystemProvider } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { ContextSystemProvider } from '../context';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
function useUniqueId( idProp?: string ) {
const instanceId = useInstanceId( InputBase );
@@ -60,8 +61,11 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
}
export function InputBase(
- {
- __next36pxDefaultSize,
+ props: WordPressComponentProps< InputBaseProps, 'div' >,
+ ref: ForwardedRef< HTMLDivElement >
+) {
+ const {
+ __next40pxDefaultSize,
__unstableInputWidth,
children,
className,
@@ -74,16 +78,19 @@ export function InputBase(
prefix,
size = 'default',
suffix,
- ...props
- }: WordPressComponentProps< InputBaseProps, 'div' >,
- ref: ForwardedRef< HTMLDivElement >
-) {
+ ...restProps
+ } = useDeprecated36pxDefaultSizeProp(
+ props,
+ 'wp.components.InputBase',
+ '6.4'
+ );
+
const id = useUniqueId( idProp );
const hideLabel = hideLabelFromVision || ! label;
const { paddingLeft, paddingRight } = getSizeConfig( {
inputSize: size,
- __next36pxDefaultSize,
+ __next40pxDefaultSize,
} );
const prefixSuffixContextValue = useMemo( () => {
return {
@@ -95,7 +102,7 @@ export function InputBase(
return (
// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
<Root
- { ...props }
+ { ...restProps }
{ ...getUIFlexProps( labelPosition ) }
className={ className }
gap={ 2 }
diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx
index a2bed23e149a48..37e2bf4351c002 100644
--- a/packages/components/src/input-control/input-field.tsx
+++ b/packages/components/src/input-control/input-field.tsx
@@ -19,7 +19,7 @@ import { forwardRef, useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import { useDragCursor } from './utils';
import { Input } from './styles/input-control-styles';
import { useInputControlStateReducer } from './reducer/reducer';
diff --git a/packages/components/src/input-control/input-prefix-wrapper.tsx b/packages/components/src/input-control/input-prefix-wrapper.tsx
index 7f888bd9b74440..23d9e823da932d 100644
--- a/packages/components/src/input-control/input-prefix-wrapper.tsx
+++ b/packages/components/src/input-control/input-prefix-wrapper.tsx
@@ -7,8 +7,8 @@ import type { ForwardedRef } from 'react';
* Internal dependencies
*/
import { Spacer } from '../spacer';
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
import type { InputControlPrefixWrapperProps } from './types';
function UnconnectedInputControlPrefixWrapper(
diff --git a/packages/components/src/input-control/input-suffix-wrapper.tsx b/packages/components/src/input-control/input-suffix-wrapper.tsx
index 000457aefc3149..1be352f562e369 100644
--- a/packages/components/src/input-control/input-suffix-wrapper.tsx
+++ b/packages/components/src/input-control/input-suffix-wrapper.tsx
@@ -7,8 +7,8 @@ import type { ForwardedRef } from 'react';
* Internal dependencies
*/
import { Spacer } from '../spacer';
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
import type { InputControlSuffixWrapperProps } from './types';
function UnconnectedInputControlSuffixWrapper(
diff --git a/packages/components/src/input-control/label.tsx b/packages/components/src/input-control/label.tsx
index c0a79f83d95995..9c82d4d7902730 100644
--- a/packages/components/src/input-control/label.tsx
+++ b/packages/components/src/input-control/label.tsx
@@ -6,7 +6,7 @@ import {
Label as BaseLabel,
LabelWrapper,
} from './styles/input-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { InputControlLabelProps } from './types';
export default function Label( {
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 1bc75e2d82043b..85331d85cd20ed 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -9,12 +9,12 @@ import type { CSSProperties, ReactNode } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import { Flex, FlexItem } from '../../flex';
import { Text } from '../../text';
import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
import type { LabelPosition, Size } from '../types';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
type ContainerProps = {
disabled?: boolean;
@@ -80,7 +80,7 @@ export const Container = styled.div< ContainerProps >`
`;
type InputProps = {
- __next36pxDefaultSize?: boolean;
+ __next40pxDefaultSize?: boolean;
disabled?: boolean;
inputSize?: Size;
isDragging?: boolean;
@@ -120,14 +120,14 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
export const getSizeConfig = ( {
inputSize: size,
- __next36pxDefaultSize,
+ __next40pxDefaultSize,
}: InputProps ) => {
// Paddings may be overridden by the custom paddings props.
const sizes = {
default: {
- height: 36,
+ height: 40,
lineHeight: 1,
- minHeight: 36,
+ minHeight: 40,
paddingLeft: space( 4 ),
paddingRight: space( 4 ),
},
@@ -147,7 +147,7 @@ export const getSizeConfig = ( {
},
};
- if ( ! __next36pxDefaultSize ) {
+ if ( ! __next40pxDefaultSize ) {
sizes.default = {
height: 30,
lineHeight: 1,
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index f93fe9f0915284..1ca2860442bd95 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
*/
import BaseInputControl from '../';
-const setupUser = () => userEvent.setup();
-
const getInput = () => screen.getByTestId( 'input' );
describe( 'InputControl', () => {
@@ -70,7 +68,7 @@ describe( 'InputControl', () => {
describe( 'Ensurance of focus for number inputs', () => {
it( 'should focus its input on mousedown events', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const spy = jest.fn();
render( <InputControl type="number" onFocus={ spy } /> );
const target = getInput();
@@ -87,7 +85,7 @@ describe( 'InputControl', () => {
describe( 'Value', () => {
it( 'should update value onChange', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const spy = jest.fn();
render(
<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
@@ -102,7 +100,7 @@ describe( 'InputControl', () => {
} );
it( 'should work as a controlled component given normal, falsy or nullish values', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const spy = jest.fn();
const heldKeySet = new Set();
const Example = () => {
@@ -173,7 +171,7 @@ describe( 'InputControl', () => {
} );
it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const spy = jest.fn();
render(
<InputControl
@@ -193,7 +191,7 @@ describe( 'InputControl', () => {
} );
it( 'should commit value when blurred if value is invalid', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const spyChange = jest.fn();
render(
<InputControl
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index dbbc0567b3d158..a804efadd89d38 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -13,7 +13,7 @@ import type { useDrag } from '@use-gesture/react';
* Internal dependencies
*/
import type { StateReducer } from './reducer/state';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { FlexProps } from '../flex/types';
import type { BaseControlProps } from '../base-control/types';
@@ -27,11 +27,18 @@ export type Size = 'default' | 'small' | '__unstable-large';
interface BaseProps {
/**
- * Start opting into the larger default height that will become the default size in a future version.
+ * Deprecated. Use `__next40pxDefaultSize` instead.
*
* @default false
+ * @deprecated
*/
__next36pxDefaultSize?: boolean;
+ /**
+ * Start opting into the larger default height that will become the default size in a future version.
+ *
+ * @default false
+ */
+ __next40pxDefaultSize?: boolean;
__unstableInputWidth?: CSSProperties[ 'width' ];
/**
* If true, the label will only be visible to screen readers.
@@ -66,7 +73,8 @@ export type InputChangeCallback< P = {} > = (
extra: { event: SyntheticEvent } & P
) => void;
-export interface InputFieldProps extends BaseProps {
+export interface InputFieldProps
+ extends Omit< BaseProps, '__next36pxDefaultSize' > {
/**
* Determines the drag axis.
*
diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx
index 34f73c38e2b57a..6bfae11dd4f85f 100644
--- a/packages/components/src/item-group/item-group/component.tsx
+++ b/packages/components/src/item-group/item-group/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { useItemGroup } from './hook';
import { ItemGroupContext, useItemGroupContext } from '../context';
import { View } from '../../view';
diff --git a/packages/components/src/item-group/item-group/hook.ts b/packages/components/src/item-group/item-group/hook.ts
index 77327b91df5a6c..0078e009050fc4 100644
--- a/packages/components/src/item-group/item-group/hook.ts
+++ b/packages/components/src/item-group/item-group/hook.ts
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
/**
* Internal dependencies
diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx
index 9104f5340377bd..f3f11617312a7c 100644
--- a/packages/components/src/item-group/item/component.tsx
+++ b/packages/components/src/item-group/item/component.tsx
@@ -8,8 +8,8 @@ import type { ForwardedRef } from 'react';
*/
import type { ItemProps } from '../types';
import { useItem } from './hook';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
function UnconnectedItem(
diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts
index d1bc632ddb7f3e..188b575e072c87 100644
--- a/packages/components/src/item-group/item/hook.ts
+++ b/packages/components/src/item-group/item/hook.ts
@@ -11,8 +11,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useItemGroupContext } from '../context';
import { useCx } from '../../utils/hooks/use-cx';
diff --git a/packages/components/src/keyboard-shortcuts/README.md b/packages/components/src/keyboard-shortcuts/README.md
index 081e5519582595..9e7d8d51c0cc23 100644
--- a/packages/components/src/keyboard-shortcuts/README.md
+++ b/packages/components/src/keyboard-shortcuts/README.md
@@ -11,8 +11,8 @@ It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyb
Render `<KeyboardShortcuts />` with a `shortcuts` prop object:
```jsx
+import { useState } from 'react';
import { KeyboardShortcuts } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyKeyboardShortcuts = () => {
const [ isAllSelected, setIsAllSelected ] = useState( false );
diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md
index a13d8dbd5eabed..9a0f97e97ac890 100644
--- a/packages/components/src/menu-item/README.md
+++ b/packages/components/src/menu-item/README.md
@@ -5,8 +5,8 @@ MenuItem is a component which renders a button intended to be used in combinatio
## Usage
```jsx
+import { useState } from 'react';
import { MenuItem } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyMenuItem = () => {
const [ isActive, setIsActive ] = useState( true );
@@ -29,7 +29,7 @@ MenuItem supports the following props. Any additional props are passed through t
### `children`
-- Type: `WPElement`
+- Type: `Element`
- Required: No
Element to render as child of button.
@@ -89,7 +89,7 @@ If shortcut is a string, it is expecting the display text. If shortcut is an obj
### `suffix`
-- Type: `WPElement`
+- Type: `Element`
- Required: No
Allows for markup other than icons or shortcuts to be added to the menu item.
diff --git a/packages/components/src/menu-item/index.tsx b/packages/components/src/menu-item/index.tsx
index 2904763cc6c58b..644d5bff2b023e 100644
--- a/packages/components/src/menu-item/index.tsx
+++ b/packages/components/src/menu-item/index.tsx
@@ -15,7 +15,7 @@ import { cloneElement, forwardRef } from '@wordpress/element';
import Shortcut from '../shortcut';
import Button from '../button';
import Icon from '../icon';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { MenuItemProps } from './types';
function UnforwardedMenuItem(
diff --git a/packages/components/src/menu-items-choice/README.md b/packages/components/src/menu-items-choice/README.md
index b5527c3bc33e3a..7aa12bbbb74ff9 100644
--- a/packages/components/src/menu-items-choice/README.md
+++ b/packages/components/src/menu-items-choice/README.md
@@ -54,8 +54,8 @@ Designs with a `MenuItemsChoice` option selected by default make a strong sugges
### Usage
```jsx
+import { useState } from 'react';
import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyMenuItemsChoice = () => {
const [ mode, setMode ] = useState( 'visual' );
diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md b/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
index 1e60bb74ac5347..4953f294d40970 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
@@ -8,13 +8,13 @@ BottomSheetSubSheet allows for adding controls inside the React Native bottom sh
/**
* External dependencies
*/
+import { useState } from 'react';
import { SafeAreaView, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
/**
* WordPress dependencies
*/
-import { useState } from '@wordpress/element';
import { Icon, chevronRight } from '@wordpress/icons';
import { BottomSheet } from '@wordpress/components';
diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js
index 18bdc2caa3ac08..16604bbc4e3eb0 100644
--- a/packages/components/src/mobile/html-text-input/index.native.js
+++ b/packages/components/src/mobile/html-text-input/index.native.js
@@ -81,7 +81,10 @@ export class HTMLTextInput extends Component {
title,
} = this.props;
const titleStyle = [
- styles.htmlViewTitle,
+ getStylesFromColorScheme(
+ styles.htmlViewTitle,
+ styles.htmlViewTitleDark
+ ),
style?.text && { color: style.text },
];
const htmlStyle = [
diff --git a/packages/components/src/mobile/html-text-input/style.scss b/packages/components/src/mobile/html-text-input/style.scss
index 89b81e898ad4bb..47102aca755044 100644
--- a/packages/components/src/mobile/html-text-input/style.scss
+++ b/packages/components/src/mobile/html-text-input/style.scss
@@ -37,3 +37,7 @@ $textColorDark: $white;
.scrollView {
flex: 1;
}
+
+.htmlViewTitleDark {
+ color: $textColorDark;
+}
diff --git a/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap b/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap
index ace4108a9968af..dd3272bef4d715 100644
--- a/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap
+++ b/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap
@@ -14,7 +14,9 @@ exports[`HTMLTextInput HTMLTextInput renders and matches snapshot 1`] = `
placeholderTextColor="white"
style={
[
- undefined,
+ {
+ "color": "white",
+ },
undefined,
]
}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
index 8b233612763814..8dc58008a3600d 100644
--- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
@@ -36,7 +36,7 @@ const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
* @param {Object} props.scrollViewStyle Additional style for the ScrollView component.
* @param {boolean} props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
* @param {Object} props... Other props to pass to the FlatList component.
- * @return {WPComponent} KeyboardAwareFlatList component.
+ * @return {Component} KeyboardAwareFlatList component.
*/
export const KeyboardAwareFlatList = ( {
extraScrollHeight,
diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md
index 01cad7d6ff2e0f..a2165afde9d5ca 100644
--- a/packages/components/src/modal/README.md
+++ b/packages/components/src/modal/README.md
@@ -120,8 +120,8 @@ The modal is used to create an accessible modal over an application.
The following example shows you how to properly implement a modal. For the modal to properly work it's important you implement the close logic for the modal properly.
```jsx
+import { useState } from 'react';
import { Button, Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyModal = () => {
const [ isOpen, setOpen ] = useState( false );
@@ -187,10 +187,16 @@ Titles are required for accessibility reasons, see `aria.labelledby` and `title`
- Required: No
-#### `focusOnMount`: `boolean | 'firstElement'`
+#### `focusOnMount`: `boolean | 'firstElement'` | 'firstContentElement'
If this property is true, it will focus the first tabbable element rendered in the modal.
+If this property is false, focus will not be transferred and it is the responsibility of the consumer to ensure accessible focus management.
+
+If set to `firstElement` focus will be placed on the first tabbable element anywhere within the Modal.
+
+If set to `firstContentElement` focus will be placed on the first tabbable element within the Modal's **content** (i.e. children). Note that it is the responsibility of the consumer to ensure there is at least one tabbable element within the children **or the focus will be lost**.
+
- Required: No
- Default: `true`
@@ -215,6 +221,14 @@ This property when set to `true` will render a full screen modal.
- Required: No
- Default: `false`
+#### `size`: `'small' | 'medium' | 'large' | 'fill'`
+
+If this property is added it will cause the modal to render at a preset width, or expand to fill the screen. This prop will be ignored if `isFullScreen` is set to `true`.
+
+- Required: No
+
+Note: `Modal`'s width can also be controlled by adjusting the width of the modal's contents via CSS.
+
#### `onRequestClose`: ``
This function is called to indicate that the modal should be closed.
diff --git a/packages/components/src/modal/aria-helper.ts b/packages/components/src/modal/aria-helper.ts
index 25ef449a30d3df..6d4427ddea948e 100644
--- a/packages/components/src/modal/aria-helper.ts
+++ b/packages/components/src/modal/aria-helper.ts
@@ -6,8 +6,7 @@ const LIVE_REGION_ARIA_ROLES = new Set( [
'timer',
] );
-let hiddenElements: Element[] = [],
- isHidden = false;
+const hiddenElementsByDepth: Element[][] = [];
/**
* Hides all elements in the body element from screen-readers except
@@ -19,31 +18,28 @@ let hiddenElements: Element[] = [],
* we should consider removing these helper functions in favor of
* `aria-modal="true"`.
*
- * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
+ * @param modalElement The element that should not be hidden.
*/
-export function hideApp( unhiddenElement?: HTMLDivElement ) {
- if ( isHidden ) {
- return;
- }
+export function modalize( modalElement?: HTMLDivElement ) {
const elements = Array.from( document.body.children );
- elements.forEach( ( element ) => {
- if ( element === unhiddenElement ) {
- return;
- }
+ const hiddenElements: Element[] = [];
+ hiddenElementsByDepth.push( hiddenElements );
+ for ( const element of elements ) {
+ if ( element === modalElement ) continue;
+
if ( elementShouldBeHidden( element ) ) {
element.setAttribute( 'aria-hidden', 'true' );
hiddenElements.push( element );
}
- } );
- isHidden = true;
+ }
}
/**
* Determines if the passed element should not be hidden from screen readers.
*
- * @param {HTMLElement} element The element that should be checked.
+ * @param element The element that should be checked.
*
- * @return {boolean} Whether the element should not be hidden from screen-readers.
+ * @return Whether the element should not be hidden from screen-readers.
*/
export function elementShouldBeHidden( element: Element ) {
const role = element.getAttribute( 'role' );
@@ -56,16 +52,12 @@ export function elementShouldBeHidden( element: Element ) {
}
/**
- * Makes all elements in the body that have been hidden by `hideApp`
- * visible again to screen-readers.
+ * Accessibly reveals the elements hidden by the latest modal.
*/
-export function showApp() {
- if ( ! isHidden ) {
- return;
- }
- hiddenElements.forEach( ( element ) => {
+export function unmodalize() {
+ const hiddenElements = hiddenElementsByDepth.pop();
+ if ( ! hiddenElements ) return;
+
+ for ( const element of hiddenElements )
element.removeAttribute( 'aria-hidden' );
- } );
- hiddenElements = [];
- isHidden = false;
}
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index d21a3f9ae3535e..2746c40fcaab02 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -66,16 +66,29 @@ function UnforwardedModal(
contentLabel,
onKeyDown,
isFullScreen = false,
+ size,
headerActions = null,
__experimentalHideHeader = false,
} = props;
const ref = useRef< HTMLDivElement >();
+
const instanceId = useInstanceId( Modal );
const headingId = title
? `components-modal-header-${ instanceId }`
: aria.labelledby;
- const focusOnMountRef = useFocusOnMount( focusOnMount );
+
+ // The focus hook does not support 'firstContentElement' but this is a valid
+ // value for the Modal's focusOnMount prop. The following code ensures the focus
+ // hook will focus the first focusable node within the element to which it is applied.
+ // When `firstContentElement` is passed as the value of the focusOnMount prop,
+ // the focus hook is applied to the Modal's content element.
+ // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
+ // focus hook will focus the first element in the Modal's **content** when
+ // `firstContentElement` is passed.
+ const focusOnMountRef = useFocusOnMount(
+ focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount
+ );
const constrainedTabbingRef = useConstrainedTabbing();
const focusReturnRef = useFocusReturn();
const focusOutsideProps = useFocusOutside( onRequestClose );
@@ -85,6 +98,13 @@ function UnforwardedModal(
const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
const [ hasScrollableContent, setHasScrollableContent ] = useState( false );
+ let sizeClass;
+ if ( isFullScreen || size === 'fill' ) {
+ sizeClass = 'is-full-screen';
+ } else if ( size ) {
+ sizeClass = `has-size-${ size }`;
+ }
+
// Determines whether the Modal content is scrollable and updates the state.
const isContentScrollable = useCallback( () => {
if ( ! contentRef.current ) {
@@ -100,11 +120,15 @@ function UnforwardedModal(
}
}, [ contentRef ] );
+ useEffect( () => {
+ ariaHelper.modalize( ref.current );
+ return () => ariaHelper.unmodalize();
+ }, [] );
+
useEffect( () => {
openModalCount++;
if ( openModalCount === 1 ) {
- ariaHelper.hideApp( ref.current );
document.body.classList.add( bodyOpenClassName );
}
@@ -113,7 +137,6 @@ function UnforwardedModal(
if ( openModalCount === 0 ) {
document.body.classList.remove( bodyOpenClassName );
- ariaHelper.showApp();
}
};
}, [ bodyOpenClassName ] );
@@ -214,16 +237,16 @@ function UnforwardedModal(
<div
className={ classnames(
'components-modal__frame',
- className,
- {
- 'is-full-screen': isFullScreen,
- }
+ sizeClass,
+ className
) }
style={ style }
ref={ useMergeRefs( [
constrainedTabbingRef,
focusReturnRef,
- focusOnMountRef,
+ focusOnMount !== 'firstContentElement'
+ ? focusOnMountRef
+ : null,
] ) }
role={ role }
aria-label={ contentLabel }
@@ -283,7 +306,17 @@ function UnforwardedModal(
) }
</div>
) }
- <div ref={ childrenContainerRef }>{ children }</div>
+
+ <div
+ ref={ useMergeRefs( [
+ childrenContainerRef,
+ focusOnMount === 'firstContentElement'
+ ? focusOnMountRef
+ : null,
+ ] ) }
+ >
+ { children }
+ </div>
</div>
</div>
</StyleProvider>
diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
index 8405a6eb0113e3..60a53947116fac 100644
--- a/packages/components/src/modal/stories/index.story.tsx
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -28,7 +28,8 @@ const meta: Meta< typeof Modal > = {
control: { type: null },
},
focusOnMount: {
- control: { type: 'boolean' },
+ options: [ true, false, 'firstElement', 'firstContentElement' ],
+ control: { type: 'select' },
},
role: {
control: { type: 'text' },
@@ -60,11 +61,7 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
Open Modal
</Button>
{ isOpen && (
- <Modal
- onRequestClose={ closeModal }
- style={ { maxWidth: '600px' } }
- { ...args }
- >
+ <Modal onRequestClose={ closeModal } { ...args }>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et magna
@@ -100,6 +97,12 @@ Default.parameters = {
},
};
+export const WithsizeSmall: StoryFn< typeof Modal > = Template.bind( {} );
+WithsizeSmall.args = {
+ size: 'small',
+};
+WithsizeSmall.storyName = 'With size: small';
+
const LikeButton = () => {
const [ isLiked, setIsLiked ] = useState( false );
return (
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index d4ca7c311fcf19..0933f836892f1d 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -50,6 +50,26 @@
max-width: none;
}
}
+
+ &.has-size-small,
+ &.has-size-medium,
+ &.has-size-large {
+ width: 100%;
+ }
+
+ // The following widths were selected to align with existing baselines
+ // found elsewhere in the editor.
+ // See https://github.com/WordPress/gutenberg/pull/54471#issuecomment-1723818809
+ &.has-size-small {
+ max-width: $modal-width-small;
+ }
+ &.has-size-medium {
+ max-width: $modal-width-medium;
+ }
+ &.has-size-large {
+ max-width: $modal-width-large;
+ }
+
}
@include break-large() {
diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
index d3bd6aea888132..69f28508c14059 100644
--- a/packages/components/src/modal/test/index.tsx
+++ b/packages/components/src/modal/test/index.tsx
@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import Modal from '../';
+import type { ModalProps } from '../types';
const noop = () => {};
@@ -166,8 +167,7 @@ describe( 'Modal', () => {
expect( onRequestClose ).not.toHaveBeenCalled();
} );
- // TODO enable once nested modals hide outer modals.
- it.skip( 'should accessibly hide and show siblings including outer modals', async () => {
+ it( 'should accessibly hide and show siblings including outer modals', async () => {
const user = userEvent.setup();
const AriaDemo = () => {
@@ -236,4 +236,127 @@ describe( 'Modal', () => {
screen.getByText( 'A sweet button', { selector: 'button' } )
).toBeInTheDocument();
} );
+
+ describe( 'Focus handling', () => {
+ let originalGetClientRects: () => DOMRectList;
+
+ const FocusMountDemo = ( {
+ focusOnMount,
+ }: Pick< ModalProps, 'focusOnMount' > ) => {
+ const [ isShown, setIsShown ] = useState( false );
+ return (
+ <>
+ <button onClick={ () => setIsShown( true ) }>
+ Toggle Modal
+ </button>
+ { isShown && (
+ <Modal
+ focusOnMount={ focusOnMount }
+ onRequestClose={ () => setIsShown( false ) }
+ >
+ <p>Modal content</p>
+ <a href="https://wordpress.org">
+ First Focusable Content Element
+ </a>
+
+ <a href="https://wordpress.org">
+ Another Focusable Content Element
+ </a>
+ </Modal>
+ ) }
+ </>
+ );
+ };
+
+ beforeEach( () => {
+ /**
+ * The test environment does not have a layout engine, so we need to mock
+ * the getClientRects method. This ensures that the focusable elements can be
+ * found by the `focusOnMount` logic which depends on layout information
+ * to determine if the element is visible or not.
+ * See https://github.com/WordPress/gutenberg/blob/trunk/packages/dom/src/focusable.js#L55-L61.
+ */
+ // @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+ window.HTMLElement.prototype.getClientRects = function () {
+ return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+ };
+ } );
+
+ afterEach( () => {
+ // Restore original HTMLElement prototype.
+ // See beforeEach for details.
+ window.HTMLElement.prototype.getClientRects =
+ originalGetClientRects;
+ } );
+
+ it( 'should focus the Modal dialog by default when `focusOnMount` prop is not provided', async () => {
+ const user = userEvent.setup();
+
+ render( <FocusMountDemo /> );
+
+ const opener = screen.getByRole( 'button', {
+ name: 'Toggle Modal',
+ } );
+
+ await user.click( opener );
+
+ expect( screen.getByRole( 'dialog' ) ).toHaveFocus();
+ } );
+
+ it( 'should focus the Modal dialog when `true` passed as value for `focusOnMount` prop', async () => {
+ const user = userEvent.setup();
+
+ render( <FocusMountDemo focusOnMount={ true } /> );
+
+ const opener = screen.getByRole( 'button', {
+ name: 'Toggle Modal',
+ } );
+
+ await user.click( opener );
+
+ expect( screen.getByRole( 'dialog' ) ).toHaveFocus();
+ } );
+
+ it( 'should focus the first focusable element in the contents (if found) when `firstContentElement` passed as value for `focusOnMount` prop', async () => {
+ const user = userEvent.setup();
+
+ render( <FocusMountDemo focusOnMount="firstContentElement" /> );
+
+ const opener = screen.getByRole( 'button' );
+
+ await user.click( opener );
+
+ expect(
+ screen.getByText( 'First Focusable Content Element' )
+ ).toHaveFocus();
+ } );
+
+ it( 'should focus the first element anywhere within the Modal when `firstElement` passed as value for `focusOnMount` prop', async () => {
+ const user = userEvent.setup();
+
+ render( <FocusMountDemo focusOnMount="firstElement" /> );
+
+ const opener = screen.getByRole( 'button' );
+
+ await user.click( opener );
+
+ expect(
+ screen.getByRole( 'button', { name: 'Close' } )
+ ).toHaveFocus();
+ } );
+
+ it( 'should not move focus when `false` passed as value for `focusOnMount` prop', async () => {
+ const user = userEvent.setup();
+
+ render( <FocusMountDemo focusOnMount={ false } /> );
+
+ const opener = screen.getByRole( 'button', {
+ name: 'Toggle Modal',
+ } );
+
+ await user.click( opener );
+
+ expect( opener ).toHaveFocus();
+ } );
+ } );
} );
diff --git a/packages/components/src/modal/types.ts b/packages/components/src/modal/types.ts
index 2106a6087e9943..0a422718b1be14 100644
--- a/packages/components/src/modal/types.ts
+++ b/packages/components/src/modal/types.ts
@@ -68,7 +68,9 @@ export type ModalProps = {
*
* @default true
*/
- focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
+ focusOnMount?:
+ | Parameters< typeof useFocusOnMount >[ 0 ]
+ | 'firstContentElement';
/**
* Elements that are injected into the modal header to the left of the close button (if rendered).
* Hidden if `__experimentalHideHeader` is `true`.
@@ -94,6 +96,15 @@ export type ModalProps = {
* @default false
*/
isFullScreen?: boolean;
+ /**
+ * If this property is added it will cause the modal to render at a preset
+ * width, or expand to fill the screen. This prop will be ignored if
+ * `isFullScreen` is set to `true`.
+ *
+ * Note: `Modal`'s width can also be controlled by adjusting the width of the
+ * modal's contents, or via CSS using the `style` prop.
+ */
+ size?: 'small' | 'medium' | 'large' | 'fill';
/**
* Handle the key down on the modal frame `div`.
*/
diff --git a/packages/components/src/navigable-container/types.ts b/packages/components/src/navigable-container/types.ts
index e64ff575069acd..709aee447d3e04 100644
--- a/packages/components/src/navigable-container/types.ts
+++ b/packages/components/src/navigable-container/types.ts
@@ -6,7 +6,7 @@ import type { ForwardedRef, ReactNode } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
type BaseProps = {
/**
diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx
index 7c3ea34f99899d..27c508b98f26dc 100644
--- a/packages/components/src/navigation/styles/navigation-styles.tsx
+++ b/packages/components/src/navigation/styles/navigation-styles.tsx
@@ -16,7 +16,7 @@ import Button from '../../button';
import { Text } from '../../text';
import { Heading } from '../../heading';
import { reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
import SearchControl from '../../search-control';
export const NavigationUI = styled.div`
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index bf005413fdf718..71c5ac14cd00d9 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
import { useNavigatorBackButton } from './hook';
import type { NavigatorBackButtonProps } from '../types';
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index 255a83997d071e..edf55be0f15f5b 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -6,8 +6,8 @@ import { useCallback } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import Button from '../../button';
import useNavigator from '../use-navigator';
import type { NavigatorBackButtonHookProps } from '../types';
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index d591758333aa9f..1b84a2315c04d3 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
import { useNavigatorButton } from './hook';
import type { NavigatorButtonProps } from '../types';
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 9b32c07b293c53..3952dc3fd56ba5 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -7,8 +7,8 @@ import { escapeAttribute } from '@wordpress/escape-html';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import Button from '../../button';
import useNavigator from '../use-navigator';
import type { NavigatorButtonProps } from '../types';
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 2d27605eab15a0..cccbb84f0d093a 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -20,8 +20,8 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import { View } from '../../view';
import { NavigatorContext } from '../context';
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 7a920bd7e2bc5f..ed4ab9629d3a8d 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -26,8 +26,8 @@ import { escapeAttribute } from '@wordpress/escape-html';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import { View } from '../../view';
import { NavigatorContext } from '../context';
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index a717df22c74131..e73a3619f3d494 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { View } from '../../view';
import { useNavigatorBackButton } from '../navigator-back-button/hook';
import type { NavigatorToParentButtonProps } from '../types';
diff --git a/packages/components/src/notice/list.tsx b/packages/components/src/notice/list.tsx
index 6129db8434ee41..5b92b6902a847d 100644
--- a/packages/components/src/notice/list.tsx
+++ b/packages/components/src/notice/list.tsx
@@ -7,7 +7,7 @@ import classnames from 'classnames';
* Internal dependencies
*/
import Notice from '.';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { NoticeListProps } from './types';
const noop = () => {};
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index a70fc500d4134f..fce0a7f76f49ed 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -20,21 +20,25 @@ import { Input, SpinButton, styles } from './styles/number-control-styles';
import * as inputControlActionTypes from '../input-control/reducer/actions';
import { add, subtract, roundClamp } from '../utils/math';
import { ensureNumber, isValueEmpty } from '../utils/values';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
import type { NumberControlProps } from './types';
import { HStack } from '../h-stack';
import { Spacer } from '../spacer';
import { useCx } from '../utils';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
const noop = () => {};
function UnforwardedNumberControl(
- {
+ props: WordPressComponentProps< NumberControlProps, 'input', false >,
+ forwardedRef: ForwardedRef< any >
+) {
+ const {
__unstableStateReducer: stateReducerProp,
className,
dragDirection = 'n',
hideHTMLArrows = false,
- spinControls = 'native',
+ spinControls = hideHTMLArrows ? 'none' : 'native',
isDragEnabled = true,
isShiftStepEnabled = true,
label,
@@ -49,17 +53,19 @@ function UnforwardedNumberControl(
size = 'default',
suffix,
onChange = noop,
- ...props
- }: WordPressComponentProps< NumberControlProps, 'input', false >,
- forwardedRef: ForwardedRef< any >
-) {
+ ...restProps
+ } = useDeprecated36pxDefaultSizeProp< NumberControlProps >(
+ props,
+ 'wp.components.NumberControl',
+ '6.4'
+ );
+
if ( hideHTMLArrows ) {
deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
alternative: 'spinControls="none"',
since: '6.2',
version: '6.3',
} );
- spinControls = 'none';
}
const inputRef = useRef< HTMLInputElement >();
const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
@@ -212,7 +218,7 @@ function UnforwardedNumberControl(
<Input
autoComplete={ autoComplete }
inputMode="numeric"
- { ...props }
+ { ...restProps }
className={ classes }
dragDirection={ dragDirection }
hideHTMLArrows={ spinControls !== 'native' }
diff --git a/packages/components/src/number-control/styles/number-control-styles.ts b/packages/components/src/number-control/styles/number-control-styles.ts
index 6cbb18b565c25d..2fa1be970090bf 100644
--- a/packages/components/src/number-control/styles/number-control-styles.ts
+++ b/packages/components/src/number-control/styles/number-control-styles.ts
@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
import InputControl from '../../input-control';
import { COLORS } from '../../utils';
import Button from '../../button';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
if ( ! hideHTMLArrows ) {
diff --git a/packages/components/src/palette-edit/styles.js b/packages/components/src/palette-edit/styles.js
index 0c72493f465647..4beeb6e7c2213d 100644
--- a/packages/components/src/palette-edit/styles.js
+++ b/packages/components/src/palette-edit/styles.js
@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
import Button from '../button';
import { Heading } from '../heading';
import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { COLORS, CONFIG } from '../utils';
import { View } from '../view';
import InputControl from '../input-control';
diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx
index f5ea844754cddd..46841f428fac19 100644
--- a/packages/components/src/panel/body.tsx
+++ b/packages/components/src/panel/body.tsx
@@ -14,7 +14,7 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
* Internal dependencies
*/
import type { PanelBodyProps, PanelBodyTitleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import Button from '../button';
import Icon from '../icon';
import { useControlledState, useUpdateEffect } from '../utils';
diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts
index 9059aad53fa0a1..6b7ab35a57520a 100644
--- a/packages/components/src/panel/types.ts
+++ b/packages/components/src/panel/types.ts
@@ -2,7 +2,7 @@
* Internal dependencies
*/
import type { ButtonAsButtonProps } from '../button/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export type PanelProps = {
/**
diff --git a/packages/components/src/placeholder/README.md b/packages/components/src/placeholder/README.md
index f260ab15378f0f..a23fcac0e066ef 100644
--- a/packages/components/src/placeholder/README.md
+++ b/packages/components/src/placeholder/README.md
@@ -17,7 +17,7 @@ Class to set on the container div.
- Required: No
-### `icon`: `string|Function|WPComponent|null`
+### `icon`: `string|Function|Component|null`
If provided, renders an icon next to the label.
diff --git a/packages/components/src/placeholder/index.tsx b/packages/components/src/placeholder/index.tsx
index 13634f6710d945..d55741f1f41578 100644
--- a/packages/components/src/placeholder/index.tsx
+++ b/packages/components/src/placeholder/index.tsx
@@ -8,13 +8,15 @@ import classnames from 'classnames';
*/
import { useResizeObserver } from '@wordpress/compose';
import { SVG, Path } from '@wordpress/primitives';
+import { useEffect } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
*/
import Icon from '../icon';
import type { PlaceholderProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
const PlaceholderIllustration = (
<SVG
@@ -72,10 +74,17 @@ export function Placeholder(
modifierClassNames,
withIllustration ? 'has-illustration' : null
);
+
const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
'is-column-layout': isColumnLayout,
} );
+ useEffect( () => {
+ if ( instructions ) {
+ speak( instructions );
+ }
+ }, [ instructions ] );
+
return (
<div { ...additionalProps } className={ classes }>
{ withIllustration ? PlaceholderIllustration : null }
@@ -90,14 +99,12 @@ export function Placeholder(
<Icon icon={ icon } />
{ label }
</div>
- <fieldset className={ fieldsetClasses }>
- { !! instructions && (
- <legend className="components-placeholder__instructions">
- { instructions }
- </legend>
- ) }
- { children }
- </fieldset>
+ { !! instructions && (
+ <div className="components-placeholder__instructions">
+ { instructions }
+ </div>
+ ) }
+ <div className={ fieldsetClasses }>{ children }</div>
</div>
);
}
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 1cb3edfcfdbba7..ce98350b767353 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -72,18 +72,6 @@
}
}
-// Overrides for browser and editor fieldset styles.
-.components-placeholder__fieldset.components-placeholder__fieldset {
- border: none;
- padding: 0;
-
- .components-placeholder__instructions {
- padding: 0;
- font-weight: normal;
- font-size: 1em;
- }
-}
-
.components-placeholder__fieldset.is-column-layout,
.components-placeholder__fieldset.is-column-layout form {
flex-direction: column;
diff --git a/packages/components/src/placeholder/test/index.tsx b/packages/components/src/placeholder/test/index.tsx
index c01de24eb2b055..6d9427af00b4c5 100644
--- a/packages/components/src/placeholder/test/index.tsx
+++ b/packages/components/src/placeholder/test/index.tsx
@@ -8,12 +8,13 @@ import { render, screen, within } from '@testing-library/react';
*/
import { useResizeObserver } from '@wordpress/compose';
import { SVG, Path } from '@wordpress/primitives';
+import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
*/
import BasePlaceholder from '../';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import type { PlaceholderProps } from '../types';
jest.mock( '@wordpress/compose', () => {
@@ -41,6 +42,9 @@ const Placeholder = (
const getPlaceholder = () => screen.getByTestId( 'placeholder' );
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
describe( 'Placeholder', () => {
beforeEach( () => {
// @ts-ignore
@@ -48,10 +52,11 @@ describe( 'Placeholder', () => {
<div key="1" />,
{ width: 320 },
] );
+ mockedSpeak.mockReset();
} );
describe( 'basic rendering', () => {
- it( 'should by default render label section and fieldset.', () => {
+ it( 'should by default render label section and content section.', () => {
render( <Placeholder /> );
const placeholder = getPlaceholder();
@@ -74,9 +79,12 @@ describe( 'Placeholder', () => {
);
expect( placeholderInstructions ).not.toBeInTheDocument();
- // Test for empty fieldset.
- const placeholderFieldset =
- within( placeholder ).getByRole( 'group' );
+ // Test for empty content. When the content is empty,
+ // the only way to query the div is with `querySelector`
+ // eslint-disable-next-line testing-library/no-node-access
+ const placeholderFieldset = placeholder.querySelector(
+ '.components-placeholder__fieldset'
+ );
expect( placeholderFieldset ).toBeInTheDocument();
expect( placeholderFieldset ).toBeEmptyDOMElement();
} );
@@ -104,27 +112,38 @@ describe( 'Placeholder', () => {
expect( placeholderLabel ).toBeInTheDocument();
} );
- it( 'should display a fieldset from the children property', () => {
- const content = 'Fieldset';
+ it( 'should display content from the children property', () => {
+ const content = 'Placeholder content';
render( <Placeholder>{ content }</Placeholder> );
- const placeholderFieldset = screen.getByRole( 'group' );
+ const placeholder = screen.getByText( content );
- expect( placeholderFieldset ).toBeInTheDocument();
- expect( placeholderFieldset ).toHaveTextContent( content );
+ expect( placeholder ).toBeInTheDocument();
+ expect( placeholder ).toHaveTextContent( content );
} );
- it( 'should display a legend if instructions are passed', () => {
+ it( 'should display instructions when provided', () => {
const instructions = 'Choose an option.';
render(
<Placeholder instructions={ instructions }>
- <div>Fieldset</div>
+ <div>Placeholder content</div>
+ </Placeholder>
+ );
+ const placeholder = getPlaceholder();
+ const instructionsContainer =
+ within( placeholder ).getByText( instructions );
+
+ expect( instructionsContainer ).toBeInTheDocument();
+ } );
+
+ it( 'should announce instructions to screen readers', () => {
+ const instructions = 'Awesome block placeholder instructions.';
+ render(
+ <Placeholder instructions={ instructions }>
+ <div>Placeholder content</div>
</Placeholder>
);
- const captionedFieldset = screen.getByRole( 'group', {
- name: instructions,
- } );
- expect( captionedFieldset ).toBeInTheDocument();
+ expect( speak ).toHaveBeenCalledWith( instructions );
} );
it( 'should add an additional className to the top container', () => {
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index 709254672be8b2..32648aa67edf76 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -11,8 +11,8 @@ Render a Popover adjacent to its container.
If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
```jsx
+import { useState } from 'react';
import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyPopover = () => {
const [ isVisible, setIsVisible ] = useState( false );
@@ -32,8 +32,8 @@ const MyPopover = () => {
In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, **the anchor element should be stored in local state** rather than a plain React ref to ensure reactive updating when it changes.
```jsx
+import { useState } from 'react';
import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyPopover = () => {
// Use internal state instead of a ref to make sure that the component
@@ -63,18 +63,17 @@ const MyPopover = () => {
By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
```jsx
-import { render } from '@wordpress/element';
+import { createRoot } from 'react-dom/client';
import { Popover } from '@wordpress/components';
import Content from './Content';
const app = document.getElementById( 'app' );
-
-render(
+const root = createRoot( app );
+root.render(
<div>
<Content />
<Popover.Slot />
- </div>,
- app
+ </div>
);
```
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index bb51252b549c52..19df26e0777ee1 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -53,13 +53,14 @@ import {
placementToMotionAnimationProps,
getReferenceElement,
} from './utils';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type {
PopoverProps,
PopoverAnchorRefReference,
PopoverAnchorRefTopBottom,
} from './types';
import { overlayMiddlewares } from './overlay-middlewares';
+import { StyleProvider } from '../style-provider';
/**
* Name of slot in which popover should fill.
@@ -447,7 +448,10 @@ const UnforwardedPopover = (
if ( shouldRenderWithinSlot ) {
content = <Fill name={ slotName }>{ content }</Fill>;
} else if ( ! inline ) {
- content = createPortal( content, getPopoverFallbackContainer() );
+ content = createPortal(
+ <StyleProvider document={ document }>{ content }</StyleProvider>,
+ getPopoverFallbackContainer()
+ );
}
if ( hasAnchor ) {
@@ -493,7 +497,6 @@ function PopoverSlot(
) {
return (
<Slot
- // @ts-expect-error Need to type `SlotFill`
bubblesVirtually
name={ name }
className="popover-slot"
diff --git a/packages/components/src/popover/test/utils/index.tsx b/packages/components/src/popover/test/utils/index.tsx
index 53af9af21b838a..91fa26d8102437 100644
--- a/packages/components/src/popover/test/utils/index.tsx
+++ b/packages/components/src/popover/test/utils/index.tsx
@@ -8,7 +8,7 @@ import { createPortal, useState } from '@wordpress/element';
*/
import Popover from '../..';
import { Provider as SlotFillProvider } from '../../../slot-fill';
-import type { WordPressComponentProps } from '../../../ui/context';
+import type { WordPressComponentProps } from '../../../context';
const GenericIframe = ( {
children,
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 6e17abde0c627e..38707860e1ce91 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -22,7 +22,7 @@ import {
DropdownSubMenu as DropdownSubMenuV2,
DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
} from './dropdown-menu-v2';
-import { ComponentsContext } from './ui/context/context-system-provider';
+import { ComponentsContext } from './context/context-system-provider';
import Theme from './theme';
export const { lock, unlock } =
diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx
index 16f2630953840a..b5bd9ad46c34d3 100644
--- a/packages/components/src/progress-bar/index.tsx
+++ b/packages/components/src/progress-bar/index.tsx
@@ -14,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
*/
import * as ProgressBarStyled from './styles';
import type { ProgressBarProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
function UnforwardedProgressBar(
props: WordPressComponentProps< ProgressBarProps, 'progress', false >,
diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md
index 6eea31e2af1a07..83cae88952d407 100644
--- a/packages/components/src/query-controls/README.md
+++ b/packages/components/src/query-controls/README.md
@@ -5,8 +5,8 @@
### Usage
```jsx
+import { useState } from 'react';
import { QueryControls } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const QUERY_DEFAULTS = {
category: 1,
diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md
index 28708f6dbb387f..e9be7b3c669da6 100644
--- a/packages/components/src/radio-control/README.md
+++ b/packages/components/src/radio-control/README.md
@@ -58,7 +58,7 @@ Render a user interface to select the user type using radio inputs.
```jsx
import { RadioControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState } from 'react';
const MyRadioControl = () => {
const [ option, setOption ] = useState( 'a' );
@@ -82,7 +82,7 @@ const MyRadioControl = () => {
The component accepts the following props:
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
If this property is added, a help text will be generated using help property as the content.
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index bbc2b2c04ed43b..4a8875bce0a2a3 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -13,7 +13,7 @@ import { useInstanceId } from '@wordpress/compose';
* Internal dependencies
*/
import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { RadioControlProps } from './types';
import { VStack } from '../v-stack';
diff --git a/packages/components/src/radio-group/README.md b/packages/components/src/radio-group/README.md
index 239205ec428f75..c285e1a5d27731 100644
--- a/packages/components/src/radio-group/README.md
+++ b/packages/components/src/radio-group/README.md
@@ -53,11 +53,11 @@ Radio groups that cannot be selected can either be given a disabled state, or be
#### Controlled
```jsx
+import { useState } from 'react';
import {
__experimentalRadio as Radio,
__experimentalRadioGroup as RadioGroup,
} from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyControlledRadioRadioGroup = () => {
const [ checked, setChecked ] = useState( '25' );
@@ -77,11 +77,11 @@ const MyControlledRadioRadioGroup = () => {
When using the RadioGroup component as an uncontrolled component, the default value can be set with the `defaultChecked` prop.
```jsx
+import { useState } from 'react';
import {
__experimentalRadio as Radio,
__experimentalRadioGroup as RadioGroup,
} from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyUncontrolledRadioRadioGroup = () => {
return (
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 2a8f7ae7a05ab1..0dd822200a7bf5 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -90,8 +90,8 @@ RangeControls should provide the full range of choices available for the user to
Render a RangeControl to make a selection from a range of incremental values.
```jsx
+import { useState } from 'react';
import { RangeControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyRangeControl = () => {
const [ columns, setColumns ] = useState( 2 );
@@ -113,7 +113,7 @@ const MyRangeControl = () => {
The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the input elements.
-### `afterIcon`: `string|Function|WPComponent|null`
+### `afterIcon`: `string|Function|Component|null`
If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered after the slider with the icon equal to `afterIcon`.
@@ -130,7 +130,7 @@ If this property is true, a button to reset the slider is rendered.
- Default: `false`
- Platform: Web | Mobile
-### `beforeIcon`: `string|Function|WPComponent|null`
+### `beforeIcon`: `string|Function|Component|null`
If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered before the slider with the icon equal to `beforeIcon`.
@@ -161,7 +161,7 @@ Disables the `input`, preventing new values from being applied.
- Platform: Web
-### `help`: `string|WPElement`
+### `help`: `string|Element`
If this property is added, a help text will be generated using help property as the content.
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index fbf472b66d38fd..05b162a492e849 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -36,8 +36,8 @@ import {
} from './styles/range-control-styles';
import type { RangeControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { space } from '../ui/utils/space';
+import type { WordPressComponentProps } from '../context';
+import { space } from '../utils/space';
const noop = () => {};
diff --git a/packages/components/src/range-control/input-range.tsx b/packages/components/src/range-control/input-range.tsx
index 1daa351444686a..028f08294f3eb4 100644
--- a/packages/components/src/range-control/input-range.tsx
+++ b/packages/components/src/range-control/input-range.tsx
@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
import { InputRange as BaseInputRange } from './styles/range-control-styles';
import type { InputRangeProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
function InputRange(
props: WordPressComponentProps< InputRangeProps, 'input' >,
diff --git a/packages/components/src/range-control/mark.tsx b/packages/components/src/range-control/mark.tsx
index 892a3b3679df1e..856b540b70e1b5 100644
--- a/packages/components/src/range-control/mark.tsx
+++ b/packages/components/src/range-control/mark.tsx
@@ -9,7 +9,7 @@ import classnames from 'classnames';
import { Mark, MarkLabel } from './styles/range-control-styles';
import type { RangeMarkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export default function RangeMark(
props: WordPressComponentProps< RangeMarkProps, 'span' >
diff --git a/packages/components/src/range-control/rail.tsx b/packages/components/src/range-control/rail.tsx
index c284415630906c..a59cc0849246f4 100644
--- a/packages/components/src/range-control/rail.tsx
+++ b/packages/components/src/range-control/rail.tsx
@@ -9,7 +9,7 @@ import { isRTL } from '@wordpress/i18n';
import RangeMark from './mark';
import { MarksWrapper, Rail } from './styles/range-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type {
MarksProps,
RangeMarkProps,
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index 1e4aa96bba03ba..07b744356d4f9b 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
*/
import NumberControl from '../../number-control';
import { COLORS, reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
import type {
RangeMarkProps,
@@ -301,7 +301,7 @@ export const Tooltip = styled.span< TooltipProps >`
`;
// @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack.
+// @see: packages/components/src/h-stack
export const InputNumber = styled( NumberControl )`
display: inline-block;
font-size: 13px;
diff --git a/packages/components/src/range-control/tooltip.tsx b/packages/components/src/range-control/tooltip.tsx
index 3c8403d1275c66..c5428baab52179 100644
--- a/packages/components/src/range-control/tooltip.tsx
+++ b/packages/components/src/range-control/tooltip.tsx
@@ -14,7 +14,7 @@ import { useCallback, useEffect, useState } from '@wordpress/element';
import { Tooltip } from './styles/range-control-styles';
import type { TooltipProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export default function SimpleTooltip(
props: WordPressComponentProps< TooltipProps, 'span' >
diff --git a/packages/components/src/sandbox/README.md b/packages/components/src/sandbox/README.md
index 406b54d3de1bdf..33d78454aaacdf 100644
--- a/packages/components/src/sandbox/README.md
+++ b/packages/components/src/sandbox/README.md
@@ -53,4 +53,10 @@ The `<title>` of the iframe document.
The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
- Required: No
-- Default: ""
\ No newline at end of file
+- Default: ""
+
+### `tabIndex`: `HTMLElement[ 'tabIndex' ]`
+
+The `tabindex` the iframe should receive.
+
+- Required: No
diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index ecd51e1fc26643..66c2c9cd865634 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -130,6 +130,7 @@ function SandBox( {
styles = [],
scripts = [],
onFocus,
+ tabIndex,
}: SandBoxProps ) {
const ref = useRef< HTMLIFrameElement >();
const [ width, setWidth ] = useState( 0 );
@@ -282,6 +283,7 @@ function SandBox( {
<iframe
ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
title={ title }
+ tabIndex={ tabIndex }
className="components-sandbox"
sandbox="allow-scripts allow-same-origin allow-presentation"
onFocus={ onFocus }
diff --git a/packages/components/src/sandbox/types.ts b/packages/components/src/sandbox/types.ts
index 7edc91b938f299..76f98da45c8c63 100644
--- a/packages/components/src/sandbox/types.ts
+++ b/packages/components/src/sandbox/types.ts
@@ -31,4 +31,10 @@ export type SandBoxProps = {
* The `onFocus` callback for the iframe.
*/
onFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];
+ /**
+ * The `tabindex` the iframe should receive.
+ *
+ * @default 0
+ */
+ tabIndex?: HTMLElement[ 'tabIndex' ];
};
diff --git a/packages/components/src/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md
index 33c5948ac0367e..4b8542966c3660 100644
--- a/packages/components/src/scroll-lock/README.md
+++ b/packages/components/src/scroll-lock/README.md
@@ -7,8 +7,8 @@ ScrollLock is a content-free React component for declaratively preventing scroll
Declare scroll locking as part of modal UI.
```jsx
+import { useState } from 'react';
import { ScrollLock, Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyScrollLock = () => {
const [ isScrollLocked, setIsScrollLocked ] = useState( false );
diff --git a/packages/components/src/scrollable/component.tsx b/packages/components/src/scrollable/component.tsx
index 902d315e9deee2..415ea6d4628e19 100644
--- a/packages/components/src/scrollable/component.tsx
+++ b/packages/components/src/scrollable/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useScrollable } from './hook';
import type { ScrollableProps } from './types';
diff --git a/packages/components/src/scrollable/hook.ts b/packages/components/src/scrollable/hook.ts
index 7d8002dc624dd5..1e86370b742ca6 100644
--- a/packages/components/src/scrollable/hook.ts
+++ b/packages/components/src/scrollable/hook.ts
@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
import * as styles from './styles';
import { useCx } from '../utils/hooks/use-cx';
import type { ScrollableProps } from './types';
diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md
index 31c6c21e5222a6..bd12580f3c8780 100644
--- a/packages/components/src/search-control/README.md
+++ b/packages/components/src/search-control/README.md
@@ -15,9 +15,9 @@ SearchControl components let users display a search control.
Render a user interface to input the name of an additional css class.
```jsx
+import { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { SearchControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
function MySearchControl( { className, setState } ) {
const [ searchInput, setSearchInput ] = useState( '' );
@@ -80,7 +80,7 @@ A function that receives the value of the input.
If this property is added, a help text will be generated using help property as the content.
-- Type: `String|WPElement`
+- Type: `String|Element`
- Required: No
### hideLabelFromVision
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index 723d754ba78ea1..a896ca1aa3d8fe 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -16,7 +16,7 @@ import { forwardRef, useRef } from '@wordpress/element';
*/
import Button from '../button';
import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
import type { SearchControlProps } from './types';
import type { ForwardedRef } from 'react';
diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
index d9750721cf42b6..21bd875f699a98 100644
--- a/packages/components/src/search-control/style.scss
+++ b/packages/components/src/search-control/style.scss
@@ -43,6 +43,8 @@
&.is-size-compact input[type="search"].components-search-control__input {
height: $grid-unit-40;
+ padding-left: $grid-unit-10;
+ padding-right: $grid-unit-40;
}
}
@@ -58,6 +60,10 @@
justify-content: center;
width: $icon-size;
+
+ .is-size-compact & {
+ right: $grid-unit-05;
+ }
}
.components-search-control__input-wrapper {
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index dc6e884a5e12be..e113c7cf01620d 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -82,8 +82,8 @@ Use sentences in your menu.
Render a user interface to select the size of an image.
```jsx
+import { useState } from 'react';
import { SelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MySelectControl = () => {
const [ size, setSize ] = useState( '50%' );
@@ -182,7 +182,7 @@ If true, the label will only be visible to screen readers.
If this property is added, a help text will be generated using help property as the content.
-- Type: `String|WPElement`
+- Type: `String|Element`
- Required: No
#### multiple
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 769e2ab4f7ebd9..9c6ce0aba5d27e 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -15,9 +15,10 @@ import { useState, forwardRef } from '@wordpress/element';
import BaseControl from '../base-control';
import InputBase from '../input-control/input-base';
import { Select } from './styles/select-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { SelectControlProps } from './types';
import SelectControlChevronDown from './chevron-down';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
const noop = () => {};
@@ -50,10 +51,14 @@ function UnforwardedSelectControl(
children,
prefix,
suffix,
- __next36pxDefaultSize = false,
+ __next40pxDefaultSize = false,
__nextHasNoMarginBottom = false,
...restProps
- } = props;
+ } = useDeprecated36pxDefaultSizeProp(
+ props,
+ 'wp.components.SelectControl',
+ '6.4'
+ );
const [ isFocused, setIsFocused ] = useState( false );
const id = useUniqueId( idProp );
const helpId = help ? `${ id }__help` : undefined;
@@ -107,11 +112,11 @@ function UnforwardedSelectControl(
}
prefix={ prefix }
labelPosition={ labelPosition }
- __next36pxDefaultSize={ __next36pxDefaultSize }
+ __next40pxDefaultSize={ __next40pxDefaultSize }
>
<Select
{ ...restProps }
- __next36pxDefaultSize={ __next36pxDefaultSize }
+ __next40pxDefaultSize={ __next40pxDefaultSize }
aria-describedby={ helpId }
className="components-select-control__input"
disabled={ disabled }
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index 2374015d747faf..7d0ddb502abd74 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -8,14 +8,14 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import { COLORS, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
import type { SelectControlProps } from '../types';
import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
interface SelectProps
extends Pick<
SelectControlProps,
- '__next36pxDefaultSize' | 'disabled' | 'multiple'
+ '__next40pxDefaultSize' | 'disabled' | 'multiple'
> {
// Using `selectSize` instead of `size` to avoid a type conflict with the
// `size` HTML attribute of the `select` element.
@@ -52,7 +52,7 @@ const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
};
const sizeStyles = ( {
- __next36pxDefaultSize,
+ __next40pxDefaultSize,
multiple,
selectSize = 'default',
}: SelectProps ) => {
@@ -64,8 +64,8 @@ const sizeStyles = ( {
const sizes = {
default: {
- height: 36,
- minHeight: 36,
+ height: 40,
+ minHeight: 40,
paddingTop: 0,
paddingBottom: 0,
},
@@ -83,7 +83,7 @@ const sizeStyles = ( {
},
};
- if ( ! __next36pxDefaultSize ) {
+ if ( ! __next40pxDefaultSize ) {
sizes.default = {
height: 30,
minHeight: 30,
@@ -100,7 +100,7 @@ const sizeStyles = ( {
export const chevronIconSize = 18;
const sizePaddings = ( {
- __next36pxDefaultSize,
+ __next40pxDefaultSize,
multiple,
selectSize = 'default',
}: SelectProps ) => {
@@ -110,7 +110,7 @@ const sizePaddings = ( {
'__unstable-large': 16,
};
- if ( ! __next36pxDefaultSize ) {
+ if ( ! __next40pxDefaultSize ) {
padding.default = 8;
}
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index e61fabf461b068..03e3acbf1f7325 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
*/
import SelectControl from '..';
-const setupUser = () => userEvent.setup();
-
describe( 'SelectControl', () => {
it( 'should not render when no options or children are provided', () => {
render( <SelectControl /> );
@@ -20,7 +18,7 @@ describe( 'SelectControl', () => {
} );
it( 'should not render its children', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const handleChangeMock = jest.fn();
render(
@@ -49,7 +47,7 @@ describe( 'SelectControl', () => {
} );
it( 'should not render its options', async () => {
- const user = setupUser();
+ const user = await userEvent.setup();
const handleChangeMock = jest.fn();
render(
diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts
index a5699bc7f5e04e..b8ec42cc4b72f2 100644
--- a/packages/components/src/select-control/types.ts
+++ b/packages/components/src/select-control/types.ts
@@ -12,6 +12,7 @@ import type { BaseControlProps } from '../base-control/types';
type SelectControlBaseProps = Pick<
InputBaseProps,
| '__next36pxDefaultSize'
+ | '__next40pxDefaultSize'
| 'disabled'
| 'hideLabelFromVision'
| 'label'
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.js b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
similarity index 86%
rename from packages/components/src/slot-fill/bubbles-virtually/fill.js
rename to packages/components/src/slot-fill/bubbles-virtually/fill.tsx
index c86f3d0765fabc..083d7302992dde 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/fill.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
/**
* WordPress dependencies
*/
@@ -9,6 +8,7 @@ import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
*/
import useSlot from './use-slot';
import StyleProvider from '../../style-provider';
+import type { FillComponentProps } from '../types';
function useForceUpdate() {
const [ , setState ] = useState( {} );
@@ -28,7 +28,8 @@ function useForceUpdate() {
};
}
-export default function Fill( { name, children } ) {
+export default function Fill( props: FillComponentProps ) {
+ const { name, children } = props;
const { registerFill, unregisterFill, ...slot } = useSlot( name );
const rerender = useForceUpdate();
const ref = useRef( { rerender } );
@@ -47,17 +48,15 @@ export default function Fill( { name, children } ) {
return null;
}
- if ( typeof children === 'function' ) {
- children = children( slot.fillProps );
- }
-
// When using a `Fill`, the `children` will be rendered in the document of the
// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
// to make sure we're referencing the right document/iframe (instead of the
// context of the `Fill`'s parent).
const wrappedChildren = (
<StyleProvider document={ slot.ref.current.ownerDocument }>
- { children }
+ { typeof children === 'function'
+ ? children( slot.fillProps ?? {} )
+ : children }
</StyleProvider>
);
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts
similarity index 74%
rename from packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
rename to packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts
index e3c6652f22e94e..7c0ef340e53fe8 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
/**
* External dependencies
*/
@@ -8,8 +7,12 @@ import { proxyMap } from 'valtio/utils';
*/
import { createContext } from '@wordpress/element';
import warning from '@wordpress/warning';
+/**
+ * Internal dependencies
+ */
+import type { SlotFillBubblesVirtuallyContext } from '../types';
-const SlotFillContext = createContext( {
+const initialContextValue: SlotFillBubblesVirtuallyContext = {
slots: proxyMap(),
fills: proxyMap(),
registerSlot: () => {
@@ -25,6 +28,8 @@ const SlotFillContext = createContext( {
// This helps the provider know if it's using the default context value or not.
isDefault: true,
-} );
+};
+
+const SlotFillContext = createContext( initialContextValue );
export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js
deleted file mode 100644
index 9a00a90a7c8354..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js
+++ /dev/null
@@ -1,95 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { ref as valRef } from 'valtio';
-import { proxyMap } from 'valtio/utils';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './slot-fill-context';
-
-function createSlotRegistry() {
- const slots = proxyMap();
- const fills = proxyMap();
-
- function registerSlot( name, ref, fillProps ) {
- const slot = slots.get( name ) || {};
- slots.set(
- name,
- valRef( {
- ...slot,
- ref: ref || slot.ref,
- fillProps: fillProps || slot.fillProps || {},
- } )
- );
- }
-
- function unregisterSlot( name, ref ) {
- // Make sure we're not unregistering a slot registered by another element
- // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
- if ( slots.get( name )?.ref === ref ) {
- slots.delete( name );
- }
- }
-
- function updateSlot( name, fillProps ) {
- const slot = slots.get( name );
- if ( ! slot ) {
- return;
- }
-
- if ( isShallowEqual( slot.fillProps, fillProps ) ) {
- return;
- }
-
- slot.fillProps = fillProps;
- const slotFills = fills.get( name );
- if ( slotFills ) {
- // Force update fills.
- slotFills.map( ( fill ) => fill.current.rerender() );
- }
- }
-
- function registerFill( name, ref ) {
- fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
- }
-
- function unregisterFill( name, ref ) {
- const fillsForName = fills.get( name );
- if ( ! fillsForName ) {
- return;
- }
-
- fills.set(
- name,
- valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
- );
- }
-
- return {
- slots,
- fills,
- registerSlot,
- updateSlot,
- unregisterSlot,
- registerFill,
- unregisterFill,
- };
-}
-
-export default function SlotFillProvider( { children } ) {
- const [ registry ] = useState( createSlotRegistry );
- return (
- <SlotFillContext.Provider value={ registry }>
- { children }
- </SlotFillContext.Provider>
- );
-}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
new file mode 100644
index 00000000000000..f98ac36c4a2bd8
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { ref as valRef } from 'valtio';
+import { proxyMap } from 'valtio/utils';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+import type {
+ SlotFillProviderProps,
+ SlotFillBubblesVirtuallyContext,
+} from '../types';
+
+function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
+ const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = proxyMap();
+ const fills: SlotFillBubblesVirtuallyContext[ 'fills' ] = proxyMap();
+
+ const registerSlot: SlotFillBubblesVirtuallyContext[ 'registerSlot' ] = (
+ name,
+ ref,
+ fillProps
+ ) => {
+ const slot = slots.get( name );
+
+ slots.set(
+ name,
+ valRef( {
+ ...slot,
+ ref: ref || slot?.ref,
+ fillProps: fillProps || slot?.fillProps || {},
+ } )
+ );
+ };
+
+ const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
+ ( name, ref ) => {
+ // Make sure we're not unregistering a slot registered by another element
+ // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
+ if ( slots.get( name )?.ref === ref ) {
+ slots.delete( name );
+ }
+ };
+
+ const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
+ name,
+ fillProps
+ ) => {
+ const slot = slots.get( name );
+ if ( ! slot ) {
+ return;
+ }
+
+ if ( isShallowEqual( slot.fillProps, fillProps ) ) {
+ return;
+ }
+
+ slot.fillProps = fillProps;
+ const slotFills = fills.get( name );
+ if ( slotFills ) {
+ // Force update fills.
+ slotFills.map( ( fill ) => fill.current.rerender() );
+ }
+ };
+
+ const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
+ name,
+ ref
+ ) => {
+ fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
+ };
+
+ const unregisterFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
+ name,
+ ref
+ ) => {
+ const fillsForName = fills.get( name );
+ if ( ! fillsForName ) {
+ return;
+ }
+
+ fills.set(
+ name,
+ valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
+ );
+ };
+
+ return {
+ slots,
+ fills,
+ registerSlot,
+ updateSlot,
+ unregisterSlot,
+ registerFill,
+ unregisterFill,
+ };
+}
+
+export default function SlotFillProvider( {
+ children,
+}: SlotFillProviderProps ) {
+ const registry = useMemo( createSlotRegistry, [] );
+ return (
+ <SlotFillContext.Provider value={ registry }>
+ { children }
+ </SlotFillContext.Provider>
+ );
+}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx
similarity index 78%
rename from packages/components/src/slot-fill/bubbles-virtually/slot.js
rename to packages/components/src/slot-fill/bubbles-virtually/slot.tsx
index be6fde0c8e6b7b..e836782c906154 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/slot.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx
@@ -1,4 +1,8 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
/**
* WordPress dependencies
*/
@@ -15,21 +19,30 @@ import { useMergeRefs } from '@wordpress/compose';
*/
import { View } from '../../view';
import SlotFillContext from './slot-fill-context';
+import type { WordPressComponentProps } from '../../context';
+import type { SlotComponentProps } from '../types';
-function Slot( props, forwardedRef ) {
+function Slot(
+ props: WordPressComponentProps<
+ Omit< SlotComponentProps, 'bubblesVirtually' >,
+ 'div'
+ >,
+ forwardedRef: ForwardedRef< any >
+) {
const {
name,
fillProps = {},
as,
// `children` is not allowed. However, if it is passed,
// it will be displayed as is, so remove `children`.
+ // @ts-ignore
children,
...restProps
} = props;
const { registerSlot, unregisterSlot, ...registry } =
useContext( SlotFillContext );
- const ref = useRef();
+ const ref = useRef< HTMLElement >( null );
useLayoutEffect( () => {
registerSlot( name, ref, fillProps );
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts
similarity index 84%
rename from packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js
rename to packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts
index 29e4380ed3d43d..599f0bc5667711 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
/**
* External dependencies
*/
@@ -13,8 +12,9 @@ import { useContext } from '@wordpress/element';
* Internal dependencies
*/
import SlotFillContext from './slot-fill-context';
+import type { SlotKey } from '../types';
-export default function useSlotFills( name ) {
+export default function useSlotFills( name: SlotKey ) {
const registry = useContext( SlotFillContext );
const fills = useSnapshot( registry.fills, { sync: true } );
// The important bit here is that this call ensures that the hook
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot.js b/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
similarity index 54%
rename from packages/components/src/slot-fill/bubbles-virtually/use-slot.js
rename to packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
index 20b00c2cdf2649..c039a36946991f 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/use-slot.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
/**
* External dependencies
*/
@@ -13,8 +12,14 @@ import { useMemo, useContext } from '@wordpress/element';
* Internal dependencies
*/
import SlotFillContext from './slot-fill-context';
+import type {
+ SlotFillBubblesVirtuallyFillRef,
+ SlotFillBubblesVirtuallySlotRef,
+ FillProps,
+ SlotKey,
+} from '../types';
-export default function useSlot( name ) {
+export default function useSlot( name: SlotKey ) {
const registry = useContext( SlotFillContext );
const slots = useSnapshot( registry.slots, { sync: true } );
// The important bit here is that the `useSnapshot` call ensures that the
@@ -24,10 +29,14 @@ export default function useSlot( name ) {
const api = useMemo(
() => ( {
- updateSlot: ( fillProps ) => registry.updateSlot( name, fillProps ),
- unregisterSlot: ( ref ) => registry.unregisterSlot( name, ref ),
- registerFill: ( ref ) => registry.registerFill( name, ref ),
- unregisterFill: ( ref ) => registry.unregisterFill( name, ref ),
+ updateSlot: ( fillProps: FillProps ) =>
+ registry.updateSlot( name, fillProps ),
+ unregisterSlot: ( ref: SlotFillBubblesVirtuallySlotRef ) =>
+ registry.unregisterSlot( name, ref ),
+ registerFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
+ registry.registerFill( name, ref ),
+ unregisterFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
+ registry.unregisterFill( name, ref ),
} ),
[ name, registry ]
);
diff --git a/packages/components/src/slot-fill/context.js b/packages/components/src/slot-fill/context.js
deleted file mode 100644
index 0f7961a8ffd3b6..00000000000000
--- a/packages/components/src/slot-fill/context.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-export const SlotFillContext = createContext( {
- registerSlot: () => {},
- unregisterSlot: () => {},
- registerFill: () => {},
- unregisterFill: () => {},
- getSlot: () => {},
- getFills: () => {},
- subscribe: () => {},
-} );
-
-export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/context.ts b/packages/components/src/slot-fill/context.ts
new file mode 100644
index 00000000000000..c4839462fbce0c
--- /dev/null
+++ b/packages/components/src/slot-fill/context.ts
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { BaseSlotFillContext } from './types';
+
+const initialValue: BaseSlotFillContext = {
+ registerSlot: () => {},
+ unregisterSlot: () => {},
+ registerFill: () => {},
+ unregisterFill: () => {},
+ getSlot: () => undefined,
+ getFills: () => [],
+ subscribe: () => () => {},
+};
+export const SlotFillContext = createContext( initialValue );
+
+export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/fill.js b/packages/components/src/slot-fill/fill.ts
similarity index 93%
rename from packages/components/src/slot-fill/fill.js
rename to packages/components/src/slot-fill/fill.ts
index e7ff943df07bff..6aefacc4ff6f18 100644
--- a/packages/components/src/slot-fill/fill.js
+++ b/packages/components/src/slot-fill/fill.ts
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
/**
* WordPress dependencies
*/
@@ -10,8 +8,9 @@ import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
*/
import SlotFillContext from './context';
import useSlot from './use-slot';
+import type { FillComponentProps } from './types';
-export default function Fill( { name, children } ) {
+export default function Fill( { name, children }: FillComponentProps ) {
const { registerFill, unregisterFill } = useContext( SlotFillContext );
const slot = useSlot( name );
diff --git a/packages/components/src/slot-fill/index.js b/packages/components/src/slot-fill/index.tsx
similarity index 58%
rename from packages/components/src/slot-fill/index.js
rename to packages/components/src/slot-fill/index.tsx
index 34216fd347c053..fb1a08bc2207f9 100644
--- a/packages/components/src/slot-fill/index.js
+++ b/packages/components/src/slot-fill/index.tsx
@@ -1,4 +1,8 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
/**
* WordPress dependencies
*/
@@ -14,10 +18,19 @@ import BubblesVirtuallySlot from './bubbles-virtually/slot';
import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
import SlotFillProvider from './provider';
import SlotFillContext from './bubbles-virtually/slot-fill-context';
+import type { WordPressComponentProps } from '../context';
+
export { default as useSlot } from './bubbles-virtually/use-slot';
export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
+import type {
+ DistributiveOmit,
+ FillComponentProps,
+ SlotComponentProps,
+ SlotFillProviderProps,
+ SlotKey,
+} from './types';
-export function Fill( props ) {
+export function Fill( props: FillComponentProps ) {
// We're adding both Fills here so they can register themselves before
// their respective slot has been registered. Only the Fill that has a slot
// will render. The other one will return null.
@@ -28,20 +41,27 @@ export function Fill( props ) {
</>
);
}
-export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
+
+export function UnforwardedSlot(
+ props: SlotComponentProps &
+ Omit< WordPressComponentProps< {}, 'div' >, 'className' >,
+ ref: ForwardedRef< any >
+) {
+ const { bubblesVirtually, ...restProps } = props;
if ( bubblesVirtually ) {
- return <BubblesVirtuallySlot { ...props } ref={ ref } />;
+ return <BubblesVirtuallySlot { ...restProps } ref={ ref } />;
}
- return <BaseSlot { ...props } />;
-} );
+ return <BaseSlot { ...restProps } />;
+}
+export const Slot = forwardRef( UnforwardedSlot );
-export function Provider( { children, ...props } ) {
+export function Provider( { children }: SlotFillProviderProps ) {
const parent = useContext( SlotFillContext );
if ( ! parent.isDefault ) {
- return children;
+ return <>{ children }</>;
}
return (
- <SlotFillProvider { ...props }>
+ <SlotFillProvider>
<BubblesVirtuallySlotFillProvider>
{ children }
</BubblesVirtuallySlotFillProvider>
@@ -49,12 +69,16 @@ export function Provider( { children, ...props } ) {
);
}
-export function createSlotFill( key ) {
+export function createSlotFill( key: SlotKey ) {
const baseName = typeof key === 'symbol' ? key.description : key;
- const FillComponent = ( props ) => <Fill name={ key } { ...props } />;
+ const FillComponent = ( props: Omit< FillComponentProps, 'name' > ) => (
+ <Fill name={ key } { ...props } />
+ );
FillComponent.displayName = `${ baseName }Fill`;
- const SlotComponent = ( props ) => <Slot name={ key } { ...props } />;
+ const SlotComponent = (
+ props: DistributiveOmit< SlotComponentProps, 'name' >
+ ) => <Slot name={ key } { ...props } />;
SlotComponent.displayName = `${ baseName }Slot`;
SlotComponent.__unstableName = key;
@@ -64,7 +88,7 @@ export function createSlotFill( key ) {
};
}
-export const createPrivateSlotFill = ( name ) => {
+export const createPrivateSlotFill = ( name: string ) => {
const privateKey = Symbol( name );
const privateSlotFill = createSlotFill( privateKey );
diff --git a/packages/components/src/slot-fill/provider.js b/packages/components/src/slot-fill/provider.js
deleted file mode 100644
index 94c83c3c350111..00000000000000
--- a/packages/components/src/slot-fill/provider.js
+++ /dev/null
@@ -1,119 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './context';
-
-export default class SlotFillProvider extends Component {
- constructor() {
- super( ...arguments );
-
- this.registerSlot = this.registerSlot.bind( this );
- this.registerFill = this.registerFill.bind( this );
- this.unregisterSlot = this.unregisterSlot.bind( this );
- this.unregisterFill = this.unregisterFill.bind( this );
- this.getSlot = this.getSlot.bind( this );
- this.getFills = this.getFills.bind( this );
- this.subscribe = this.subscribe.bind( this );
-
- this.slots = {};
- this.fills = {};
- this.listeners = [];
- this.contextValue = {
- registerSlot: this.registerSlot,
- unregisterSlot: this.unregisterSlot,
- registerFill: this.registerFill,
- unregisterFill: this.unregisterFill,
- getSlot: this.getSlot,
- getFills: this.getFills,
- subscribe: this.subscribe,
- };
- }
-
- registerSlot( name, slot ) {
- const previousSlot = this.slots[ name ];
- this.slots[ name ] = slot;
- this.triggerListeners();
-
- // Sometimes the fills are registered after the initial render of slot
- // But before the registerSlot call, we need to rerender the slot.
- this.forceUpdateSlot( name );
-
- // If a new instance of a slot is being mounted while another with the
- // same name exists, force its update _after_ the new slot has been
- // assigned into the instance, such that its own rendering of children
- // will be empty (the new Slot will subsume all fills for this name).
- if ( previousSlot ) {
- previousSlot.forceUpdate();
- }
- }
-
- registerFill( name, instance ) {
- this.fills[ name ] = [ ...( this.fills[ name ] || [] ), instance ];
- this.forceUpdateSlot( name );
- }
-
- unregisterSlot( name, instance ) {
- // If a previous instance of a Slot by this name unmounts, do nothing,
- // as the slot and its fills should only be removed for the current
- // known instance.
- if ( this.slots[ name ] !== instance ) {
- return;
- }
-
- delete this.slots[ name ];
- this.triggerListeners();
- }
-
- unregisterFill( name, instance ) {
- this.fills[ name ] =
- this.fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
- this.forceUpdateSlot( name );
- }
-
- getSlot( name ) {
- return this.slots[ name ];
- }
-
- getFills( name, slotInstance ) {
- // Fills should only be returned for the current instance of the slot
- // in which they occupy.
- if ( this.slots[ name ] !== slotInstance ) {
- return [];
- }
- return this.fills[ name ];
- }
-
- forceUpdateSlot( name ) {
- const slot = this.getSlot( name );
-
- if ( slot ) {
- slot.forceUpdate();
- }
- }
-
- triggerListeners() {
- this.listeners.forEach( ( listener ) => listener() );
- }
-
- subscribe( listener ) {
- this.listeners.push( listener );
-
- return () => {
- this.listeners = this.listeners.filter( ( l ) => l !== listener );
- };
- }
-
- render() {
- return (
- <SlotFillContext.Provider value={ this.contextValue }>
- { this.props.children }
- </SlotFillContext.Provider>
- );
- }
-}
diff --git a/packages/components/src/slot-fill/provider.tsx b/packages/components/src/slot-fill/provider.tsx
new file mode 100644
index 00000000000000..ea32d7104b4981
--- /dev/null
+++ b/packages/components/src/slot-fill/provider.tsx
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import type { Component } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import type {
+ FillComponentProps,
+ BaseSlotFillContext,
+ BaseSlotComponentProps,
+ SlotFillProviderProps,
+ SlotKey,
+} from './types';
+
+function createSlotRegistry(): BaseSlotFillContext {
+ const slots: Record< SlotKey, Component< BaseSlotComponentProps > > = {};
+ const fills: Record< SlotKey, FillComponentProps[] > = {};
+ let listeners: Array< () => void > = [];
+
+ function registerSlot(
+ name: SlotKey,
+ slot: Component< BaseSlotComponentProps >
+ ) {
+ const previousSlot = slots[ name ];
+ slots[ name ] = slot;
+ triggerListeners();
+
+ // Sometimes the fills are registered after the initial render of slot
+ // But before the registerSlot call, we need to rerender the slot.
+ forceUpdateSlot( name );
+
+ // If a new instance of a slot is being mounted while another with the
+ // same name exists, force its update _after_ the new slot has been
+ // assigned into the instance, such that its own rendering of children
+ // will be empty (the new Slot will subsume all fills for this name).
+ if ( previousSlot ) {
+ previousSlot.forceUpdate();
+ }
+ }
+
+ function registerFill( name: SlotKey, instance: FillComponentProps ) {
+ fills[ name ] = [ ...( fills[ name ] || [] ), instance ];
+ forceUpdateSlot( name );
+ }
+
+ function unregisterSlot(
+ name: SlotKey,
+ instance: Component< BaseSlotComponentProps >
+ ) {
+ // If a previous instance of a Slot by this name unmounts, do nothing,
+ // as the slot and its fills should only be removed for the current
+ // known instance.
+ if ( slots[ name ] !== instance ) {
+ return;
+ }
+
+ delete slots[ name ];
+ triggerListeners();
+ }
+
+ function unregisterFill( name: SlotKey, instance: FillComponentProps ) {
+ fills[ name ] =
+ fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
+ forceUpdateSlot( name );
+ }
+
+ function getSlot(
+ name: SlotKey
+ ): Component< BaseSlotComponentProps > | undefined {
+ return slots[ name ];
+ }
+
+ function getFills(
+ name: SlotKey,
+ slotInstance: Component< BaseSlotComponentProps >
+ ): FillComponentProps[] {
+ // Fills should only be returned for the current instance of the slot
+ // in which they occupy.
+ if ( slots[ name ] !== slotInstance ) {
+ return [];
+ }
+ return fills[ name ];
+ }
+
+ function forceUpdateSlot( name: SlotKey ) {
+ const slot = getSlot( name );
+
+ if ( slot ) {
+ slot.forceUpdate();
+ }
+ }
+
+ function triggerListeners() {
+ listeners.forEach( ( listener ) => listener() );
+ }
+
+ function subscribe( listener: () => void ) {
+ listeners.push( listener );
+
+ return () => {
+ listeners = listeners.filter( ( l ) => l !== listener );
+ };
+ }
+
+ return {
+ registerSlot,
+ unregisterSlot,
+ registerFill,
+ unregisterFill,
+ getSlot,
+ getFills,
+ subscribe,
+ };
+}
+
+export function SlotFillProvider( { children }: SlotFillProviderProps ) {
+ const contextValue = useMemo( createSlotRegistry, [] );
+ return (
+ <SlotFillContext.Provider value={ contextValue }>
+ { children }
+ </SlotFillContext.Provider>
+ );
+}
+
+export default SlotFillProvider;
diff --git a/packages/components/src/slot-fill/slot.js b/packages/components/src/slot-fill/slot.tsx
similarity index 65%
rename from packages/components/src/slot-fill/slot.js
rename to packages/components/src/slot-fill/slot.tsx
index a960647c3ab64e..3fe2a549359260 100644
--- a/packages/components/src/slot-fill/slot.js
+++ b/packages/components/src/slot-fill/slot.tsx
@@ -1,4 +1,8 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+import type { ReactElement, ReactNode, Key } from 'react';
+
/**
* WordPress dependencies
*/
@@ -13,20 +17,23 @@ import {
* Internal dependencies
*/
import SlotFillContext from './context';
+import type { BaseSlotComponentProps, SlotComponentProps } from './types';
/**
* Whether the argument is a function.
*
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
+ * @param maybeFunc The argument to check.
+ * @return True if the argument is a function, false otherwise.
*/
-function isFunction( maybeFunc ) {
+function isFunction( maybeFunc: any ): maybeFunc is Function {
return typeof maybeFunc === 'function';
}
-class SlotComponent extends Component {
- constructor() {
- super( ...arguments );
+class SlotComponent extends Component< BaseSlotComponentProps > {
+ private isUnmounted: boolean;
+
+ constructor( props: BaseSlotComponentProps ) {
+ super( props );
this.isUnmounted = false;
}
@@ -43,11 +50,11 @@ class SlotComponent extends Component {
unregisterSlot( this.props.name, this );
}
- componentDidUpdate( prevProps ) {
+ componentDidUpdate( prevProps: BaseSlotComponentProps ) {
const { name, unregisterSlot, registerSlot } = this.props;
if ( prevProps.name !== name ) {
- unregisterSlot( prevProps.name );
+ unregisterSlot( prevProps.name, this );
registerSlot( name, this );
}
}
@@ -61,20 +68,27 @@ class SlotComponent extends Component {
render() {
const { children, name, fillProps = {}, getFills } = this.props;
-
- const fills = ( getFills( name, this ) ?? [] )
+ const fills: ReactNode[] = ( getFills( name, this ) ?? [] )
.map( ( fill ) => {
const fillChildren = isFunction( fill.children )
? fill.children( fillProps )
: fill.children;
-
return Children.map( fillChildren, ( child, childIndex ) => {
if ( ! child || typeof child === 'string' ) {
return child;
}
+ let childKey: Key = childIndex;
+ if (
+ typeof child === 'object' &&
+ 'key' in child &&
+ child?.key
+ ) {
+ childKey = child.key;
+ }
- const childKey = child.key || childIndex;
- return cloneElement( child, { key: childKey } );
+ return cloneElement( child as ReactElement, {
+ key: childKey,
+ } );
} );
} )
.filter(
@@ -88,7 +102,7 @@ class SlotComponent extends Component {
}
}
-const Slot = ( props ) => (
+const Slot = ( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) => (
<SlotFillContext.Consumer>
{ ( { registerSlot, unregisterSlot, getFills } ) => (
<SlotComponent
diff --git a/packages/components/src/slot-fill/stories/index.story.js b/packages/components/src/slot-fill/stories/index.story.js
deleted file mode 100644
index c1ab26162497e9..00000000000000
--- a/packages/components/src/slot-fill/stories/index.story.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Slot, Fill, Provider as SlotFillProvider } from '../';
-
-export default {
- title: 'Components/SlotFill',
- component: Slot,
- // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
- subcomponents: { Fill, SlotFillProvider },
- parameters: {
- controls: { expanded: true },
- docs: { canvas: { sourceState: 'shown' } },
- },
-};
-
-export const _default = () => {
- return (
- <SlotFillProvider>
- <h2>Profile</h2>
- <p>
- Name: <Slot bubblesVirtually as="span" name="name" />
- </p>
- <p>
- Age: <Slot bubblesVirtually as="span" name="age" />
- </p>
- <Fill name="name">Grace</Fill>
- <Fill name="age">33</Fill>
- </SlotFillProvider>
- );
-};
-
-export const WithFillProps = () => {
- return (
- <SlotFillProvider>
- <h2>Profile</h2>
- <p>
- Name:{ ' ' }
- <Slot
- bubblesVirtually
- as="span"
- name="name"
- fillProps={ { name: 'Grace' } }
- />
- </p>
- <p>
- Age:{ ' ' }
- <Slot
- bubblesVirtually
- as="span"
- name="age"
- fillProps={ { age: 33 } }
- />
- </p>
- <Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
- <Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
- </SlotFillProvider>
- );
-};
-
-export const WithContext = () => {
- const Context = createContext();
- const ContextFill = ( { name } ) => {
- const value = useContext( Context );
- return <Fill name={ name }>{ value }</Fill>;
- };
- return (
- <SlotFillProvider>
- <h2>Profile</h2>
- <p>
- Name: <Slot bubblesVirtually as="span" name="name" />
- </p>
- <p>
- Age: <Slot bubblesVirtually as="span" name="age" />
- </p>
- <Context.Provider value="Grace">
- <ContextFill name="name" />
- </Context.Provider>
- <Context.Provider value={ 33 }>
- <ContextFill name="age" />
- </Context.Provider>
- </SlotFillProvider>
- );
-};
diff --git a/packages/components/src/slot-fill/stories/index.story.tsx b/packages/components/src/slot-fill/stories/index.story.tsx
new file mode 100644
index 00000000000000..ee00a12d698954
--- /dev/null
+++ b/packages/components/src/slot-fill/stories/index.story.tsx
@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Slot, Fill, Provider as SlotFillProvider } from '../';
+
+const meta: Meta< typeof Slot > = {
+ component: Slot,
+ title: 'Components/SlotFill',
+ // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+ subcomponents: { Fill, SlotFillProvider },
+ argTypes: {
+ name: { control: { type: null } },
+ as: { control: { type: 'text' } },
+ fillProps: { control: { type: null } },
+ },
+ parameters: {
+ controls: { expanded: true },
+ docs: { source: { state: 'open' } },
+ },
+};
+
+export default meta;
+
+export const Default: StoryFn< typeof Slot > = ( props ) => {
+ return (
+ <SlotFillProvider>
+ <h2>Profile</h2>
+ <p>
+ Name: <Slot { ...props } name="name" />
+ </p>
+ <p>
+ Age: <Slot { ...props } name="age" />
+ </p>
+ <Fill name="name">Grace</Fill>
+ <Fill name="age">33</Fill>
+ </SlotFillProvider>
+ );
+};
+Default.args = {
+ bubblesVirtually: true,
+ as: 'span',
+};
+
+export const WithFillProps: StoryFn< typeof Slot > = ( props ) => {
+ return (
+ <SlotFillProvider>
+ <h2>Profile</h2>
+ <p>
+ Name:{ ' ' }
+ <Slot
+ { ...props }
+ name="name"
+ fillProps={ { name: 'Grace' } }
+ />
+ </p>
+ <p>
+ Age: <Slot { ...props } name="age" fillProps={ { age: 33 } } />
+ </p>
+
+ <Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
+ <Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
+ </SlotFillProvider>
+ );
+};
+WithFillProps.args = {
+ ...Default.args,
+};
+
+export const WithSlotChildren: StoryFn< typeof Slot > = ( props ) => {
+ return (
+ <SlotFillProvider>
+ <h2>Profile</h2>
+ <p>
+ Name:
+ { /* @ts-expect-error Not supported children for `<Slot />` when `bubblesVirtually` is true. */ }
+ <Slot { ...props } name="name">
+ { ( fills ) => {
+ return (
+ <span style={ { color: 'red' } }>{ fills }</span>
+ );
+ } }
+ </Slot>
+ </p>
+ <p>
+ Age:
+ { /* @ts-expect-error Not support children for `<Slot />` when `bubblesVirtually` is true. */ }
+ <Slot { ...props } name="age">
+ { ( fills ) => {
+ return (
+ <span style={ { color: 'red' } }>{ fills }</span>
+ );
+ } }
+ </Slot>
+ </p>
+ <Fill name="name">Alice</Fill>
+ <Fill name="age">18</Fill>
+ </SlotFillProvider>
+ );
+};
+WithSlotChildren.args = {
+ ...Default.args,
+};
+
+export const WithContext: StoryFn< typeof Slot > = ( props ) => {
+ const Context = createContext< string | number >( '' );
+ const ContextFill = ( { name }: { name: string } ) => {
+ const value = useContext( Context );
+ return <Fill name={ name }>{ value }</Fill>;
+ };
+ return (
+ <SlotFillProvider>
+ <h2>Profile</h2>
+ <p>
+ Name: <Slot { ...props } name="name" />
+ </p>
+ <p>
+ Age: <Slot { ...props } name="age" />
+ </p>
+ <Context.Provider value="Grace">
+ <ContextFill name="name" />
+ </Context.Provider>
+ <Context.Provider value={ 33 }>
+ <ContextFill name="age" />
+ </Context.Provider>
+ </SlotFillProvider>
+ );
+};
+WithContext.args = {
+ ...Default.args,
+};
diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts
new file mode 100644
index 00000000000000..763fa799c8d860
--- /dev/null
+++ b/packages/components/src/slot-fill/types.ts
@@ -0,0 +1,155 @@
+/**
+ * External dependencies
+ */
+import type { Component, MutableRefObject, ReactNode, RefObject } from 'react';
+
+export type DistributiveOmit< T, K extends keyof any > = T extends any
+ ? Omit< T, K >
+ : never;
+
+export type SlotKey = string | symbol;
+
+export type FillProps = Record< string, any >;
+
+type SlotPropBase = {
+ /**
+ * Slot name.
+ */
+ name: SlotKey;
+
+ /**
+ * props to pass from `Slot` to `Fill`.
+ *
+ * @default {}
+ */
+ fillProps?: FillProps;
+};
+
+export type SlotComponentProps =
+ | ( SlotPropBase & {
+ /**
+ * By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).
+ * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,
+ * also accept an optional `className`, `id`, etc. to add to the slot container.
+ */
+ bubblesVirtually: true;
+
+ /**
+ * A function that returns nodes to be rendered.
+ * Not supported when `bubblesVirtually` is true.
+ */
+ children?: never;
+
+ /**
+ * className.
+ * Not supported when `bubblesVirtually` is true.
+ */
+ className?: string;
+ } )
+ | ( SlotPropBase & {
+ /**
+ * By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).
+ * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,
+ * also accept an optional `className`, `id`, etc. to add to the slot container.
+ */
+ bubblesVirtually?: false;
+
+ /**
+ * A function that returns nodes to be rendered.
+ * Not supported when `bubblesVirtually` is true.
+ */
+ children?: ( fills: ReactNode ) => ReactNode;
+
+ /**
+ * className.
+ * Not supported when `bubblesVirtually` is false.
+ */
+ className?: never;
+ } );
+
+export type FillComponentProps = {
+ /**
+ * The name of the slot to fill into.
+ */
+ name: SlotKey;
+
+ /**
+ * Children elements or render function.
+ */
+ children?: ReactNode | ( ( fillProps: FillProps ) => ReactNode );
+};
+
+export type SlotFillProviderProps = {
+ /**
+ * The children elements.
+ */
+ children: ReactNode;
+};
+
+export type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;
+export type SlotFillBubblesVirtuallyFillRef = MutableRefObject< {
+ rerender: () => void;
+} >;
+
+export type SlotFillBubblesVirtuallyContext = {
+ slots: Map<
+ SlotKey,
+ {
+ ref: SlotFillBubblesVirtuallySlotRef;
+ fillProps: FillProps;
+ }
+ >;
+ fills: Map< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;
+ registerSlot: (
+ name: SlotKey,
+ ref: SlotFillBubblesVirtuallySlotRef,
+ fillProps: FillProps
+ ) => void;
+ unregisterSlot: (
+ name: SlotKey,
+ ref: SlotFillBubblesVirtuallySlotRef
+ ) => void;
+ updateSlot: ( name: SlotKey, fillProps: FillProps ) => void;
+ registerFill: (
+ name: SlotKey,
+ ref: SlotFillBubblesVirtuallyFillRef
+ ) => void;
+ unregisterFill: (
+ name: SlotKey,
+ ref: SlotFillBubblesVirtuallyFillRef
+ ) => void;
+
+ /**
+ * This helps the provider know if it's using the default context value or not.
+ */
+ isDefault?: boolean;
+};
+
+export type BaseSlotFillContext = {
+ registerSlot: (
+ name: SlotKey,
+ slot: Component< BaseSlotComponentProps >
+ ) => void;
+ unregisterSlot: (
+ name: SlotKey,
+ slot: Component< BaseSlotComponentProps >
+ ) => void;
+ registerFill: ( name: SlotKey, instance: FillComponentProps ) => void;
+ unregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;
+ getSlot: (
+ name: SlotKey
+ ) => Component< BaseSlotComponentProps > | undefined;
+ getFills: (
+ name: SlotKey,
+ slotInstance: Component< BaseSlotComponentProps >
+ ) => FillComponentProps[];
+ subscribe: ( listener: () => void ) => () => void;
+};
+
+export type BaseSlotComponentProps = Pick<
+ BaseSlotFillContext,
+ 'registerSlot' | 'unregisterSlot' | 'getFills'
+> &
+ Omit< SlotComponentProps, 'bubblesVirtually' > & {
+ children?: ( fills: ReactNode ) => ReactNode;
+ };
diff --git a/packages/components/src/slot-fill/use-slot.js b/packages/components/src/slot-fill/use-slot.ts
similarity index 77%
rename from packages/components/src/slot-fill/use-slot.js
rename to packages/components/src/slot-fill/use-slot.ts
index fce7c651495d5b..4ab419be1ad2bd 100644
--- a/packages/components/src/slot-fill/use-slot.js
+++ b/packages/components/src/slot-fill/use-slot.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
/**
* WordPress dependencies
*/
@@ -8,14 +7,15 @@ import { useContext, useSyncExternalStore } from '@wordpress/element';
* Internal dependencies
*/
import SlotFillContext from './context';
+import type { SlotKey } from './types';
/**
* React hook returning the active slot given a name.
*
- * @param {string} name Slot name.
- * @return {Object} Slot object.
+ * @param name Slot name.
+ * @return Slot object.
*/
-const useSlot = ( name ) => {
+const useSlot = ( name: SlotKey ) => {
const { getSlot, subscribe } = useContext( SlotFillContext );
return useSyncExternalStore(
subscribe,
diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx
index b03828e7b01e95..45f1800bb2249f 100644
--- a/packages/components/src/snackbar/index.tsx
+++ b/packages/components/src/snackbar/index.tsx
@@ -18,7 +18,7 @@ import warning from '@wordpress/warning';
import Button from '../button';
import type { SnackbarProps } from './types';
import type { NoticeAction } from '../notice/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
const NOTICE_TIMEOUT = 10000;
diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
index 631cf48d953a23..e423cf6c3a7f7e 100644
--- a/packages/components/src/snackbar/list.tsx
+++ b/packages/components/src/snackbar/list.tsx
@@ -18,7 +18,7 @@ import {
__unstableAnimatePresence as AnimatePresence,
} from '../animation';
import type { SnackbarListProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
const SNACKBAR_VARIANTS = {
init: {
diff --git a/packages/components/src/spacer/component.tsx b/packages/components/src/spacer/component.tsx
index b4f532a0fd4787..afb4f8675933a5 100644
--- a/packages/components/src/spacer/component.tsx
+++ b/packages/components/src/spacer/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useSpacer } from './hook';
import type { SpacerProps } from './types';
diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts
index e43d45cb31f531..82d36baa5e202f 100644
--- a/packages/components/src/spacer/hook.ts
+++ b/packages/components/src/spacer/hook.ts
@@ -6,9 +6,9 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
-import { space } from '../ui/utils/space';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
+import { space } from '../utils/space';
import { rtl, useCx } from '../utils';
import type { SpacerProps } from './types';
diff --git a/packages/components/src/spacer/types.ts b/packages/components/src/spacer/types.ts
index c50801e2a3492b..52310c4f58bf28 100644
--- a/packages/components/src/spacer/types.ts
+++ b/packages/components/src/spacer/types.ts
@@ -6,7 +6,7 @@ import type { ReactNode } from 'react';
/**
* Internal dependencies
*/
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
export type SpacerProps = {
/**
diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx
index 9eee9dde18ef23..9864819fa3d97f 100644
--- a/packages/components/src/spinner/index.tsx
+++ b/packages/components/src/spinner/index.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
* Internal dependencies
*/
import { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
/**
* WordPress dependencies
diff --git a/packages/components/src/spinner/stories/index.story.tsx b/packages/components/src/spinner/stories/index.story.tsx
index dfd6fb26f25ae9..1062c6406bfb4e 100644
--- a/packages/components/src/spinner/stories/index.story.tsx
+++ b/packages/components/src/spinner/stories/index.story.tsx
@@ -7,7 +7,7 @@ import type { StoryFn, Meta } from '@storybook/react';
* Internal dependencies
*/
import Spinner from '../';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
const meta: Meta< typeof Spinner > = {
title: 'Components/Spinner',
diff --git a/packages/components/src/surface/component.tsx b/packages/components/src/surface/component.tsx
index 5b86494c991f5d..ba0745a40b5044 100644
--- a/packages/components/src/surface/component.tsx
+++ b/packages/components/src/surface/component.tsx
@@ -6,11 +6,11 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import { contextConnect } from '../ui/context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useSurface } from './hook';
import type { SurfaceProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
function UnconnectedSurface(
props: WordPressComponentProps< SurfaceProps, 'div' >,
diff --git a/packages/components/src/surface/hook.ts b/packages/components/src/surface/hook.ts
index 3cad00d4a7f69f..bacc2f2b291348 100644
--- a/packages/components/src/surface/hook.ts
+++ b/packages/components/src/surface/hook.ts
@@ -6,11 +6,11 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import { useContextSystem } from '../ui/context';
+import { useContextSystem } from '../context';
import * as styles from './styles';
import { useCx } from '../utils/hooks/use-cx';
import type { SurfaceProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
export function useSurface(
props: WordPressComponentProps< SurfaceProps, 'div' >
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index 4fff7dc306b023..f4abd1c121b2f9 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
+// eslint-disable-next-line no-restricted-imports
import * as Ariakit from '@ariakit/react';
import classnames from 'classnames';
import type { ForwardedRef } from 'react';
@@ -22,7 +23,7 @@ import { useInstanceId, usePrevious } from '@wordpress/compose';
import Button from '../button';
import type { TabPanelProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
// Separate the actual tab name from the instance ID. This is
// necessary because Ariakit internally uses the element ID when
diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
index 11834ddefbd21e..6dfdb9ab6545da 100644
--- a/packages/components/src/text-control/README.md
+++ b/packages/components/src/text-control/README.md
@@ -60,8 +60,8 @@ Don’t use unclear visual markers to indicate a text field.
Render a user interface to input the name of an additional css class.
```js
+import { useState } from 'react';
import { TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyTextControl = () => {
const [ className, setClassName ] = useState( '' );
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index 34c9028c1cb8bc..31b1462a3b3a43 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element';
* Internal dependencies
*/
import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { TextControlProps } from './types';
function UnforwardedTextControl(
diff --git a/packages/components/src/text/component.js b/packages/components/src/text/component.js
index b729f73bf640e8..f1ce842dae9153 100644
--- a/packages/components/src/text/component.js
+++ b/packages/components/src/text/component.js
@@ -1,13 +1,13 @@
/**
* Internal dependencies
*/
-import { contextConnect } from '../ui/context';
+import { contextConnect } from '../context';
import { View } from '../view';
import useText from './hook';
/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').ForwardedRef<any>} forwardedRef
+ * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
+ * @param {import('react').ForwardedRef<any>} forwardedRef
*/
function Text( props, forwardedRef ) {
const textProps = useText( props );
diff --git a/packages/components/src/text/get-line-height.ts b/packages/components/src/text/get-line-height.ts
index 88bf9d1558e6f5..906bd0eabfab9d 100644
--- a/packages/components/src/text/get-line-height.ts
+++ b/packages/components/src/text/get-line-height.ts
@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
* Internal dependencies
*/
import type { Props } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { CONFIG } from '../utils';
export function getLineHeight(
diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js
index 7a83bc9c336999..5198845c1dae78 100644
--- a/packages/components/src/text/hook.js
+++ b/packages/components/src/text/hook.js
@@ -11,18 +11,18 @@ import { useMemo, Children, cloneElement } from '@wordpress/element';
/**
* Internal dependencies
*/
-import { hasConnectNamespace, useContextSystem } from '../ui/context';
+import { hasConnectNamespace, useContextSystem } from '../context';
import { useTruncate } from '../truncate';
-import { getOptimalTextShade } from '../ui/utils';
+import { getOptimalTextShade } from '../utils/colors';
import * as styles from './styles';
import { createHighlighterText } from './utils';
-import { getFontSize } from '../ui/utils/font-size';
+import { getFontSize } from '../utils/font-size';
import { CONFIG, COLORS } from '../utils';
import { getLineHeight } from './get-line-height';
import { useCx } from '../utils/hooks/use-cx';
/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
+ * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
*/
export default function useText( props ) {
const {
diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
index 7147c887970cdc..5fad5582f4d46e 100644
--- a/packages/components/src/text/test/index.tsx
+++ b/packages/components/src/text/test/index.tsx
@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
/**
* Internal dependencies
*/
-import { getFontSize } from '../../ui/utils/font-size';
+import { getFontSize } from '../../utils/font-size';
import { COLORS } from '../../utils';
import { Text } from '../';
diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts
index 05b1488cd8c6ff..df60f4ee0e2d7b 100644
--- a/packages/components/src/text/types.ts
+++ b/packages/components/src/text/types.ts
@@ -7,6 +7,7 @@ import type { TruncateProps } from '../truncate/types';
* External dependencies
*/
import type { CSSProperties } from 'react';
+import type { FindAllArgs } from 'highlight-words-core';
export type TextSize =
| 'body'
@@ -59,7 +60,7 @@ export interface Props extends TruncateProps {
/**
* Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.
*/
- highlightSanitize?: import('highlight-words-core').FindAllArgs[ 'sanitize' ];
+ highlightSanitize?: FindAllArgs[ 'sanitize' ];
/**
* Sets `Text` to have `display: block`.
*/
diff --git a/packages/components/src/textarea-control/README.md b/packages/components/src/textarea-control/README.md
index 1da2617ef60b5b..2b9a5a1f70e7e7 100644
--- a/packages/components/src/textarea-control/README.md
+++ b/packages/components/src/textarea-control/README.md
@@ -77,8 +77,8 @@ When text input isn’t accepted, an error message can display instructions on h
### Usage
```jsx
+import { useState } from 'react';
import { TextareaControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyTextareaControl = () => {
const [ text, setText ] = useState( '' );
@@ -100,7 +100,7 @@ The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the textarea element.
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
If this property is added, a help text will be generated using help property as the content.
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index 92374d67fd5af9..7c0b0e92762fa6 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import type { ChangeEvent } from 'react';
-
/**
* WordPress dependencies
*/
import { useInstanceId } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -14,33 +10,11 @@ import { useInstanceId } from '@wordpress/compose';
import BaseControl from '../base-control';
import { StyledTextarea } from './styles/textarea-control-styles';
import type { TextareaControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
-/**
- * TextareaControls are TextControls that allow for multiple lines of text, and
- * wrap overflow text onto a new line. They are a fixed height and scroll
- * vertically when the cursor reaches the bottom of the field.
- *
- * ```jsx
- * import { TextareaControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyTextareaControl = () => {
- * const [ text, setText ] = useState( '' );
- *
- * return (
- * <TextareaControl
- * label="Text"
- * help="Enter some text"
- * value={ text }
- * onChange={ ( value ) => setText( value ) }
- * />
- * );
- * };
- * ```
- */
-export function TextareaControl(
- props: WordPressComponentProps< TextareaControlProps, 'textarea', false >
+function UnforwardedTextareaControl(
+ props: WordPressComponentProps< TextareaControlProps, 'textarea', false >,
+ ref: React.ForwardedRef< HTMLTextAreaElement >
) {
const {
__nextHasNoMarginBottom,
@@ -55,7 +29,7 @@ export function TextareaControl(
} = props;
const instanceId = useInstanceId( TextareaControl );
const id = `inspector-textarea-control-${ instanceId }`;
- const onChangeValue = ( event: ChangeEvent< HTMLTextAreaElement > ) =>
+ const onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>
onChange( event.target.value );
return (
@@ -74,10 +48,36 @@ export function TextareaControl(
onChange={ onChangeValue }
aria-describedby={ !! help ? id + '__help' : undefined }
value={ value }
+ ref={ ref }
{ ...additionalProps }
/>
</BaseControl>
);
}
+/**
+ * TextareaControls are TextControls that allow for multiple lines of text, and
+ * wrap overflow text onto a new line. They are a fixed height and scroll
+ * vertically when the cursor reaches the bottom of the field.
+ *
+ * ```jsx
+ * import { TextareaControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTextareaControl = () => {
+ * const [ text, setText ] = useState( '' );
+ *
+ * return (
+ * <TextareaControl
+ * label="Text"
+ * help="Enter some text"
+ * value={ text }
+ * onChange={ ( value ) => setText( value ) }
+ * />
+ * );
+ * };
+ * ```
+ */
+export const TextareaControl = forwardRef( UnforwardedTextareaControl );
+
export default TextareaControl;
diff --git a/packages/components/src/theme/index.tsx b/packages/components/src/theme/index.tsx
index ce1e11246e0d3c..fbb92f59278d1b 100644
--- a/packages/components/src/theme/index.tsx
+++ b/packages/components/src/theme/index.tsx
@@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import type { ThemeProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import { colorVariables, Wrapper } from './styles';
import { generateThemeVariables } from './color-algorithms';
import { useCx } from '../utils';
diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index d22c99a414d165..5e2732fb07416f 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -7,8 +7,8 @@ ToggleControl is used to generate a toggle user interface.
Render a user interface to change fixed background setting.
```jsx
+import { useState } from 'react';
import { ToggleControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyToggleControl = () => {
const [ hasFixedBackground, setHasFixedBackground ] = useState( false );
@@ -47,7 +47,7 @@ If this property is added, a help text will be generated using help property as
For controlled components the `help` prop can also be a function which will return a help text
dynamically depending on the boolean `checked` parameter.
-- Type: `String|WPElement|Function`
+- Type: `String|Element|Function`
- Required: No
### checked
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index f71c807b9d4fca..c991953d53e4bf 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -15,11 +15,11 @@ import { useInstanceId } from '@wordpress/compose';
import { FlexBlock } from '../flex';
import FormToggle from '../form-toggle';
import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
import type { ToggleControlProps } from './types';
import { HStack } from '../h-stack';
import { useCx } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
/**
* ToggleControl is used to generate a toggle user interface.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
index 3682aa3a5f1f6d..8795565692c1c8 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -3,7 +3,7 @@
*/
import type { ForwardedRef } from 'react';
// eslint-disable-next-line no-restricted-imports
-import { Radio } from '@ariakit/react/radio';
+import * as Ariakit from '@ariakit/react';
// eslint-disable-next-line no-restricted-imports
import { motion, useReducedMotion } from 'framer-motion';
@@ -16,8 +16,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
import type {
ToggleGroupControlOptionBaseProps,
WithToolTipProps,
@@ -140,7 +140,7 @@ function ToggleGroupControlOptionBase(
<ButtonContentView>{ children }</ButtonContentView>
</button>
) : (
- <Radio
+ <Ariakit.Radio
render={
<button
{ ...commonProps }
@@ -154,7 +154,7 @@ function ToggleGroupControlOptionBase(
value={ value }
>
<ButtonContentView>{ children }</ButtonContentView>
- </Radio>
+ </Ariakit.Radio>
) }
</WithToolTip>
{ /* Animated backdrop using framer motion's shared layout animation */ }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
index ad25c21a8ae03c..d82700ae21b1f5 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -41,7 +41,7 @@ The value of the `ToggleGroupControlOption`.
- Required: Yes
-### `icon`: `WPComponent`
+### `icon`: `Component`
Icon displayed as the content of the option. Usually one of the icons from the `@wordpress/icons` package, or a custom React `<svg>` icon.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
index 283ef884b77672..ec009d82344c39 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
@@ -11,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import type { ToggleGroupControlOptionIconProps } from '../types';
import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
import Icon from '../../icon';
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index 52d85d08be8f59..e4b9cff4b80330 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -11,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import type { ToggleGroupControlOptionProps } from '../types';
import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
index 7836cfa116a6fa..b3f56bccd07c5f 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -9,7 +9,7 @@ import { forwardRef, useMemo } from '@wordpress/element';
*/
import { View } from '../../view';
import { useControlledValue } from '../../utils';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import ToggleGroupControlContext from '../context';
import { useComputeControlledOrUncontrolledValue } from './utils';
import type {
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
index e83306b91cb7cd..24a40527abdc41 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -3,7 +3,7 @@
*/
import type { ForwardedRef } from 'react';
// eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioStore } from '@ariakit/react/radio';
+import * as Ariakit from '@ariakit/react';
/**
* WordPress dependencies
@@ -15,7 +15,7 @@ import { forwardRef, useMemo } from '@wordpress/element';
* Internal dependencies
*/
import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import ToggleGroupControlContext from '../context';
import { useComputeControlledOrUncontrolledValue } from './utils';
import type {
@@ -61,7 +61,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
}
: undefined;
- const radio = useRadioStore( {
+ const radio = Ariakit.useRadioStore( {
defaultValue,
value,
setValue: wrappedOnChangeProp,
@@ -84,16 +84,16 @@ function UnforwardedToggleGroupControlAsRadioGroup(
return (
<ToggleGroupControlContext.Provider value={ groupContextValue }>
- <RadioGroup
+ <Ariakit.RadioGroup
store={ radio }
aria-label={ label }
- as={ View }
+ render={ <View /> }
{ ...otherProps }
id={ baseId }
ref={ forwardedRef }
>
{ children }
- </RadioGroup>
+ </Ariakit.RadioGroup>
</ToggleGroupControlContext.Provider>
);
}
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index e3ebf3e677b78f..924c5ecb587466 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -15,8 +15,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks';
import BaseControl from '../../base-control';
import type { ToggleGroupControlProps } from '../types';
diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index 35696d80e73eb0..3d77e9cbc8cf6f 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -17,7 +17,7 @@ import ToolbarItem from '../toolbar-item';
import ToolbarContext from '../toolbar-context';
import ToolbarButtonContainer from './toolbar-button-container';
import type { ToolbarButtonProps } from './types';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
function UnforwardedToolbarButton(
{
diff --git a/packages/components/src/toolbar/toolbar-context/index.ts b/packages/components/src/toolbar/toolbar-context/index.ts
index 462c3c83b46a87..87c35c75fc68f1 100644
--- a/packages/components/src/toolbar/toolbar-context/index.ts
+++ b/packages/components/src/toolbar/toolbar-context/index.ts
@@ -1,13 +1,16 @@
/**
* External dependencies
*/
-import type { ToolbarStore } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
/**
* WordPress dependencies
*/
import { createContext } from '@wordpress/element';
-const ToolbarContext = createContext< ToolbarStore | undefined >( undefined );
+const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
+ undefined
+);
export default ToolbarContext;
diff --git a/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx
index faddda8a83101a..040a771d4ce039 100644
--- a/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
import type { ToolbarGroupContainerProps } from './types';
const ToolbarGroupContainer = ( {
diff --git a/packages/components/src/toolbar/toolbar-item/index.tsx b/packages/components/src/toolbar/toolbar-item/index.tsx
index 3bf55aedd8a48a..2c343eb173a27b 100644
--- a/packages/components/src/toolbar/toolbar-item/index.tsx
+++ b/packages/components/src/toolbar/toolbar-item/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { ToolbarItem as BaseToolbarItem } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
import type { ForwardedRef } from 'react';
/**
@@ -48,7 +49,7 @@ function ToolbarItem(
: Component && <Component>{ children }</Component>;
return (
- <BaseToolbarItem
+ <Ariakit.ToolbarItem
{ ...allProps }
store={ accessibleToolbarStore }
render={ render }
diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx
index 2eac5c5e614e3b..b6e83dcf6da2a6 100644
--- a/packages/components/src/toolbar/toolbar/index.tsx
+++ b/packages/components/src/toolbar/toolbar/index.tsx
@@ -16,8 +16,8 @@ import deprecated from '@wordpress/deprecated';
import ToolbarGroup from '../toolbar-group';
import ToolbarContainer from './toolbar-container';
import type { ToolbarProps } from './types';
-import type { WordPressComponentProps } from '../../ui/context';
-import { ContextSystemProvider } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { ContextSystemProvider } from '../../context';
const CONTEXT_SYSTEM_VALUE = {
DropdownMenu: {
diff --git a/packages/components/src/toolbar/toolbar/toolbar-container.tsx b/packages/components/src/toolbar/toolbar/toolbar-container.tsx
index f27b443fdce309..5f64ecb3d20cd0 100644
--- a/packages/components/src/toolbar/toolbar/toolbar-container.tsx
+++ b/packages/components/src/toolbar/toolbar/toolbar-container.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { useToolbarStore, Toolbar } from '@ariakit/react/toolbar';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
import type { ForwardedRef } from 'react';
/**
@@ -15,13 +16,13 @@ import { isRTL } from '@wordpress/i18n';
*/
import ToolbarContext from '../toolbar-context';
import type { ToolbarProps } from './types';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
function UnforwardedToolbarContainer(
{ label, ...props }: WordPressComponentProps< ToolbarProps, 'div', false >,
ref: ForwardedRef< any >
) {
- const toolbarStore = useToolbarStore( {
+ const toolbarStore = Ariakit.useToolbarStore( {
focusLoop: true,
rtl: isRTL(),
} );
@@ -29,7 +30,7 @@ function UnforwardedToolbarContainer(
return (
// This will provide state for `ToolbarButton`'s
<ToolbarContext.Provider value={ toolbarStore }>
- <Toolbar
+ <Ariakit.Toolbar
ref={ ref }
aria-label={ label }
store={ toolbarStore }
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index f3c5d77fe27cc4..1da1003c0462e3 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -14,7 +14,7 @@ import {
} from '../base-control/styles/base-control-styles';
import { LabelWrapper } from '../input-control/styles/input-control-styles';
import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
const toolsPanelGrid = {
columns: ( columns: number ) => css`
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx
index 35f27983c18135..a48ddac3bc34a0 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx
@@ -19,8 +19,8 @@ import MenuItem from '../../menu-item';
import { HStack } from '../../h-stack';
import { Heading } from '../../heading';
import { useToolsPanelHeader } from './hook';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import { ResetLabel } from '../styles';
import type {
ToolsPanelControlsGroupProps,
diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.ts b/packages/components/src/tools-panel/tools-panel-header/hook.ts
index 056258eed5d009..8f5fb0dcdee574 100644
--- a/packages/components/src/tools-panel/tools-panel-header/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-header/hook.ts
@@ -8,8 +8,8 @@ import { useMemo } from '@wordpress/element';
*/
import * as styles from '../styles';
import { useToolsPanelContext } from '../context';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { ToolsPanelHeaderProps } from '../types';
diff --git a/packages/components/src/tools-panel/tools-panel-item/component.tsx b/packages/components/src/tools-panel/tools-panel-item/component.tsx
index fb4d1c4fae295a..a44514824ebef6 100644
--- a/packages/components/src/tools-panel/tools-panel-item/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-item/component.tsx
@@ -8,8 +8,8 @@ import type { ForwardedRef } from 'react';
*/
import { useToolsPanelItem } from './hook';
import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import type { ToolsPanelItemProps } from '../types';
// This wraps controls to be conditionally displayed within a tools panel. It
diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts
index bfd59e5b953aa7..95958ae9f48608 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts
@@ -9,8 +9,8 @@ import { useCallback, useEffect, useMemo } from '@wordpress/element';
*/
import * as styles from '../styles';
import { useToolsPanelContext } from '../context';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type { ToolsPanelItemProps } from '../types';
diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx
index 42028b48f862bf..660a782e810214 100644
--- a/packages/components/src/tools-panel/tools-panel/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel/component.tsx
@@ -10,8 +10,8 @@ import ToolsPanelHeader from '../tools-panel-header';
import { ToolsPanelContext } from '../context';
import { useToolsPanel } from './hook';
import { Grid } from '../../grid';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
import type { ToolsPanelProps } from '../types';
const UnconnectedToolsPanel = (
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 8377376a861a59..8a38a15084b33c 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -13,8 +13,8 @@ import {
* Internal dependencies
*/
import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
import { useCx } from '../../utils/hooks/use-cx';
import type {
ToolsPanelItem,
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index f31a2a4f264d90..9ea7b88a65db03 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import * as Ariakit from '@ariakit/react/tooltip';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
/**
* WordPress dependencies
@@ -73,7 +74,6 @@ function Tooltip( props: TooltipProps ) {
return (
<>
<Ariakit.TooltipAnchor
- onBlur={ tooltipStore.hide }
onClick={ hideOnClick ? tooltipStore.hide : undefined }
store={ tooltipStore }
render={ isOnlyChild ? children : undefined }
diff --git a/packages/components/src/tree-grid/cell.tsx b/packages/components/src/tree-grid/cell.tsx
index f33e8e8d9c6eb1..a9883eb0512266 100644
--- a/packages/components/src/tree-grid/cell.tsx
+++ b/packages/components/src/tree-grid/cell.tsx
@@ -7,7 +7,7 @@ import { forwardRef } from '@wordpress/element';
* Internal dependencies
*/
import TreeGridItem from './item';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { TreeGridCellProps } from './types';
function UnforwardedTreeGridCell(
diff --git a/packages/components/src/tree-grid/index.tsx b/packages/components/src/tree-grid/index.tsx
index 6a258eb9b1e319..6a02f333854941 100644
--- a/packages/components/src/tree-grid/index.tsx
+++ b/packages/components/src/tree-grid/index.tsx
@@ -10,7 +10,7 @@ import { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';
*/
import RovingTabIndexContainer from './roving-tab-index';
import type { TreeGridProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
/**
* Return focusables in a row element, excluding those from other branches
diff --git a/packages/components/src/tree-grid/row.tsx b/packages/components/src/tree-grid/row.tsx
index a4b69cd46e1797..a6ea0624fa6a86 100644
--- a/packages/components/src/tree-grid/row.tsx
+++ b/packages/components/src/tree-grid/row.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import type { TreeGridRowProps } from './types';
function UnforwardedTreeGridRow(
diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md
index 3306dfb0b71316..753e7bd6d052db 100644
--- a/packages/components/src/tree-select/README.md
+++ b/packages/components/src/tree-select/README.md
@@ -7,8 +7,8 @@ TreeSelect component is used to generate select input fields.
Render a user interface to select the parent page in a hierarchy of pages:
```jsx
+import { useState } from 'react';
import { TreeSelect } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const MyTreeSelect = () => {
const [ page, setPage ] = useState( 'p21' );
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index dbb8686df4d29d..6b7b61b7487a23 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -9,6 +9,7 @@ import { decodeEntities } from '@wordpress/html-entities';
*/
import { SelectControl } from '../select-control';
import type { TreeSelectProps, Tree, Truthy } from './types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
function getSelectOptions(
tree: Tree[],
@@ -72,14 +73,20 @@ function getSelectOptions(
* ```
*/
-export function TreeSelect( {
- label,
- noOptionLabel,
- onChange,
- selectedId,
- tree = [],
- ...props
-}: TreeSelectProps ) {
+export function TreeSelect( props: TreeSelectProps ) {
+ const {
+ label,
+ noOptionLabel,
+ onChange,
+ selectedId,
+ tree = [],
+ ...restProps
+ } = useDeprecated36pxDefaultSizeProp(
+ props,
+ 'wp.components.TreeSelect',
+ '6.4'
+ );
+
const options = useMemo( () => {
return [
noOptionLabel && { value: '', label: noOptionLabel },
@@ -91,7 +98,7 @@ export function TreeSelect( {
<SelectControl
{ ...{ label, options, onChange } }
value={ selectedId }
- { ...props }
+ { ...restProps }
/>
);
}
diff --git a/packages/components/src/truncate/component.tsx b/packages/components/src/truncate/component.tsx
index dfe6cd37b3e9a3..4b6c721f92c70c 100644
--- a/packages/components/src/truncate/component.tsx
+++ b/packages/components/src/truncate/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import useTruncate from './hook';
import type { TruncateProps } from './types';
diff --git a/packages/components/src/truncate/hook.ts b/packages/components/src/truncate/hook.ts
index c6afef52c09088..3877e216ba5801 100644
--- a/packages/components/src/truncate/hook.ts
+++ b/packages/components/src/truncate/hook.ts
@@ -11,8 +11,8 @@ import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
import * as styles from './styles';
import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils';
import { useCx } from '../utils/hooks/use-cx';
diff --git a/packages/components/src/ui/README.md b/packages/components/src/ui/README.md
deleted file mode 100644
index 6099fe0032851f..00000000000000
--- a/packages/components/src/ui/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# TODO
-
-We want to get rid of this folder. Don't add anything new here.
-
-What is left of this folder should either be deleted (if unused elsewhere), or be moved into the root `packages/components/src` and `packages/components/src/utils` folders.
\ No newline at end of file
diff --git a/packages/components/src/ui/shortcut/component.tsx b/packages/components/src/ui/shortcut/component.tsx
deleted file mode 100644
index f6131428a2546f..00000000000000
--- a/packages/components/src/ui/shortcut/component.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-
-/**
- * Internal dependencies
- */
-import type { WordPressComponentProps } from '../context';
-import { useContextSystem, contextConnect } from '../context';
-import { View } from '../../view';
-
-export interface ShortcutDescription {
- display: string;
- ariaLabel: string;
-}
-
-export interface Props {
- shortcut?: ShortcutDescription | string;
- className?: string;
-}
-
-function Shortcut(
- props: WordPressComponentProps< Props, 'span' >,
- forwardedRef: ForwardedRef< any >
-): JSX.Element | null {
- const {
- as: asProp = 'span',
- shortcut,
- className,
- ...otherProps
- } = useContextSystem( props, 'Shortcut' );
- if ( ! shortcut ) {
- return null;
- }
-
- let displayText: string;
- let ariaLabel: string | undefined;
-
- if ( typeof shortcut === 'string' ) {
- displayText = shortcut;
- } else {
- displayText = shortcut.display;
- ariaLabel = shortcut.ariaLabel;
- }
-
- return (
- <View
- as={ asProp }
- className={ className }
- aria-label={ ariaLabel }
- ref={ forwardedRef }
- { ...otherProps }
- >
- { displayText }
- </View>
- );
-}
-
-const ConnectedShortcut = contextConnect( Shortcut, 'Shortcut' );
-
-export default ConnectedShortcut;
diff --git a/packages/components/src/ui/shortcut/index.ts b/packages/components/src/ui/shortcut/index.ts
deleted file mode 100644
index 6b107e956edb2f..00000000000000
--- a/packages/components/src/ui/shortcut/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Shortcut } from './component';
-export type { Props as ShortcutProps, ShortcutDescription } from './component';
diff --git a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
deleted file mode 100644
index edd4ed91bc3529..00000000000000
--- a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Shortcut should render a span with the shortcut text 1`] = `
-<span
- class="components-shortcut emotion-0 emotion-1"
- data-wp-c16t="true"
- data-wp-component="Shortcut"
->
- meta + P
-</span>
-`;
-
-exports[`Shortcut should render null when no shortcut is provided 1`] = `<div />`;
diff --git a/packages/components/src/ui/shortcut/test/index.js b/packages/components/src/ui/shortcut/test/index.js
deleted file mode 100644
index 7dc49f7b3f6632..00000000000000
--- a/packages/components/src/ui/shortcut/test/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Shortcut } from '..';
-
-describe( 'Shortcut', () => {
- it( 'should render null when no shortcut is provided', () => {
- const { container } = render( <Shortcut /> );
- expect( container ).toMatchSnapshot();
- } );
-
- it( 'should render a span with the shortcut text', () => {
- const shortcutText = 'meta + P';
- render( <Shortcut shortcut={ shortcutText } /> );
- const shortcut = screen.getByText( shortcutText );
- expect( shortcut ).toMatchSnapshot();
- } );
-
- it( 'should render a span with aria label', () => {
- const shortcutObject = {
- display: 'meta + P',
- ariaLabel: 'print',
- };
- render( <Shortcut shortcut={ shortcutObject } /> );
- const shortcut = screen.getByText( shortcutObject.display );
- expect( shortcut ).toHaveAttribute(
- 'aria-label',
- shortcutObject.ariaLabel
- );
- } );
-} );
diff --git a/packages/components/src/ui/tooltip/README.md b/packages/components/src/ui/tooltip/README.md
deleted file mode 100644
index 424da79828a487..00000000000000
--- a/packages/components/src/ui/tooltip/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Tooltip
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`Tooltip` is a component to render floating help text relative to a node when it receives focus or when the user places the mouse cursor atop it.
-
-## Usage
-
-```jsx
-import { Tooltip, Text } from '@wordpress/components/ui';
-
-function Example() {
- return (
- <Tooltip content="Code is Poetry">
- <Text>WordPress.org</Text>
- </Tooltip>
- );
-}
-```
diff --git a/packages/components/src/ui/tooltip/component.js b/packages/components/src/ui/tooltip/component.js
deleted file mode 100644
index 33106379140ffb..00000000000000
--- a/packages/components/src/ui/tooltip/component.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { TooltipReference, useTooltipState } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, cloneElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { contextConnect, useContextSystem } from '../context';
-import { TooltipContext } from './context';
-import TooltipContent from './content';
-import { TooltipShortcut } from './styles';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>} forwardedRef
- */
-function Tooltip( props, forwardedRef ) {
- const {
- animated = true,
- animationDuration = 160,
- baseId,
- children,
- content,
- focusable = true,
- gutter = 4,
- id,
- modal = true,
- placement,
- visible = false,
- shortcut,
- ...otherProps
- } = useContextSystem( props, 'Tooltip' );
-
- const tooltip = useTooltipState( {
- animated: animated ? animationDuration : undefined,
- baseId: baseId || id,
- gutter,
- placement,
- visible,
- ...otherProps,
- } );
-
- const contextProps = useMemo(
- () => ( {
- tooltip,
- } ),
- [ tooltip ]
- );
-
- return (
- <TooltipContext.Provider value={ contextProps }>
- { content && (
- <TooltipContent unstable_portal={ modal } ref={ forwardedRef }>
- { content }
- { shortcut && <TooltipShortcut shortcut={ shortcut } /> }
- </TooltipContent>
- ) }
- { children && (
- <TooltipReference
- { ...tooltip }
- { ...children.props }
- // @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)
- ref={ children?.ref }
- >
- { ( referenceProps ) => {
- if ( ! focusable ) {
- referenceProps.tabIndex = undefined;
- }
- return cloneElement( children, referenceProps );
- } }
- </TooltipReference>
- ) }
- </TooltipContext.Provider>
- );
-}
-
-/**
- * `Tooltip` is a component that provides context for a user interface element.
- *
- * @example
- * ```jsx
- * import { Tooltip, Text } from `@wordpress/components/ui`;
- *
- * function Example() {
- * return (
- * <Tooltip content="Code is Poetry">
- * <Text>WordPress.org</Text>
- * </Tooltip>
- * )
- * }
- * ```
- */
-const ConnectedTooltip = contextConnect( Tooltip, 'Tooltip' );
-
-export default ConnectedTooltip;
diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js
deleted file mode 100644
index 7bbf21b44aea8a..00000000000000
--- a/packages/components/src/ui/tooltip/content.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { Tooltip as ReakitTooltip } from 'reakit';
-
-/**
- * Internal dependencies
- */
-import { contextConnect, useContextSystem } from '../context';
-import { View } from '../../view';
-import { useTooltipContext } from './context';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks/use-cx';
-
-const { TooltipPopoverView } = styles;
-
-/**
- *
- * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>} forwardedRef
- */
-function TooltipContent( props, forwardedRef ) {
- const { children, className, ...otherProps } = useContextSystem(
- props,
- 'TooltipContent'
- );
- const { tooltip } = useTooltipContext();
- const cx = useCx();
- const classes = cx( styles.TooltipContent, className );
-
- return (
- <ReakitTooltip
- as={ View }
- { ...otherProps }
- { ...tooltip }
- className={ classes }
- ref={ forwardedRef }
- >
- <TooltipPopoverView>{ children }</TooltipPopoverView>
- </ReakitTooltip>
- );
-}
-
-export default contextConnect( TooltipContent, 'TooltipContent' );
diff --git a/packages/components/src/ui/tooltip/context.js b/packages/components/src/ui/tooltip/context.js
deleted file mode 100644
index de7f81f9cdeb04..00000000000000
--- a/packages/components/src/ui/tooltip/context.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>}
- */
-export const TooltipContext = createContext( {} );
-export const useTooltipContext = () => useContext( TooltipContext );
diff --git a/packages/components/src/ui/tooltip/index.js b/packages/components/src/ui/tooltip/index.js
deleted file mode 100644
index 96841fe7ff4ed9..00000000000000
--- a/packages/components/src/ui/tooltip/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Tooltip } from './component';
-export * from './context';
diff --git a/packages/components/src/ui/tooltip/stories/index.story.js b/packages/components/src/ui/tooltip/stories/index.story.js
deleted file mode 100644
index a0032da0d0ab9b..00000000000000
--- a/packages/components/src/ui/tooltip/stories/index.story.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Text } from '../../../text';
-import { Tooltip } from '../index';
-
-export default {
- component: Tooltip,
- title: 'Components (Experimental)/Tooltip',
-};
-
-export const _default = () => {
- return (
- <Tooltip
- content="Tooltip"
- visible
- gutter={ 10 }
- shortcut={ {
- display: 'meta + 1',
- ariaLabel: 'shortcut-aria-label',
- } }
- >
- <Text>Hello</Text>
- </Tooltip>
- );
-};
diff --git a/packages/components/src/ui/tooltip/styles.js b/packages/components/src/ui/tooltip/styles.js
deleted file mode 100644
index fca4875a9d1c17..00000000000000
--- a/packages/components/src/ui/tooltip/styles.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { Shortcut } from '../shortcut';
-import * as ZIndex from '../../utils/z-index';
-import CONFIG from '../../utils/config-values';
-import { space } from '../utils/space';
-import { COLORS } from '../../utils/colors-values';
-
-export const TooltipContent = css`
- z-index: ${ ZIndex.Tooltip };
- box-sizing: border-box;
- opacity: 0;
- outline: none;
- transform-origin: top center;
- transition: opacity ${ CONFIG.transitionDurationFastest } ease;
- font-size: ${ CONFIG.fontSize };
-
- &[data-enter] {
- opacity: 1;
- }
-`;
-
-export const TooltipPopoverView = styled.div`
- background: rgba( 0, 0, 0, 0.8 );
- border-radius: 2px;
- box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );
- color: ${ COLORS.white };
- padding: 4px 8px;
-`;
-
-export const noOutline = css`
- outline: none;
-`;
-
-export const TooltipShortcut = styled( Shortcut )`
- display: inline-block;
- margin-left: ${ space( 1 ) };
-`;
diff --git a/packages/components/src/ui/tooltip/test/__snapshots__/index.js.snap b/packages/components/src/ui/tooltip/test/__snapshots__/index.js.snap
deleted file mode 100644
index 60edeba1681a25..00000000000000
--- a/packages/components/src/ui/tooltip/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
- z-index: 1000002;
- box-sizing: border-box;
- opacity: 0;
- outline: none;
- transform-origin: top center;
- -webkit-transition: opacity 100ms ease;
- transition: opacity 100ms ease;
- font-size: 13px;
-}
-
-.emotion-0[data-enter] {
- opacity: 1;
-}
-
-.emotion-2 {
- background: rgba( 0, 0, 0, 0.8 );
- border-radius: 2px;
- box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );
- color: #fff;
- padding: 4px 8px;
-}
-
-<div
- class="components-tooltip-content emotion-0 emotion-1"
- data-wp-c16t="true"
- data-wp-component="TooltipContent"
- id="base-tooltip"
- role="tooltip"
- style="position: fixed; left: 100%; top: 100%; pointer-events: none;"
->
- <div
- class="emotion-2 emotion-3"
- >
- Code is Poetry
- </div>
-</div>
-`;
diff --git a/packages/components/src/ui/tooltip/test/index.js b/packages/components/src/ui/tooltip/test/index.js
deleted file mode 100644
index b95a866738bd20..00000000000000
--- a/packages/components/src/ui/tooltip/test/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../../../text';
-import { Tooltip } from '../index';
-
-describe( 'props', () => {
- const baseTooltipId = 'base-tooltip';
- const baseTooltipTriggerContent = 'WordPress.org - Base trigger content';
- const byId = ( id ) => ( t ) => t.id === id;
- const VisibleTooltip = () => (
- <Tooltip baseId={ baseTooltipId } content="Code is Poetry" visible>
- <Text>{ baseTooltipTriggerContent }</Text>
- </Tooltip>
- );
-
- test( 'should render correctly', () => {
- render( <VisibleTooltip /> );
- const tooltip = screen.getByRole( 'tooltip' );
- expect( tooltip ).toMatchSnapshot();
- } );
-
- test( 'should render invisible', () => {
- render( <VisibleTooltip /> );
- const invisibleTooltipTriggerContent = 'WordPress.org - Invisible';
- render(
- <Tooltip
- baseId="test-tooltip"
- content="Code is Poetry"
- visible={ false }
- >
- <Text>{ invisibleTooltipTriggerContent }</Text>
- </Tooltip>
- );
- const tooltip = screen.getByRole( 'tooltip' );
- const invisibleTooltipTrigger = screen.getByText(
- invisibleTooltipTriggerContent
- );
- // The base tooltip should render only; invisible tooltip should not render.
- expect( tooltip ).toBeInTheDocument();
- // Assert that the rendered tooltip is indeed the base tooltip.
- expect( tooltip.id ).toBe( baseTooltipId );
- // But the invisible tooltip's trigger still should have rendered.
- expect( invisibleTooltipTrigger ).not.toBeUndefined();
- } );
-
- test( 'should render without children', () => {
- render( <VisibleTooltip /> );
- const childlessTooltipId = 'tooltip-without-children';
- render(
- <Tooltip
- baseId={ childlessTooltipId }
- content="Code is Poetry"
- visible
- />
- );
- const tooltips = screen.getAllByRole( 'tooltip' );
- const childlessTooltip = tooltips.find( byId( childlessTooltipId ) );
- expect( childlessTooltip ).not.toBeUndefined();
- } );
-
- test( 'should not render a tooltip without content', () => {
- render( <VisibleTooltip /> );
- const contentlessTooltipId = 'contentless-tooltip';
- render(
- <Tooltip baseId={ contentlessTooltipId } visible>
- <Text>WordPress.org</Text>
- </Tooltip>
- );
- const tooltip = screen.getByRole( 'tooltip' );
- // Assert only the base tooltip rendered.
- expect( tooltip ).toBeInTheDocument();
- expect( tooltip.id ).toBe( baseTooltipId );
- } );
-} );
diff --git a/packages/components/src/ui/tooltip/types.ts b/packages/components/src/ui/tooltip/types.ts
deleted file mode 100644
index 7c50dca3a29371..00000000000000
--- a/packages/components/src/ui/tooltip/types.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import type { TooltipInitialState, TooltipProps } from 'reakit';
-import type { ReactElement, ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
-import type { PopperProps } from '../utils/types';
-import type { ShortcutProps } from '../shortcut';
-
-export type Props = TooltipInitialState &
- PopperProps &
- Pick< ShortcutProps, 'shortcut' > & {
- /**
- * Determines if `Tooltip` has animations.
- */
- animated?: boolean;
- /**
- * The duration of `Tooltip` animations.
- *
- * @default 160
- */
- animationDuration?: boolean;
- /**
- * ID that will serve as a base for all the items IDs.
- *
- * @see https://reakit.io/docs/tooltip/#usetooltipstate
- */
- baseId?: string;
- /**
- * Content to render within the `Tooltip` floating label.
- */
- content?: ReactElement;
- /**
- * Spacing between the `Tooltip` reference and the floating label.
- *
- * @default 4
- *
- * @see https://reakit.io/docs/tooltip/#usetooltipstate
- */
- gutter?: number;
- /**
- * Whether or not the dialog should be rendered within `Portal`. It's true by default if modal is true.
- *
- * @default true
- *
- * @see https://reakit.io/docs/tooltip/#tooltip
- */
- modal?: boolean;
- /**
- * Whether `Tooltip` is visible.
- *
- * @default false
- *
- * @see https://reakit.io/docs/tooltip/#usetooltipstate
- */
- visible?: boolean;
- children: ReactElement;
- focusable?: boolean;
- };
-
-export type ContentProps = TooltipProps & {
- children: ReactNode;
-};
diff --git a/packages/components/src/ui/utils/colors.js b/packages/components/src/ui/utils/colors.js
deleted file mode 100644
index 32d0d21aef47ec..00000000000000
--- a/packages/components/src/ui/utils/colors.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-
-/** @type {HTMLDivElement} */
-let colorComputationNode;
-
-extend( [ namesPlugin ] );
-
-/**
- * @return {HTMLDivElement | undefined} The HTML element for color computation.
- */
-function getColorComputationNode() {
- if ( typeof document === 'undefined' ) return;
-
- if ( ! colorComputationNode ) {
- // Create a temporary element for style computation.
- const el = document.createElement( 'div' );
- el.setAttribute( 'data-g2-color-computation-node', '' );
- // Inject for window computed style.
- document.body.appendChild( el );
- colorComputationNode = el;
- }
-
- return colorComputationNode;
-}
-
-/**
- * @param {string | unknown} value
- *
- * @return {boolean} Whether the value is a valid color.
- */
-function isColor( value ) {
- if ( typeof value !== 'string' ) return false;
- const test = colord( value );
-
- return test.isValid();
-}
-
-/**
- * Retrieves the computed background color. This is useful for getting the
- * value of a CSS variable color.
- *
- * @param {string | unknown} backgroundColor The background color to compute.
- *
- * @return {string} The computed background color.
- */
-function _getComputedBackgroundColor( backgroundColor ) {
- if ( typeof backgroundColor !== 'string' ) return '';
-
- if ( isColor( backgroundColor ) ) return backgroundColor;
-
- if ( ! backgroundColor.includes( 'var(' ) ) return '';
- if ( typeof document === 'undefined' ) return '';
-
- // Attempts to gracefully handle CSS variables color values.
- const el = getColorComputationNode();
- if ( ! el ) return '';
-
- el.style.background = backgroundColor;
- // Grab the style.
- const computedColor = window?.getComputedStyle( el ).background;
- // Reset.
- el.style.background = '';
-
- return computedColor || '';
-}
-
-const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
-
-/**
- * Get the text shade optimized for readability, based on a background color.
- *
- * @param {string | unknown} backgroundColor The background color.
- *
- * @return {string} The optimized text color (black or white).
- */
-export function getOptimalTextColor( backgroundColor ) {
- const background = getComputedBackgroundColor( backgroundColor );
-
- return colord( background ).isLight() ? '#000000' : '#ffffff';
-}
-
-/**
- * Get the text shade optimized for readability, based on a background color.
- *
- * @param {string | unknown} backgroundColor The background color.
- *
- * @return {string} The optimized text shade (dark or light).
- */
-export function getOptimalTextShade( backgroundColor ) {
- const result = getOptimalTextColor( backgroundColor );
-
- return result === '#000000' ? 'dark' : 'light';
-}
diff --git a/packages/components/src/ui/utils/index.js b/packages/components/src/ui/utils/index.js
deleted file mode 100644
index c6f4adde96a523..00000000000000
--- a/packages/components/src/ui/utils/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { getOptimalTextShade } from './colors';
diff --git a/packages/components/src/ui/utils/test/colors.js b/packages/components/src/ui/utils/test/colors.js
deleted file mode 100644
index eb52b5dbb223bf..00000000000000
--- a/packages/components/src/ui/utils/test/colors.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getOptimalTextColor, getOptimalTextShade } from '../colors';
-
-describe( 'getOptimalTextColor', () => {
- test( 'should be white for dark backgrounds', () => {
- expect( getOptimalTextColor( 'black' ) ).toBe( '#ffffff' );
- expect( getOptimalTextColor( '#000' ) ).toBe( '#ffffff' );
- expect( getOptimalTextColor( '#111' ) ).toBe( '#ffffff' );
- expect( getOptimalTextColor( '#123' ) ).toBe( '#ffffff' );
- expect( getOptimalTextColor( '#555' ) ).toBe( '#ffffff' );
- expect( getOptimalTextColor( '#05f' ) ).toBe( '#ffffff' );
- } );
-
- test( 'should be black for light backgrounds', () => {
- expect( getOptimalTextColor( 'white' ) ).toBe( '#000000' );
- expect( getOptimalTextColor( '#fff' ) ).toBe( '#000000' );
- expect( getOptimalTextColor( '#def' ) ).toBe( '#000000' );
- expect( getOptimalTextColor( '#c3c3c3' ) ).toBe( '#000000' );
- expect( getOptimalTextColor( '#0ff' ) ).toBe( '#000000' );
- } );
-} );
-
-describe( 'getOptimalTextShade', () => {
- test( 'should be "light" for dark backgrounds', () => {
- expect( getOptimalTextShade( 'black' ) ).toBe( 'light' );
- expect( getOptimalTextShade( '#000' ) ).toBe( 'light' );
- expect( getOptimalTextShade( '#111' ) ).toBe( 'light' );
- expect( getOptimalTextShade( '#123' ) ).toBe( 'light' );
- expect( getOptimalTextShade( '#555' ) ).toBe( 'light' );
- expect( getOptimalTextShade( '#05f' ) ).toBe( 'light' );
- } );
-
- test( 'should be "dark" for light backgrounds', () => {
- expect( getOptimalTextShade( 'white' ) ).toBe( 'dark' );
- expect( getOptimalTextShade( '#fff' ) ).toBe( 'dark' );
- expect( getOptimalTextShade( '#def' ) ).toBe( 'dark' );
- expect( getOptimalTextShade( '#c3c3c3' ) ).toBe( 'dark' );
- expect( getOptimalTextShade( '#0ff' ) ).toBe( 'dark' );
- } );
-} );
diff --git a/packages/components/src/ui/utils/types.ts b/packages/components/src/ui/utils/types.ts
deleted file mode 100644
index 538413204f7814..00000000000000
--- a/packages/components/src/ui/utils/types.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export type ResponsiveCSSValue< T > = Array< T | undefined > | T;
-
-export type PopperPlacement =
- | 'auto'
- | 'auto-start'
- | 'auto-end'
- | 'top'
- | 'top-start'
- | 'top-end'
- | 'right'
- | 'right-start'
- | 'right-end'
- | 'bottom'
- | 'bottom-start'
- | 'bottom-end'
- | 'left'
- | 'left-start'
- | 'left-end';
-
-export type PopperProps = {
- /**
- * Position of the popover element.
- *
- * @default 'auto'
- *
- * @see https://popper.js.org/docs/v1/#popperplacements--codeenumcode
- */
- placement?: PopperPlacement;
-};
-
-export type SizeRangeDefault =
- | 'xLarge'
- | 'large'
- | 'medium'
- | 'small'
- | 'xSmall';
diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index 8fab32611f3bf6..b3c0496f86b800 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -9,8 +9,8 @@ This feature is still experimental. “Experimental” means this is an early im
## Usage
```jsx
+import { useState } from 'react';
import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ value, setValue ] = useState( '10px' );
@@ -115,8 +115,8 @@ Collection of available units.
Example:
```jsx
+import { useState } from 'react';
import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
const Example = () => {
const [ value, setValue ] = useState( '10px' );
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index ed57f4cc703fe6..cc657f5fd67f40 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import { ValueInput } from './styles/unit-control-styles';
import UnitSelectControl from './unit-select-control';
import {
@@ -26,6 +26,7 @@ import {
import { useControlledState } from '../utils/hooks';
import { escapeRegExp } from '../utils/strings';
import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
function UnforwardedUnitControl(
unitControlProps: WordPressComponentProps<
@@ -55,7 +56,11 @@ function UnforwardedUnitControl(
value: valueProp,
onFocus: onFocusProp,
...props
- } = unitControlProps;
+ } = useDeprecated36pxDefaultSizeProp(
+ unitControlProps,
+ 'wp.components.UnitControl',
+ '6.4'
+ );
if ( 'unit' in unitControlProps ) {
deprecated( 'UnitControl unit prop', {
@@ -182,7 +187,12 @@ function UnforwardedUnitControl(
disabled={ disabled }
isUnitSelectTabbable={ isUnitSelectTabbable }
onChange={ handleOnUnitChange }
- size={ size }
+ size={
+ size === 'small' ||
+ ( size === 'default' && ! props.__next40pxDefaultSize )
+ ? 'small'
+ : 'default'
+ }
unit={ unit }
units={ units }
onFocus={ onFocusProp }
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index 92b1f5f2fd8b4e..d89e9b65a12a1a 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -10,7 +10,7 @@ import { COLORS, CONFIG, rtl } from '../../utils';
import NumberControl from '../../number-control';
import { BackdropUI } from '../../input-control/styles/input-control-styles';
import type { SelectSize } from '../types';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
// Using `selectSize` instead of `size` to avoid a type conflict with the
// `size` HTML attribute of the `select` element.
@@ -36,7 +36,7 @@ export const ValueInput = styled( NumberControl )`
const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
const sizes = {
- default: css`
+ small: css`
box-sizing: border-box;
padding: 2px 1px;
width: 20px;
@@ -47,7 +47,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
text-transform: uppercase;
text-align-last: center;
`,
- large: css`
+ default: css`
box-sizing: border-box;
min-width: 24px;
max-width: 48px;
@@ -64,7 +64,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
`,
};
- return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+ return sizes[ selectSize ];
};
export const UnitLabel = styled.div< SelectProps >`
@@ -79,7 +79,7 @@ export const UnitLabel = styled.div< SelectProps >`
const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
const sizes = {
- default: css`
+ small: css`
height: 100%;
border: 1px solid transparent;
transition:
@@ -101,7 +101,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
z-index: 1;
}
`,
- large: css`
+ default: css`
display: flex;
justify-content: center;
align-items: center;
@@ -121,7 +121,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
`,
};
- return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+ return sizes[ selectSize ];
};
export const UnitSelect = styled.select< SelectProps >`
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index f97d168e7f10ee..9164502668a2b0 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -9,11 +9,10 @@ import type { FocusEventHandler } from 'react';
import type {
InputChangeCallback,
InputControlProps,
- Size as InputSize,
} from '../input-control/types';
import type { NumberControlProps } from '../number-control/types';
-export type SelectSize = InputSize;
+export type SelectSize = 'default' | 'small';
export type WPUnitControlUnit = {
/**
@@ -42,7 +41,7 @@ export type UnitControlOnChangeCallback = InputChangeCallback< {
data?: WPUnitControlUnit;
} >;
-export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
+export type UnitSelectControlProps = {
/**
* Whether the control can be focused via keyboard navigation.
*
@@ -53,6 +52,10 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
* A callback function invoked when the value is changed.
*/
onChange?: UnitControlOnChangeCallback;
+ /**
+ * The size of the unit select.
+ */
+ size?: SelectSize;
/**
* Current unit.
*/
@@ -65,7 +68,8 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
units?: WPUnitControlUnit[];
};
-export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
+export type UnitControlProps = Pick< InputControlProps, 'size' > &
+ Omit< UnitSelectControlProps, 'size' | 'unit' > &
Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
/**
* If `true`, the unit `<select>` is hidden.
diff --git a/packages/components/src/unit-control/unit-select-control.tsx b/packages/components/src/unit-control/unit-select-control.tsx
index 99f481ae506fd0..c3019fb830c224 100644
--- a/packages/components/src/unit-control/unit-select-control.tsx
+++ b/packages/components/src/unit-control/unit-select-control.tsx
@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
import { CSS_UNITS, hasUnits } from './utils';
import type { UnitSelectControlProps } from './types';
diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
index 2a144eef6647f6..25e7e2063cabde 100644
--- a/packages/components/src/utils/colors.js
+++ b/packages/components/src/utils/colors.js
@@ -1,9 +1,13 @@
/**
* External dependencies
*/
+import memoize from 'memize';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
+/** @type {HTMLDivElement} */
+let colorComputationNode;
+
extend( [ namesPlugin ] );
/**
@@ -20,3 +24,90 @@ extend( [ namesPlugin ] );
export function rgba( hexValue = '', alpha = 1 ) {
return colord( hexValue ).alpha( alpha ).toRgbString();
}
+
+/**
+ * @return {HTMLDivElement | undefined} The HTML element for color computation.
+ */
+function getColorComputationNode() {
+ if ( typeof document === 'undefined' ) return;
+
+ if ( ! colorComputationNode ) {
+ // Create a temporary element for style computation.
+ const el = document.createElement( 'div' );
+ el.setAttribute( 'data-g2-color-computation-node', '' );
+ // Inject for window computed style.
+ document.body.appendChild( el );
+ colorComputationNode = el;
+ }
+
+ return colorComputationNode;
+}
+
+/**
+ * @param {string | unknown} value
+ *
+ * @return {boolean} Whether the value is a valid color.
+ */
+function isColor( value ) {
+ if ( typeof value !== 'string' ) return false;
+ const test = colord( value );
+
+ return test.isValid();
+}
+
+/**
+ * Retrieves the computed background color. This is useful for getting the
+ * value of a CSS variable color.
+ *
+ * @param {string | unknown} backgroundColor The background color to compute.
+ *
+ * @return {string} The computed background color.
+ */
+function _getComputedBackgroundColor( backgroundColor ) {
+ if ( typeof backgroundColor !== 'string' ) return '';
+
+ if ( isColor( backgroundColor ) ) return backgroundColor;
+
+ if ( ! backgroundColor.includes( 'var(' ) ) return '';
+ if ( typeof document === 'undefined' ) return '';
+
+ // Attempts to gracefully handle CSS variables color values.
+ const el = getColorComputationNode();
+ if ( ! el ) return '';
+
+ el.style.background = backgroundColor;
+ // Grab the style.
+ const computedColor = window?.getComputedStyle( el ).background;
+ // Reset.
+ el.style.background = '';
+
+ return computedColor || '';
+}
+
+const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text color (black or white).
+ */
+export function getOptimalTextColor( backgroundColor ) {
+ const background = getComputedBackgroundColor( backgroundColor );
+
+ return colord( background ).isLight() ? '#000000' : '#ffffff';
+}
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text shade (dark or light).
+ */
+export function getOptimalTextShade( backgroundColor ) {
+ const result = getOptimalTextColor( backgroundColor );
+
+ return result === '#000000' ? 'dark' : 'light';
+}
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 7f4ee6971b8c46..f279bce888b9d9 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import { space } from '../ui/utils/space';
+import { space } from './space';
import { COLORS } from './colors-values';
const CONTROL_HEIGHT = '36px';
diff --git a/packages/components/src/ui/utils/font-size.ts b/packages/components/src/utils/font-size.ts
similarity index 96%
rename from packages/components/src/ui/utils/font-size.ts
rename to packages/components/src/utils/font-size.ts
index 1393426991c604..e1a5a543709f43 100644
--- a/packages/components/src/ui/utils/font-size.ts
+++ b/packages/components/src/utils/font-size.ts
@@ -6,7 +6,7 @@ import type { CSSProperties, ReactText } from 'react';
/**
* Internal dependencies
*/
-import CONFIG from '../../utils/config-values';
+import CONFIG from './config-values';
export type HeadingSize =
| 1
diff --git a/packages/components/src/ui/utils/get-valid-children.ts b/packages/components/src/utils/get-valid-children.ts
similarity index 100%
rename from packages/components/src/ui/utils/get-valid-children.ts
rename to packages/components/src/utils/get-valid-children.ts
diff --git a/packages/components/src/ui/utils/space.ts b/packages/components/src/utils/space.ts
similarity index 100%
rename from packages/components/src/ui/utils/space.ts
rename to packages/components/src/utils/space.ts
diff --git a/packages/components/src/utils/test/colors.js b/packages/components/src/utils/test/colors.js
index 511e11ad2bfd1b..cc088cb2705bb0 100644
--- a/packages/components/src/utils/test/colors.js
+++ b/packages/components/src/utils/test/colors.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import { rgba } from '../colors';
+import { getOptimalTextColor, getOptimalTextShade, rgba } from '../colors';
describe( 'rbga', () => {
it( 'should output the expected string', () => {
@@ -9,3 +9,41 @@ describe( 'rbga', () => {
expect( rgba( '#f00', 0.2 ) ).toBe( 'rgba(255, 0, 0, 0.2)' );
} );
} );
+
+describe( 'getOptimalTextColor', () => {
+ test( 'should be white for dark backgrounds', () => {
+ expect( getOptimalTextColor( 'black' ) ).toBe( '#ffffff' );
+ expect( getOptimalTextColor( '#000' ) ).toBe( '#ffffff' );
+ expect( getOptimalTextColor( '#111' ) ).toBe( '#ffffff' );
+ expect( getOptimalTextColor( '#123' ) ).toBe( '#ffffff' );
+ expect( getOptimalTextColor( '#555' ) ).toBe( '#ffffff' );
+ expect( getOptimalTextColor( '#05f' ) ).toBe( '#ffffff' );
+ } );
+
+ test( 'should be black for light backgrounds', () => {
+ expect( getOptimalTextColor( 'white' ) ).toBe( '#000000' );
+ expect( getOptimalTextColor( '#fff' ) ).toBe( '#000000' );
+ expect( getOptimalTextColor( '#def' ) ).toBe( '#000000' );
+ expect( getOptimalTextColor( '#c3c3c3' ) ).toBe( '#000000' );
+ expect( getOptimalTextColor( '#0ff' ) ).toBe( '#000000' );
+ } );
+} );
+
+describe( 'getOptimalTextShade', () => {
+ test( 'should be "light" for dark backgrounds', () => {
+ expect( getOptimalTextShade( 'black' ) ).toBe( 'light' );
+ expect( getOptimalTextShade( '#000' ) ).toBe( 'light' );
+ expect( getOptimalTextShade( '#111' ) ).toBe( 'light' );
+ expect( getOptimalTextShade( '#123' ) ).toBe( 'light' );
+ expect( getOptimalTextShade( '#555' ) ).toBe( 'light' );
+ expect( getOptimalTextShade( '#05f' ) ).toBe( 'light' );
+ } );
+
+ test( 'should be "dark" for light backgrounds', () => {
+ expect( getOptimalTextShade( 'white' ) ).toBe( 'dark' );
+ expect( getOptimalTextShade( '#fff' ) ).toBe( 'dark' );
+ expect( getOptimalTextShade( '#def' ) ).toBe( 'dark' );
+ expect( getOptimalTextShade( '#c3c3c3' ) ).toBe( 'dark' );
+ expect( getOptimalTextShade( '#0ff' ) ).toBe( 'dark' );
+ } );
+} );
diff --git a/packages/components/src/ui/utils/test/space.js b/packages/components/src/utils/test/space.js
similarity index 100%
rename from packages/components/src/ui/utils/test/space.js
rename to packages/components/src/utils/test/space.js
diff --git a/packages/components/src/utils/types.ts b/packages/components/src/utils/types.ts
index 54fe75edaa306b..d0ea62501a1f6b 100644
--- a/packages/components/src/utils/types.ts
+++ b/packages/components/src/utils/types.ts
@@ -1,36 +1 @@
-export type SizeRangeDefault =
- | 'xLarge'
- | 'large'
- | 'medium'
- | 'small'
- | 'xSmall';
-
-export type SizeRangeReduced = 'large' | 'medium' | 'small';
-
-export type PopperPlacement =
- | 'auto'
- | 'auto-start'
- | 'auto-end'
- | 'top'
- | 'top-start'
- | 'top-end'
- | 'right'
- | 'right-start'
- | 'right-end'
- | 'bottom'
- | 'bottom-start'
- | 'bottom-end'
- | 'left'
- | 'left-start'
- | 'left-end';
-
-export type PopperProps = {
- /**
- * Position of the popover element.
- *
- * @default 'auto'
- *
- * @see https://popper.js.org/docs/v1/#popperplacements--codeenumcode
- */
- placement?: PopperPlacement;
-};
+export type ResponsiveCSSValue< T > = Array< T | undefined > | T;
diff --git a/packages/components/src/utils/use-deprecated-props.ts b/packages/components/src/utils/use-deprecated-props.ts
index 8c102906970d0e..6df8e25303738c 100644
--- a/packages/components/src/utils/use-deprecated-props.ts
+++ b/packages/components/src/utils/use-deprecated-props.ts
@@ -11,14 +11,16 @@ export function useDeprecated36pxDefaultSizeProp<
>(
props: P,
/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
- componentIdentifier: string
+ componentIdentifier: string,
+ /** Version in which the prop was deprecated. */
+ since: string = '6.3'
) {
const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
props;
if ( typeof __next36pxDefaultSize !== 'undefined' ) {
deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
alternative: '`__next40pxDefaultSize`',
- since: '6.3',
+ since,
} );
}
diff --git a/packages/components/src/ui/utils/use-responsive-value.ts b/packages/components/src/utils/use-responsive-value.ts
similarity index 100%
rename from packages/components/src/ui/utils/use-responsive-value.ts
rename to packages/components/src/utils/use-responsive-value.ts
diff --git a/packages/components/src/utils/z-index.js b/packages/components/src/utils/z-index.js
deleted file mode 100644
index 600f51c673aacf..00000000000000
--- a/packages/components/src/utils/z-index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const Flyout = 10000;
-export const Tooltip = 1000002;
diff --git a/packages/components/src/v-stack/component.tsx b/packages/components/src/v-stack/component.tsx
index 5c51043eba7261..c3ae9fece97dc0 100644
--- a/packages/components/src/v-stack/component.tsx
+++ b/packages/components/src/v-stack/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
import { View } from '../view';
import { useVStack } from './hook';
import type { VStackProps } from './types';
diff --git a/packages/components/src/v-stack/hook.ts b/packages/components/src/v-stack/hook.ts
index f9c592e8f02851..f05a63328f848f 100644
--- a/packages/components/src/v-stack/hook.ts
+++ b/packages/components/src/v-stack/hook.ts
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
import { useHStack } from '../h-stack';
import type { VStackProps } from './types';
diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index da7efc69e38590..a970c5c757431f 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -7,7 +7,7 @@ import type { RefAttributes } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponent } from '../ui/context/wordpress-component';
+import type { WordPressComponent } from '../context/wordpress-component';
import type { ViewProps } from './types';
/**
diff --git a/packages/components/src/visually-hidden/component.tsx b/packages/components/src/visually-hidden/component.tsx
index c5cb9c0fd00677..ddf697c9373db6 100644
--- a/packages/components/src/visually-hidden/component.tsx
+++ b/packages/components/src/visually-hidden/component.tsx
@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
/**
* Internal dependencies
*/
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem, contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnect } from '../context';
import { visuallyHidden } from './styles';
import { View } from '../view';
import type { VisuallyHiddenProps } from './types';
diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index e087f8536e3401..411ef13c7085e3 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -11,11 +11,11 @@ import { isValidElement } from '@wordpress/element';
/**
* Internal dependencies
*/
-import { getValidChildren } from '../ui/utils/get-valid-children';
-import { contextConnect, useContextSystem } from '../ui/context';
+import { getValidChildren } from '../utils/get-valid-children';
+import { contextConnect, useContextSystem } from '../context';
import { ZStackView, ZStackChildView } from './styles';
import type { ZStackProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
function UnconnectedZStack(
props: WordPressComponentProps< ZStackProps, 'div' >,
diff --git a/packages/compose/src/hooks/use-dragging/README.md b/packages/compose/src/hooks/use-dragging/README.md
index d90758ff576693..c941adb8cd5474 100644
--- a/packages/compose/src/hooks/use-dragging/README.md
+++ b/packages/compose/src/hooks/use-dragging/README.md
@@ -57,7 +57,7 @@ The following example allows us to drag & drop a red square around the entire vi
/**
* WordPress dependencies
*/
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback } from 'react';
import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
const UseDraggingExample = () => {
diff --git a/packages/compose/src/hooks/use-drop-zone/README.md b/packages/compose/src/hooks/use-drop-zone/README.md
index 558a5f6866b54e..7f6f1febc1bb7b 100644
--- a/packages/compose/src/hooks/use-drop-zone/README.md
+++ b/packages/compose/src/hooks/use-drop-zone/README.md
@@ -7,8 +7,8 @@ When using a `dropZoneElement`, it is expected that the `ref` will be attached t
## Usage
```js
+import { useState } from 'react';
import { useDropZone } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
const WithWrapperDropZoneElement = () => {
const [ dropZoneElement, setDropZoneElement ] = useState( null );
diff --git a/packages/compose/src/hooks/use-previous/README.md b/packages/compose/src/hooks/use-previous/README.md
index a22dfb69b96e3e..5eeaad52d53279 100644
--- a/packages/compose/src/hooks/use-previous/README.md
+++ b/packages/compose/src/hooks/use-previous/README.md
@@ -8,8 +8,8 @@ Sometimes you need to get the value something had on the previous render. `usePr
/**
* WordPress dependencies
*/
+import { useEffect, useState } from 'react';
import { usePrevious } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
function MyCustomElement() {
const [ myNumber, setMyNumber ] = useState( 5 );
diff --git a/packages/compose/src/hooks/use-resize-observer/index.tsx b/packages/compose/src/hooks/use-resize-observer/index.tsx
index b2ff87f2c025f7..21fcd0bff4f4d0 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.tsx
+++ b/packages/compose/src/hooks/use-resize-observer/index.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { RefCallback, RefObject } from 'react';
+import type { ReactElement, RefCallback, RefObject } from 'react';
/**
* WordPress dependencies
@@ -13,7 +13,6 @@ import {
useEffect,
useState,
} from '@wordpress/element';
-import type { WPElement } from '@wordpress/element';
type SubscriberCleanup = () => void;
type SubscriberResponse = SubscriberCleanup | void;
@@ -335,7 +334,7 @@ function useResizeObserver< T extends HTMLElement >(
* ```
*/
export default function useResizeAware(): [
- WPElement,
+ ReactElement,
{ width: number | null; height: number | null },
] {
const { ref, width, height } = useResizeObserver();
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
index f60a8af7d39a01..45d2dc6c47ad77 100644
--- a/packages/core-commands/src/site-editor-navigation-commands.js
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -24,7 +24,7 @@ import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
import { unlock } from './lock-unlock';
import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
const icons = {
post,
@@ -136,6 +136,14 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
function useNavigationCommandLoader( { search } ) {
const history = useHistory();
+ const location = useLocation();
+
+ const isPatternsPage =
+ location?.params?.path === '/patterns' ||
+ location?.params?.postType === 'wp_block';
+ const didAccessPatternsPage =
+ !! location?.params?.didAccessPatternsPage;
+
const isBlockBasedTheme = useIsBlockBasedTheme();
const { records, isLoading } = useSelect( ( select ) => {
const { getEntityRecords } = select( coreStore );
@@ -184,6 +192,11 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
const args = {
postType: templateType,
postId: record.id,
+ didAccessPatternsPage:
+ ! isBlockBasedTheme &&
+ ( isPatternsPage || didAccessPatternsPage )
+ ? 1
+ : undefined,
...extraArgs,
};
const targetUrl = addQueryArgs(
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 6024f4db2f12d4..87233a2c206bf0 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -782,8 +782,8 @@ application, the page and the resolution details will be retrieved from
the store state using `getEntityRecord()`, or resolved if missing.
```js
+import { useCallback } from 'react';
import { useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
import { store as noticeStore } from '@wordpress/notices';
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 36612471132467..b1cceaebc0286f 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -42,6 +42,7 @@
"@wordpress/i18n": "file:../i18n",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/private-apis": "file:../private-apis",
+ "@wordpress/rich-text": "file:../rich-text",
"@wordpress/sync": "file:../sync",
"@wordpress/undo-manager": "file:../undo-manager",
"@wordpress/url": "file:../url",
@@ -50,7 +51,7 @@
"fast-deep-equal": "^3.1.3",
"memize": "^2.1.0",
"rememo": "^4.0.2",
- "uuid": "^8.3.0"
+ "uuid": "^9.0.1"
},
"peerDependencies": {
"react": "^18.0.0",
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 7bae4d218e65e7..3f6c3c12432f58 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -385,12 +385,14 @@ export const editEntityRecord =
}, {} ),
};
if ( window.__experimentalEnableSync && entityConfig.syncConfig ) {
- const objectId = entityConfig.getSyncObjectId( recordId );
- getSyncProvider().update(
- entityConfig.syncObjectType + '--edit',
- objectId,
- edit.edits
- );
+ if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ const objectId = entityConfig.getSyncObjectId( recordId );
+ getSyncProvider().update(
+ entityConfig.syncObjectType + '--edit',
+ objectId,
+ edit.edits
+ );
+ }
} else {
if ( ! options.undoIgnore ) {
select.getUndoManager().addRecord(
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index 6c1579de1ecdf1..fde8cdba93717d 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -400,7 +400,12 @@ export const getOrLoadEntitiesConfig =
async ( { select, dispatch } ) => {
let configs = select.getEntitiesConfig( kind );
if ( configs && configs.length !== 0 ) {
- registerSyncConfigs( configs );
+ if ( window.__experimentalEnableSync ) {
+ if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ registerSyncConfigs( configs );
+ }
+ }
+
return configs;
}
@@ -412,7 +417,12 @@ export const getOrLoadEntitiesConfig =
}
configs = await loader.loadEntities();
- registerSyncConfigs( configs );
+ if ( window.__experimentalEnableSync ) {
+ if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ registerSyncConfigs( configs );
+ }
+ }
+
dispatch( addEntities( configs ) );
return configs;
diff --git a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js
index bb1bf41d9e2cda..3bba760b20c459 100644
--- a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js
+++ b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js
@@ -85,17 +85,28 @@ const fetchLinkSuggestions = async (
) => {
const {
isInitialSuggestions = false,
+ initialSuggestionsSearchOptions = undefined,
+ } = searchOptions;
+
+ const { disablePostFormats = false } = settings;
+
+ let {
type = undefined,
subtype = undefined,
page = undefined,
perPage = isInitialSuggestions ? 3 : 20,
} = searchOptions;
- const { disablePostFormats = false } = settings;
-
/** @type {Promise<WPLinkSearchResult>[]} */
const queries = [];
+ if ( isInitialSuggestions && initialSuggestionsSearchOptions ) {
+ type = initialSuggestionsSearchOptions.type || type;
+ subtype = initialSuggestionsSearchOptions.subtype || subtype;
+ page = initialSuggestionsSearchOptions.page || page;
+ perPage = initialSuggestionsSearchOptions.perPage || perPage;
+ }
+
if ( ! type || type === 'post' ) {
queries.push(
apiFetch( {
diff --git a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
index 23e889344c0e45..d283226cca0909 100644
--- a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
+++ b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
@@ -231,22 +231,73 @@ describe( 'fetchLinkSuggestions', () => {
] )
);
} );
- it( 'initial search suggestions limits results', () => {
- return fetchLinkSuggestions( '', {
- type: 'post',
- subtype: 'page',
- isInitialSuggestions: true,
- } ).then( ( suggestions ) =>
- expect( suggestions ).toEqual( [
- {
- id: 11,
- title: 'Limit Case',
- url: 'http://wordpress.local/limit-case/',
- type: 'page',
- kind: 'post-type',
+ describe( 'Initial search suggestions', () => {
+ it( 'initial search suggestions limits results', () => {
+ return fetchLinkSuggestions( '', {
+ type: 'post',
+ subtype: 'page',
+ isInitialSuggestions: true,
+ } ).then( ( suggestions ) =>
+ expect( suggestions ).toEqual( [
+ {
+ id: 11,
+ title: 'Limit Case',
+ url: 'http://wordpress.local/limit-case/',
+ type: 'page',
+ kind: 'post-type',
+ },
+ ] )
+ );
+ } );
+
+ it( 'should allow custom search options for initial suggestions', () => {
+ return fetchLinkSuggestions( '', {
+ type: 'term',
+ subtype: 'category',
+ page: 11,
+ isInitialSuggestions: true,
+ initialSuggestionsSearchOptions: {
+ type: 'post',
+ subtype: 'page',
+ perPage: 20,
+ page: 11,
},
- ] )
- );
+ } ).then( ( suggestions ) =>
+ expect( suggestions ).toEqual( [
+ {
+ id: 22,
+ title: 'Page Case',
+ url: 'http://wordpress.local/page-case/',
+ type: 'page',
+ kind: 'post-type',
+ },
+ ] )
+ );
+ } );
+
+ it( 'should default any missing initial search options to those from the main search options', () => {
+ return fetchLinkSuggestions( '', {
+ type: 'post',
+ subtype: 'page',
+ page: 11,
+ perPage: 20,
+ isInitialSuggestions: true,
+ initialSuggestionsSearchOptions: {
+ // intentionally missing.
+ // expected to default to those from the main search options.
+ },
+ } ).then( ( suggestions ) =>
+ expect( suggestions ).toEqual( [
+ {
+ id: 22,
+ title: 'Page Case',
+ url: 'http://wordpress.local/page-case/',
+ type: 'page',
+ kind: 'post-type',
+ },
+ ] )
+ );
+ } );
} );
it( 'allows searching from a page', () => {
return fetchLinkSuggestions( '', {
diff --git a/packages/core-data/src/footnotes/get-footnotes-order.js b/packages/core-data/src/footnotes/get-footnotes-order.js
index e974c4a6e11893..42adeed7621e8f 100644
--- a/packages/core-data/src/footnotes/get-footnotes-order.js
+++ b/packages/core-data/src/footnotes/get-footnotes-order.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { create } from '@wordpress/rich-text';
+
/**
* Internal dependencies
*/
@@ -7,24 +12,31 @@ const cache = new WeakMap();
function getBlockFootnotesOrder( block ) {
if ( ! cache.has( block ) ) {
- const content = getRichTextValuesCached( block ).join( '' );
- const newOrder = [];
-
- // https://github.com/WordPress/gutenberg/pull/43204 lands. We can then
- // get the order directly from the rich text values.
- if ( content.indexOf( 'data-fn' ) !== -1 ) {
- const regex = /data-fn="([^"]+)"/g;
- let match;
- while ( ( match = regex.exec( content ) ) !== null ) {
- newOrder.push( match[ 1 ] );
+ const order = [];
+ for ( const value of getRichTextValuesCached( block ) ) {
+ if ( ! value || ! value.includes( 'data-fn' ) ) {
+ continue;
}
+
+ // replacements is a sparse array, use forEach to skip empty slots.
+ create( { html: value } ).replacements.forEach(
+ ( { type, attributes } ) => {
+ if ( type === 'core/footnote' ) {
+ order.push( attributes[ 'data-fn' ] );
+ }
+ }
+ );
}
- cache.set( block, newOrder );
+ cache.set( block, order );
}
return cache.get( block );
}
export default function getFootnotesOrder( blocks ) {
+ // We can only separate getting order from blocks at the root level. For
+ // deeper inner blocks, this will not work since it's possible to have both
+ // inner blocks and block attributes, so order needs to be computed from the
+ // Edit functions as a whole.
return blocks.flatMap( getBlockFootnotesOrder );
}
diff --git a/packages/core-data/src/footnotes/index.js b/packages/core-data/src/footnotes/index.js
index b5c075b372e31e..fa1c5fad5c7e7d 100644
--- a/packages/core-data/src/footnotes/index.js
+++ b/packages/core-data/src/footnotes/index.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { create, toHTMLString } from '@wordpress/rich-text';
+
/**
* Internal dependencies
*/
@@ -56,30 +61,24 @@ export function updateFootnotesFromMeta( blocks, meta ) {
continue;
}
- // When we store rich text values, this would no longer
- // require a regex.
- const regex =
- /(<sup[^>]+data-fn="([^"]+)"[^>]*><a[^>]*>)[\d*]*<\/a><\/sup>/g;
-
- attributes[ key ] = value.replace(
- regex,
- ( match, opening, fnId ) => {
- const index = newOrder.indexOf( fnId );
- return `${ opening }${ index + 1 }</a></sup>`;
+ const richTextValue = create( { html: value } );
+
+ richTextValue.replacements.forEach( ( replacement ) => {
+ if ( replacement.type === 'core/footnote' ) {
+ const id = replacement.attributes[ 'data-fn' ];
+ const index = newOrder.indexOf( id );
+ // The innerHTML contains the count wrapped in a link.
+ const countValue = create( {
+ html: replacement.innerHTML,
+ } );
+ countValue.text = String( index + 1 );
+ replacement.innerHTML = toHTMLString( {
+ value: countValue,
+ } );
}
- );
-
- const compatRegex = /<a[^>]+data-fn="([^"]+)"[^>]*>\*<\/a>/g;
+ } );
- attributes[ key ] = attributes[ key ].replace(
- compatRegex,
- ( match, fnId ) => {
- const index = newOrder.indexOf( fnId );
- return `<sup data-fn="${ fnId }" class="fn"><a href="#${ fnId }" id="${ fnId }-link">${
- index + 1
- }</a></sup>`;
- }
- );
+ attributes[ key ] = toHTMLString( { value: richTextValue } );
}
return attributes;
diff --git a/packages/core-data/src/hooks/use-entity-record.ts b/packages/core-data/src/hooks/use-entity-record.ts
index 7f3630b1dd4ceb..6c755c7bad6a60 100644
--- a/packages/core-data/src/hooks/use-entity-record.ts
+++ b/packages/core-data/src/hooks/use-entity-record.ts
@@ -89,8 +89,8 @@ export interface Options {
*
* @example
* ```js
+ * import { useCallback } from 'react';
* import { useDispatch } from '@wordpress/data';
- * import { useCallback } from '@wordpress/element';
* import { __ } from '@wordpress/i18n';
* import { TextControl } from '@wordpress/components';
* import { store as noticeStore } from '@wordpress/notices';
diff --git a/packages/core-data/src/queried-data/selectors.js b/packages/core-data/src/queried-data/selectors.js
index a3e6f322274ced..562aab7ce6b79b 100644
--- a/packages/core-data/src/queried-data/selectors.js
+++ b/packages/core-data/src/queried-data/selectors.js
@@ -68,7 +68,7 @@ function getQueriedItemsUncached( state, query ) {
const field = fields[ f ].split( '.' );
let value = item;
field.forEach( ( fieldName ) => {
- value = value[ fieldName ];
+ value = value?.[ fieldName ];
} );
setNestedValue( filteredItem, field, value );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index e01bb12b2e253c..e8cf4e34a120ff 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -79,39 +79,41 @@ export const getEntityRecord =
entityConfig.syncConfig &&
! query
) {
- const objectId = entityConfig.getSyncObjectId( key );
-
- // Loads the persisted document.
- await getSyncProvider().bootstrap(
- entityConfig.syncObjectType,
- objectId,
- ( record ) => {
- dispatch.receiveEntityRecords(
- kind,
- name,
- record,
- query
- );
- }
- );
+ if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ const objectId = entityConfig.getSyncObjectId( key );
+
+ // Loads the persisted document.
+ await getSyncProvider().bootstrap(
+ entityConfig.syncObjectType,
+ objectId,
+ ( record ) => {
+ dispatch.receiveEntityRecords(
+ kind,
+ name,
+ record,
+ query
+ );
+ }
+ );
- // Boostraps the edited document as well (and load from peers).
- await getSyncProvider().bootstrap(
- entityConfig.syncObjectType + '--edit',
- objectId,
- ( record ) => {
- dispatch( {
- type: 'EDIT_ENTITY_RECORD',
- kind,
- name,
- recordId: key,
- edits: record,
- meta: {
- undo: undefined,
- },
- } );
- }
- );
+ // Boostraps the edited document as well (and load from peers).
+ await getSyncProvider().bootstrap(
+ entityConfig.syncObjectType + '--edit',
+ objectId,
+ ( record ) => {
+ dispatch( {
+ type: 'EDIT_ENTITY_RECORD',
+ kind,
+ name,
+ recordId: key,
+ edits: record,
+ meta: {
+ undo: undefined,
+ },
+ } );
+ }
+ );
+ }
} else {
if ( query !== undefined && query._fields ) {
// If requesting specific fields, items and query association to said
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index 7d6cbeb4daeee9..4e582bcf8a34ba 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -344,7 +344,7 @@ export const getEntityRecord = createSelector(
const field = fields[ f ].split( '.' );
let value = item;
field.forEach( ( fieldName ) => {
- value = value[ fieldName ];
+ value = value?.[ fieldName ];
} );
setNestedValue( filteredItem, field, value );
}
@@ -936,6 +936,9 @@ export function hasRedo( state: State ): boolean {
* @return The current theme.
*/
export function getCurrentTheme( state: State ): any {
+ if ( ! state.currentTheme ) {
+ return null;
+ }
return getEntityRecord( state, 'root', 'theme', state.currentTheme );
}
diff --git a/packages/core-data/src/test/entity-provider.js b/packages/core-data/src/test/entity-provider.js
index 728630b482626c..aa373e6304aad1 100644
--- a/packages/core-data/src/test/entity-provider.js
+++ b/packages/core-data/src/test/entity-provider.js
@@ -14,6 +14,7 @@ import {
} from '@wordpress/blocks';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { createRegistry, RegistryProvider } from '@wordpress/data';
+import '@wordpress/block-library';
/**
* Internal dependencies
@@ -246,7 +247,7 @@ describe( 'useEntityBlockEditor', () => {
[
createBlock( 'core/test-block', {
content:
- 'A new paragraph<sup data-fn="xyz" class="xyz"><a href="#xyz" id="xyz-link">999</a></sup>',
+ 'A new paragraph<sup data-fn="xyz" class="fn"><a href="#xyz" id="xyz-link">999</a></sup>',
} ),
...blocks,
],
@@ -263,7 +264,7 @@ describe( 'useEntityBlockEditor', () => {
// The newly inserted block should have the footnote number 1, and the
// existing footnote number 1 should be updated to 2.
expect( blocks[ 0 ].attributes.content ).toEqual(
- 'A new paragraph<sup data-fn="xyz" class="xyz"><a href="#xyz" id="xyz-link">1</a></sup>'
+ 'A new paragraph<sup data-fn="xyz" class="fn"><a href="#xyz" id="xyz-link">1</a></sup>'
);
expect( blocks[ 1 ].attributes.content ).toEqual(
'A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">2</a></sup>'
diff --git a/packages/core-data/src/test/selectors.js b/packages/core-data/src/test/selectors.js
index 161d0af4ea5bca..5ae7a81fa144e9 100644
--- a/packages/core-data/src/test/selectors.js
+++ b/packages/core-data/src/test/selectors.js
@@ -135,6 +135,43 @@ describe.each( [
} )
).toEqual( { content: 'chicken' } );
} );
+
+ it( 'should work well for nested fields properties', () => {
+ const state = deepFreeze( {
+ entities: {
+ records: {
+ root: {
+ postType: {
+ queriedData: {
+ items: {
+ default: {
+ post: {
+ foo: undefined,
+ },
+ },
+ },
+ itemIsComplete: {
+ default: {
+ post: true,
+ },
+ },
+ queries: {},
+ },
+ },
+ },
+ },
+ },
+ } );
+ expect(
+ getEntityRecord( state, 'root', 'postType', 'post', {
+ _fields: [ 'foo.bar' ],
+ } )
+ ).toEqual( {
+ foo: {
+ bar: undefined,
+ },
+ } );
+ } );
} );
describe( 'hasEntityRecords', () => {
diff --git a/packages/core-data/tsconfig.json b/packages/core-data/tsconfig.json
index 3fe698f758b54d..0fb848f411d8ea 100644
--- a/packages/core-data/tsconfig.json
+++ b/packages/core-data/tsconfig.json
@@ -18,6 +18,7 @@
{ "path": "../i18n" },
{ "path": "../is-shallow-equal" },
{ "path": "../private-apis" },
+ { "path": "../rich-text" },
{ "path": "../sync" },
{ "path": "../undo-manager" },
{ "path": "../url" }
diff --git a/packages/create-block-interactive-template/block-templates/edit.js.mustache b/packages/create-block-interactive-template/block-templates/edit.js.mustache
index 1a0aeeac8d6979..b7d273cee07b92 100644
--- a/packages/create-block-interactive-template/block-templates/edit.js.mustache
+++ b/packages/create-block-interactive-template/block-templates/edit.js.mustache
@@ -23,7 +23,7 @@ import { useBlockProps } from '@wordpress/block-editor';
* @param {Object} props.attributes Available block attributes.
* @param {Function} props.setAttributes Function that updates individual attributes.
*
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
diff --git a/packages/create-block-tutorial-template/block-templates/edit.js.mustache b/packages/create-block-tutorial-template/block-templates/edit.js.mustache
index af0cb1629f62f2..fbb6864d869df6 100644
--- a/packages/create-block-tutorial-template/block-templates/edit.js.mustache
+++ b/packages/create-block-tutorial-template/block-templates/edit.js.mustache
@@ -23,7 +23,7 @@ import { useBlockProps } from '@wordpress/block-editor';
* @param {Object} props.attributes Available block attributes.
* @param {Function} props.setAttributes Function that updates individual attributes.
*
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
diff --git a/packages/create-block-tutorial-template/block-templates/save.js.mustache b/packages/create-block-tutorial-template/block-templates/save.js.mustache
index d390552490a579..a11ee432a4d442 100644
--- a/packages/create-block-tutorial-template/block-templates/save.js.mustache
+++ b/packages/create-block-tutorial-template/block-templates/save.js.mustache
@@ -16,7 +16,7 @@ import { useBlockProps } from '@wordpress/block-editor';
*
* @param {Object} props Properties passed to the function.
* @param {Object} props.attributes Available block attributes.
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
diff --git a/packages/create-block/lib/templates/block/edit.js.mustache b/packages/create-block/lib/templates/block/edit.js.mustache
index 89574380a3c2e3..1824892f3e282d 100644
--- a/packages/create-block/lib/templates/block/edit.js.mustache
+++ b/packages/create-block/lib/templates/block/edit.js.mustache
@@ -27,7 +27,7 @@ import './editor.scss';
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
export default function Edit() {
return (
diff --git a/packages/create-block/lib/templates/block/save.js.mustache b/packages/create-block/lib/templates/block/save.js.mustache
index 70452e60a6a4fa..285931becea2a6 100644
--- a/packages/create-block/lib/templates/block/save.js.mustache
+++ b/packages/create-block/lib/templates/block/save.js.mustache
@@ -14,7 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor';
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
*
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
export default function save() {
return (
diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache
index 9738885ac87421..10370672295cb3 100644
--- a/packages/create-block/lib/templates/es5/index.js.mustache
+++ b/packages/create-block/lib/templates/es5/index.js.mustache
@@ -39,7 +39,7 @@
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
edit: function() {
return el(
@@ -56,7 +56,7 @@
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
*
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
*/
save: function() {
return el(
diff --git a/packages/customize-widgets/src/store/actions.js b/packages/customize-widgets/src/store/actions.js
index 844617b4142aa0..8656ef8854c9f5 100644
--- a/packages/customize-widgets/src/store/actions.js
+++ b/packages/customize-widgets/src/store/actions.js
@@ -10,11 +10,11 @@
*
* @example
* ```js
+ * import { useState } from 'react';
* import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
* import { __ } from '@wordpress/i18n';
* import { useDispatch } from '@wordpress/data';
* import { Button } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
*
* const ExampleComponent = () => {
* const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index f10018b00e1948..3c0c56d60b16ff 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Enhancements
+
+- Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)).
+
## 9.12.0 (2023-09-20)
## 9.11.0 (2023-08-31)
diff --git a/packages/data/README.md b/packages/data/README.md
index 8ee5213f7f66c4..96115e734266ef 100644
--- a/packages/data/README.md
+++ b/packages/data/README.md
@@ -315,7 +315,7 @@ _Parameters_
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### combineReducers
@@ -702,8 +702,8 @@ the server via the `useSelect` hook to use in combination with the dispatch
action.
```jsx
+import { useCallback } from 'react';
import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
import { store as myCustomStore } from 'my-custom-store';
function Button( { onClick, children } ) {
@@ -939,7 +939,7 @@ _Parameters_
_Returns_
-- `WPComponent`: Enhanced component with merged dispatcher props.
+- `ComponentType`: Enhanced component with merged dispatcher props.
### withRegistry
@@ -947,11 +947,11 @@ Higher-order component which renders the original component with the current reg
_Parameters_
-- _OriginalComponent_ `WPComponent`: Original component.
+- _OriginalComponent_ `Component`: Original component.
_Returns_
-- `WPComponent`: Enhanced component.
+- `Component`: Enhanced component.
### withSelect
@@ -995,7 +995,7 @@ _Parameters_
_Returns_
-- `WPComponent`: Enhanced component with merged state data props.
+- `ComponentType`: Enhanced component with merged state data props.
<!-- END TOKEN(Autogenerated API docs) -->
diff --git a/packages/data/package.json b/packages/data/package.json
index 2bac7a1f67e9b0..d46588fbd7d7e6 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -42,7 +42,6 @@
"is-promise": "^4.0.0",
"redux": "^4.1.2",
"rememo": "^4.0.2",
- "turbo-combine-reducers": "^1.0.2",
"use-memo-one": "^1.1.1"
},
"peerDependencies": {
diff --git a/packages/data/src/components/async-mode-provider/context.js b/packages/data/src/components/async-mode-provider/context.js
index fdaa203b1afb6e..fe0c8acc99333b 100644
--- a/packages/data/src/components/async-mode-provider/context.js
+++ b/packages/data/src/components/async-mode-provider/context.js
@@ -42,6 +42,6 @@ export const AsyncModeConsumer = Consumer;
* It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.
*
* @param {boolean} props.value Enable Async Mode.
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
export default Provider;
diff --git a/packages/data/src/components/use-dispatch/use-dispatch.js b/packages/data/src/components/use-dispatch/use-dispatch.js
index c0da1bb81fd0dd..742fdc2a6e9654 100644
--- a/packages/data/src/components/use-dispatch/use-dispatch.js
+++ b/packages/data/src/components/use-dispatch/use-dispatch.js
@@ -31,8 +31,8 @@ import useRegistry from '../registry-provider/use-registry';
* action.
*
* ```jsx
+ * import { useCallback } from 'react';
* import { useDispatch, useSelect } from '@wordpress/data';
- * import { useCallback } from '@wordpress/element';
* import { store as myCustomStore } from 'my-custom-store';
*
* function Button( { onClick, children } ) {
diff --git a/packages/data/src/components/with-dispatch/index.js b/packages/data/src/components/with-dispatch/index.js
index a9ef2fb6c61946..cc67c8d9806375 100644
--- a/packages/data/src/components/with-dispatch/index.js
+++ b/packages/data/src/components/with-dispatch/index.js
@@ -8,7 +8,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
*/
import { useDispatchWithMap } from '../use-dispatch';
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
/**
* Higher-order component used to add dispatch props using registered action
@@ -89,7 +89,7 @@ import { useDispatchWithMap } from '../use-dispatch';
* returns an object with the same keys. For example, it should not contain
* conditions under which a different value would be returned.
*
- * @return {WPComponent} Enhanced component with merged dispatcher props.
+ * @return {ComponentType} Enhanced component with merged dispatcher props.
*/
const withDispatch = ( mapDispatchToProps ) =>
createHigherOrderComponent(
diff --git a/packages/data/src/components/with-registry/index.js b/packages/data/src/components/with-registry/index.js
index faf3da8c009add..4ccd38ed398d73 100644
--- a/packages/data/src/components/with-registry/index.js
+++ b/packages/data/src/components/with-registry/index.js
@@ -12,9 +12,9 @@ import { RegistryConsumer } from '../registry-provider';
* Higher-order component which renders the original component with the current
* registry context passed as its `registry` prop.
*
- * @param {WPComponent} OriginalComponent Original component.
+ * @param {Component} OriginalComponent Original component.
*
- * @return {WPComponent} Enhanced component.
+ * @return {Component} Enhanced component.
*/
const withRegistry = createHigherOrderComponent(
( OriginalComponent ) => ( props ) => (
diff --git a/packages/data/src/components/with-select/index.js b/packages/data/src/components/with-select/index.js
index 0f869f6b0a1a76..12a56b70da2b65 100644
--- a/packages/data/src/components/with-select/index.js
+++ b/packages/data/src/components/with-select/index.js
@@ -8,7 +8,7 @@ import { createHigherOrderComponent, pure } from '@wordpress/compose';
*/
import useSelect from '../use-select';
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
/**
* Higher-order component used to inject state-derived props using registered
@@ -48,7 +48,7 @@ import useSelect from '../use-select';
* component and update automatically if the price of a hammer ever changes in
* the store.
*
- * @return {WPComponent} Enhanced component with merged state data props.
+ * @return {ComponentType} Enhanced component with merged state data props.
*/
const withSelect = ( mapSelectToProps ) =>
createHigherOrderComponent(
diff --git a/packages/data/src/index.js b/packages/data/src/index.js
index 770516e6ae0e3d..fd42e9d61587f6 100644
--- a/packages/data/src/index.js
+++ b/packages/data/src/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import turboCombineReducers from 'turbo-combine-reducers';
-
/**
* Internal dependencies
*/
@@ -80,7 +75,7 @@ export { plugins };
* @return {Function} A reducer that invokes every reducer inside the reducers
* object, and constructs a state object with the same shape.
*/
-export const combineReducers = turboCombineReducers;
+export { combineReducers } from './redux-store';
/**
* Given a store descriptor, returns an object containing the store's selectors pre-bound to state
diff --git a/packages/data/src/redux-store/combine-reducers.js b/packages/data/src/redux-store/combine-reducers.js
new file mode 100644
index 00000000000000..0fdcdae58a6c73
--- /dev/null
+++ b/packages/data/src/redux-store/combine-reducers.js
@@ -0,0 +1,17 @@
+export function combineReducers( reducers ) {
+ const keys = Object.keys( reducers );
+
+ return function combinedReducer( state = {}, action ) {
+ const nextState = {};
+ let hasChanged = false;
+ for ( const key of keys ) {
+ const reducer = reducers[ key ];
+ const prevStateForKey = state[ key ];
+ const nextStateForKey = reducer( prevStateForKey, action );
+ nextState[ key ] = nextStateForKey;
+ hasChanged = hasChanged || nextStateForKey !== prevStateForKey;
+ }
+
+ return hasChanged ? nextState : state;
+ };
+}
diff --git a/packages/data/src/redux-store/index.js b/packages/data/src/redux-store/index.js
index d9614a7ba35baf..3a4b03b23001be 100644
--- a/packages/data/src/redux-store/index.js
+++ b/packages/data/src/redux-store/index.js
@@ -2,7 +2,6 @@
* External dependencies
*/
import { createStore, applyMiddleware } from 'redux';
-import combineReducers from 'turbo-combine-reducers';
import EquivalentKeyMap from 'equivalent-key-map';
/**
@@ -14,6 +13,7 @@ import { compose } from '@wordpress/compose';
/**
* Internal dependencies
*/
+import { combineReducers } from './combine-reducers';
import { builtinControls } from '../controls';
import { lock } from '../lock-unlock';
import promise from '../promise-middleware';
@@ -23,6 +23,8 @@ import metadataReducer from './metadata/reducer';
import * as metadataSelectors from './metadata/selectors';
import * as metadataActions from './metadata/actions';
+export { combineReducers };
+
/** @typedef {import('../types').DataRegistry} DataRegistry */
/** @typedef {import('../types').ListenerFunction} ListenerFunction */
/**
@@ -32,7 +34,7 @@ import * as metadataActions from './metadata/actions';
/**
* @typedef {import('../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
* @template State
- * @template {Record<string,import('../../types').ActionCreator>} Actions
+ * @template {Record<string,import('../types').ActionCreator>} Actions
* @template Selectors
*/
@@ -134,7 +136,7 @@ function createBindingCache( bind ) {
* ```
*
* @template State
- * @template {Record<string,import('../../types').ActionCreator>} Actions
+ * @template {Record<string,import('../types').ActionCreator>} Actions
* @template Selectors
* @param {string} key Unique namespace identifier.
* @param {ReduxStoreConfig<State,Actions,Selectors>} options Registered store options, with properties
diff --git a/packages/data/src/redux-store/test/combine-reducers.js b/packages/data/src/redux-store/test/combine-reducers.js
new file mode 100644
index 00000000000000..d7673cf95664fd
--- /dev/null
+++ b/packages/data/src/redux-store/test/combine-reducers.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import { combineReducers } from '../combine-reducers';
+
+function counterReducer( count = 0, action ) {
+ if ( action.type === 'INC' ) {
+ return count + 1;
+ }
+ return count;
+}
+
+describe( 'combineReducers', () => {
+ it( 'initializes state', () => {
+ const reducer = combineReducers( { foo: counterReducer } );
+ expect( reducer( undefined, { type: 'INIT' } ) ).toEqual( { foo: 0 } );
+ } );
+
+ it( 'dispatches actions to subreducers', () => {
+ const reducer = combineReducers( { foo: counterReducer } );
+ expect( reducer( { foo: 1 }, { type: 'INC' } ) ).toEqual( { foo: 2 } );
+ } );
+
+ it( 'returns identical state when there is no change', () => {
+ const reducer = combineReducers( { foo: counterReducer } );
+ const state = { foo: 1 };
+ expect( reducer( state, { type: 'NOOP' } ) ).toBe( state );
+ } );
+
+ it( 'returns identical substate when there is no change', () => {
+ const reducer = combineReducers( {
+ foo: counterReducer,
+ bar: combineReducers( { baz: ( s ) => s } ),
+ } );
+ const prevState = { foo: 1, bar: { baz: 1 } };
+ const nextState = reducer( prevState, { type: 'INC' } );
+ expect( nextState.foo ).toBe( 2 ); // changed
+ expect( nextState.bar ).toBe( prevState.bar ); // not changed
+ } );
+
+ it( 'does not mind undefined state', () => {
+ const reducer = combineReducers( { foo: ( s ) => s } );
+ // combineReducers from Redux would throw an exception when a reducer returns
+ // `undefined` state, but we don't mind and treat is as any other value.
+ expect( reducer( undefined, { type: 'INIT' } ) ).toEqual( {
+ foo: undefined,
+ } );
+ } );
+
+ it( 'does not mind unknown state keys', () => {
+ const reducer = combineReducers( { foo: counterReducer } );
+ // combineReducers from Redux would warn about the unknown `bar` key as
+ // there is no reducer for it, but we don't mind and just ignore it.
+ expect( reducer( { foo: 1, bar: 1 }, { type: 'INC' } ) ).toEqual( {
+ foo: 2,
+ } );
+ } );
+
+ it( 'supports a "unit" reducer with no subreducers', () => {
+ const reducer = combineReducers( {} );
+ const initialState = reducer( undefined, { type: 'INIT' } );
+ expect( initialState ).toEqual( {} );
+ const nextState = reducer( initialState, { type: 'INC' } );
+ expect( nextState ).toBe( initialState );
+ } );
+} );
diff --git a/packages/data/src/resolvers-cache-middleware.js b/packages/data/src/resolvers-cache-middleware.js
index 68945db2535752..13a0214a8bc930 100644
--- a/packages/data/src/resolvers-cache-middleware.js
+++ b/packages/data/src/resolvers-cache-middleware.js
@@ -1,53 +1,47 @@
-/**
- * Internal dependencies
- */
-import coreDataStore from './store';
-
/** @typedef {import('./registry').WPDataRegistry} WPDataRegistry */
/**
* Creates a middleware handling resolvers cache invalidation.
*
- * @param {WPDataRegistry} registry The registry reference for which to create
- * the middleware.
- * @param {string} reducerKey The namespace for which to create the
- * middleware.
+ * @param {WPDataRegistry} registry Registry for which to create the middleware.
+ * @param {string} storeName Name of the store for which to create the middleware.
*
* @return {Function} Middleware function.
*/
const createResolversCacheMiddleware =
- ( registry, reducerKey ) => () => ( next ) => ( action ) => {
- const resolvers = registry
- .select( coreDataStore )
- .getCachedResolvers( reducerKey );
- Object.entries( resolvers ).forEach(
- ( [ selectorName, resolversByArgs ] ) => {
- const resolver =
- registry.stores?.[ reducerKey ]?.resolvers?.[
- selectorName
- ];
- if ( ! resolver || ! resolver.shouldInvalidate ) {
+ ( registry, storeName ) => () => ( next ) => ( action ) => {
+ const resolvers = registry.select( storeName ).getCachedResolvers();
+ const resolverEntries = Object.entries( resolvers );
+ resolverEntries.forEach( ( [ selectorName, resolversByArgs ] ) => {
+ const resolver =
+ registry.stores[ storeName ]?.resolvers?.[ selectorName ];
+ if ( ! resolver || ! resolver.shouldInvalidate ) {
+ return;
+ }
+ resolversByArgs.forEach( ( value, args ) => {
+ // Works around a bug in `EquivalentKeyMap` where `map.delete` merely sets an entry value
+ // to `undefined` and `map.forEach` then iterates also over these orphaned entries.
+ if ( value === undefined ) {
return;
}
- resolversByArgs.forEach( ( value, args ) => {
- // resolversByArgs is the map Map([ args ] => boolean) storing the cache resolution status for a given selector.
- // If the value is "finished" or "error" it means this resolver has finished its resolution which means we need
- // to invalidate it, if it's true it means it's inflight and the invalidation is not necessary.
- if (
- ( value?.status !== 'finished' &&
- value?.status !== 'error' ) ||
- ! resolver.shouldInvalidate( action, ...args )
- ) {
- return;
- }
- // Trigger cache invalidation
- registry
- .dispatch( coreDataStore )
- .invalidateResolution( reducerKey, selectorName, args );
- } );
- }
- );
+ // resolversByArgs is the map Map([ args ] => boolean) storing the cache resolution status for a given selector.
+ // If the value is "finished" or "error" it means this resolver has finished its resolution which means we need
+ // to invalidate it, if it's true it means it's inflight and the invalidation is not necessary.
+ if ( value.status !== 'finished' && value.status !== 'error' ) {
+ return;
+ }
+
+ if ( ! resolver.shouldInvalidate( action, ...args ) ) {
+ return;
+ }
+
+ // Trigger cache invalidation
+ registry
+ .dispatch( storeName )
+ .invalidateResolution( selectorName, args );
+ } );
+ } );
return next( action );
};
diff --git a/packages/dependency-extraction-webpack-plugin/README.md b/packages/dependency-extraction-webpack-plugin/README.md
index 0885a38e1c8251..eac1e8e27ffc5c 100644
--- a/packages/dependency-extraction-webpack-plugin/README.md
+++ b/packages/dependency-extraction-webpack-plugin/README.md
@@ -62,13 +62,13 @@ For example:
```
// Source file entrypoint.js
-import { Component } from '@wordpress/element';
+import { Component } from 'react';
// Webpack will produce the output output/entrypoint.js
/* bundled JavaScript output */
// Webpack will also produce output/entrypoint.asset.php declaring script dependencies
-<?php return array('dependencies' => array('wp-element'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
+<?php return array('dependencies' => array('react'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
```
By default, the following module requests are handled:
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index ac637eb33fbb2f..47dd1a0b7adf4c 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -3,6 +3,7 @@ const BUNDLED_PACKAGES = [
'@wordpress/icons',
'@wordpress/interface',
'@wordpress/undo-manager',
+ '@wordpress/sync',
];
/**
diff --git a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
index 6c45c378bf772f..254950316e4963 100644
--- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DependencyExtractionWebpackPlugin Webpack \`combine-assets\` should produce expected output: Asset file 'assets.php' should match snapshot 1`] = `
-"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'cbe985cf6e1a25d848e5'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '7f3970305cf0aecb54ab'));
+"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => '52d35a0af8a5fb869915'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '0af6c51a8e6ac934b85a'));
"
`;
@@ -32,7 +32,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`combine-assets\` should pro
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob'), 'version' => '0627f8793e7cd59541db');
+"<?php return array('dependencies' => array('wp-blob'), 'version' => '47f8a22aa6c04c930f5f');
"
`;
@@ -50,7 +50,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`dynamic-import\` should pro
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'fc2d750fc9e08c5749db');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '35d057cb1c8a30094445');
"
`;
@@ -73,7 +73,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`function-output-filename\`
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`has-extension-suffix\` should produce expected output: Asset file 'index.min.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c3f17b34fdd974d57d0f');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '27e49c80f699647ec11c');
"
`;
@@ -96,21 +96,21 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`has-extension-suffix\` shou
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`no-default\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => '43880e6c42e7c39fcdf1');
+"<?php return array('dependencies' => array(), 'version' => 'cdc72dbcdf872f6141c7');
"
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `[]`;
exports[`DependencyExtractionWebpackPlugin Webpack \`no-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => '143ed23d4b8be5611fcb');
+"<?php return array('dependencies' => array(), 'version' => '091ffcd70d94dd16e773');
"
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `[]`;
exports[`DependencyExtractionWebpackPlugin Webpack \`option-function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'fc2d750fc9e08c5749db');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '35d057cb1c8a30094445');
"
`;
@@ -133,7 +133,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`option-function-output-file
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`option-output-filename\` should produce expected output: Asset file 'main-foo.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'fc2d750fc9e08c5749db');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '35d057cb1c8a30094445');
"
`;
@@ -155,7 +155,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`option-output-filename\` sh
]
`;
-exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{"dependencies":["lodash"],"version":"7bd48470d799a795bf9a"}"`;
+exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{"dependencies":["lodash"],"version":"abdb687afe609197ad7e"}"`;
exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
[
@@ -168,7 +168,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`overrides\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '708c71445153f1d07e4a');
+"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '2a29b245fc3d0509b5a8');
"
`;
@@ -207,17 +207,17 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`overrides\` should produce
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob'), 'version' => 'd3cda564b538b44d38ef');
+"<?php return array('dependencies' => array('wp-blob'), 'version' => '4514ed711f6c035e0887');
"
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'b.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '420d636da562e71648f7');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '168d32b5fb42f9e5d8ce');
"
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'runtime.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => '5fa1791a041e1b19555f');
+"<?php return array('dependencies' => array(), 'version' => 'b4058959bcd0df37cd79');
"
`;
@@ -240,7 +240,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` shou
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`style-imports\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '4c661914a4e4d80b8a0b');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'beb3f6752168c2983cdd');
"
`;
@@ -263,7 +263,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`style-imports\` should prod
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'fc2d750fc9e08c5749db');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '35d057cb1c8a30094445');
"
`;
@@ -286,7 +286,7 @@ exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress\` should produce
`;
exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress-require\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '40370eb4ce6428562da6');
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'ed2bd4e7df46768bb3c2');
"
`;
diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
index 327aa5877b2cd8..a545bdc704341c 100644
--- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
@@ -13,7 +13,7 @@ export interface SiteEditorQueryParams {
postType: string;
}
-const CANVAS_SELECTOR = 'iframe[title="Editor canvas"i]';
+const CANVAS_SELECTOR = 'iframe[title="Editor canvas"i] >> visible=true';
/**
* Visits the Site Editor main page
@@ -55,13 +55,16 @@ export async function visitSiteEditor(
} );
}
- // The site editor initially loads with an empty body,
- // we need to wait for the editor canvas to be rendered.
- await this.page
- .frameLocator( CANVAS_SELECTOR )
- .locator( 'body > *' )
- .first()
- .waitFor();
+ // Check if the current page has an editor canvas first.
+ if ( ( await this.page.locator( CANVAS_SELECTOR ).count() ) > 0 ) {
+ // The site editor initially loads with an empty body,
+ // we need to wait for the editor canvas to be rendered.
+ await this.page
+ .frameLocator( CANVAS_SELECTOR )
+ .locator( 'body > *' )
+ .first()
+ .waitFor();
+ }
// TODO: Ideally the content underneath the canvas loader should be marked inert until it's ready.
await this.page
diff --git a/packages/e2e-test-utils-playwright/src/config.ts b/packages/e2e-test-utils-playwright/src/config.ts
index 87c905d43f5457..664f0dbf6fa9c2 100644
--- a/packages/e2e-test-utils-playwright/src/config.ts
+++ b/packages/e2e-test-utils-playwright/src/config.ts
@@ -1,12 +1,12 @@
-const WP_ADMIN_USER = {
- username: 'admin',
- password: 'password',
-} as const;
-
const {
- WP_USERNAME = WP_ADMIN_USER.username,
- WP_PASSWORD = WP_ADMIN_USER.password,
+ WP_USERNAME = 'admin',
+ WP_PASSWORD = 'password',
WP_BASE_URL = 'http://localhost:8889',
} = process.env;
+const WP_ADMIN_USER = {
+ username: WP_USERNAME,
+ password: WP_PASSWORD,
+} as const;
+
export { WP_ADMIN_USER, WP_USERNAME, WP_PASSWORD, WP_BASE_URL };
diff --git a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
index 70a5a03628ee05..f5adb295a00a55 100644
--- a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
@@ -3,25 +3,49 @@
*/
import type { Editor } from './index';
+type Block = {
+ name: string;
+ attributes: Record< string, unknown >;
+ innerBlocks: Block[];
+};
+
/**
* Returns the edited blocks.
*
* @param this
+ * @param options
+ * @param options.full Whether to return the full block data or just the name and attributes.
*
* @return The blocks.
*/
-export async function getBlocks( this: Editor ) {
- return await this.page.evaluate( () => {
- const blocks = window.wp.data.select( 'core/block-editor' ).getBlocks();
+export async function getBlocks( this: Editor, { full = false } = {} ) {
+ return await this.page.evaluate(
+ ( [ _full ] ) => {
+ // Remove other unpredictable properties like clientId from blocks for testing purposes.
+ function recursivelyTransformBlocks( blocks: Block[] ): Block[] {
+ return blocks.map( ( block ) => ( {
+ name: block.name,
+ attributes: block.attributes,
+ innerBlocks: recursivelyTransformBlocks(
+ block.innerBlocks
+ ),
+ } ) );
+ }
+
+ const blocks = window.wp.data
+ .select( 'core/block-editor' )
+ .getBlocks();
- // The editor might still contain an unmodified empty block even when it's technically "empty".
- if (
- blocks.length === 1 &&
- window.wp.blocks.isUnmodifiedDefaultBlock( blocks[ 0 ] )
- ) {
- return [];
- }
+ // The editor might still contain an unmodified empty block even when it's technically "empty".
+ if (
+ blocks.length === 1 &&
+ window.wp.blocks.isUnmodifiedDefaultBlock( blocks[ 0 ] )
+ ) {
+ return [];
+ }
- return blocks;
- } );
+ return _full ? blocks : recursivelyTransformBlocks( blocks );
+ },
+ [ full ]
+ );
}
diff --git a/packages/e2e-test-utils-playwright/src/lighthouse/index.ts b/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
index 274799db6c9c22..0ba2c8e67ba610 100644
--- a/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
+++ b/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
@@ -4,11 +4,16 @@
import type { Page } from '@playwright/test';
import * as lighthouse from 'lighthouse/core/index.cjs';
+type LighthouseConstructorProps = {
+ page: Page;
+ port: number;
+};
+
export class Lighthouse {
- constructor(
- public readonly page: Page,
- public readonly port: number
- ) {
+ page: Page;
+ port: number;
+
+ constructor( { page, port }: LighthouseConstructorProps ) {
this.page = page;
this.port = port;
}
diff --git a/packages/e2e-test-utils-playwright/src/metrics/index.ts b/packages/e2e-test-utils-playwright/src/metrics/index.ts
index d90a2f34fc5106..68343f6d7c4829 100644
--- a/packages/e2e-test-utils-playwright/src/metrics/index.ts
+++ b/packages/e2e-test-utils-playwright/src/metrics/index.ts
@@ -1,11 +1,46 @@
/**
* External dependencies
*/
-import type { Page } from '@playwright/test';
+import type { Page, Browser } from '@playwright/test';
+
+type EventType =
+ | 'click'
+ | 'focus'
+ | 'focusin'
+ | 'keydown'
+ | 'keypress'
+ | 'keyup'
+ | 'mouseout'
+ | 'mouseover';
+
+interface TraceEvent {
+ cat: string;
+ name: string;
+ dur?: number;
+ args: {
+ data?: {
+ type: EventType;
+ };
+ };
+}
+
+interface Trace {
+ traceEvents: TraceEvent[];
+}
+
+type MetricsConstructorProps = {
+ page: Page;
+};
export class Metrics {
- constructor( public readonly page: Page ) {
+ browser: Browser;
+ page: Page;
+ trace: Trace;
+
+ constructor( { page }: MetricsConstructorProps ) {
this.page = page;
+ this.browser = page.context().browser()!;
+ this.trace = { traceEvents: [] };
}
/**
@@ -38,10 +73,10 @@ export class Metrics {
*
* @see https://web.dev/ttfb/#measure-ttfb-in-javascript
*
- * @return {Promise<number>} TTFB value.
+ * @return TTFB value.
*/
async getTimeToFirstByte() {
- return this.page.evaluate< number >( () => {
+ return await this.page.evaluate< number >( () => {
const { responseStart, startTime } = (
performance.getEntriesByType(
'navigation'
@@ -57,10 +92,10 @@ export class Metrics {
* @see https://w3c.github.io/largest-contentful-paint/
* @see https://web.dev/lcp/#measure-lcp-in-javascript
*
- * @return {Promise<number>} LCP value.
+ * @return LCP value.
*/
async getLargestContentfulPaint() {
- return this.page.evaluate< number >(
+ return await this.page.evaluate< number >(
() =>
new Promise( ( resolve ) => {
new PerformanceObserver( ( entryList ) => {
@@ -83,10 +118,10 @@ export class Metrics {
* @see https://github.com/WICG/layout-instability
* @see https://web.dev/cls/#measure-layout-shifts-in-javascript
*
- * @return {Promise<number>} CLS value.
+ * @return CLS value.
*/
async getCumulativeLayoutShift() {
- return this.page.evaluate< number >(
+ return await this.page.evaluate< number >(
() =>
new Promise( ( resolve ) => {
let CLS = 0;
@@ -108,4 +143,134 @@ export class Metrics {
} )
);
}
+
+ /**
+ * Returns the loading durations using the Navigation Timing API. All the
+ * durations exclude the server response time.
+ *
+ * @return Object with loading metrics durations.
+ */
+ async getLoadingDurations() {
+ return await this.page.evaluate( () => {
+ const [
+ {
+ requestStart,
+ responseStart,
+ responseEnd,
+ domContentLoadedEventEnd,
+ loadEventEnd,
+ },
+ ] = performance.getEntriesByType(
+ 'navigation'
+ ) as PerformanceNavigationTiming[];
+ const paintTimings = performance.getEntriesByType(
+ 'paint'
+ ) as PerformancePaintTiming[];
+
+ const firstPaintStartTime = paintTimings.find(
+ ( { name } ) => name === 'first-paint'
+ )!.startTime;
+
+ const firstContentfulPaintStartTime = paintTimings.find(
+ ( { name } ) => name === 'first-contentful-paint'
+ )!.startTime;
+
+ return {
+ // Server side metric.
+ serverResponse: responseStart - requestStart,
+ // For client side metrics, consider the end of the response (the
+ // browser receives the HTML) as the start time (0).
+ firstPaint: firstPaintStartTime - responseEnd,
+ domContentLoaded: domContentLoadedEventEnd - responseEnd,
+ loaded: loadEventEnd - responseEnd,
+ firstContentfulPaint:
+ firstContentfulPaintStartTime - responseEnd,
+ timeSinceResponseEnd: performance.now() - responseEnd,
+ };
+ } );
+ }
+
+ /**
+ * Starts Chromium tracing with predefined options for performance testing.
+ *
+ * @param options Options to pass to `browser.startTracing()`.
+ */
+ async startTracing( options = {} ) {
+ return await this.browser.startTracing( this.page, {
+ screenshots: false,
+ categories: [ 'devtools.timeline' ],
+ ...options,
+ } );
+ }
+
+ /**
+ * Stops Chromium tracing and saves the trace.
+ */
+ async stopTracing() {
+ const traceBuffer = await this.browser.stopTracing();
+ const traceJSON = JSON.parse( traceBuffer.toString() );
+
+ this.trace = traceJSON;
+ }
+
+ /**
+ * @return Durations of all traced `keydown`, `keypress`, and `keyup`
+ * events.
+ */
+ getTypingEventDurations() {
+ return [
+ this.getEventDurations( 'keydown' ),
+ this.getEventDurations( 'keypress' ),
+ this.getEventDurations( 'keyup' ),
+ ];
+ }
+
+ /**
+ * @return Durations of all traced `focus` and `focusin` events.
+ */
+ getSelectionEventDurations() {
+ return [
+ this.getEventDurations( 'focus' ),
+ this.getEventDurations( 'focusin' ),
+ ];
+ }
+
+ /**
+ * @return Durations of all traced `click` events.
+ */
+ getClickEventDurations() {
+ return [ this.getEventDurations( 'click' ) ];
+ }
+
+ /**
+ * @return Durations of all traced `mouseover` and `mouseout` events.
+ */
+ getHoverEventDurations() {
+ return [
+ this.getEventDurations( 'mouseover' ),
+ this.getEventDurations( 'mouseout' ),
+ ];
+ }
+
+ /**
+ * @param eventType Type of event to filter.
+ * @return Durations of all events of a given type.
+ */
+ getEventDurations( eventType: EventType ) {
+ if ( this.trace.traceEvents.length === 0 ) {
+ throw new Error(
+ 'No trace events found. Did you forget to call stopTracing()?'
+ );
+ }
+
+ return this.trace.traceEvents
+ .filter(
+ ( item: TraceEvent ): boolean =>
+ item.cat === 'devtools.timeline' &&
+ item.name === 'EventDispatch' &&
+ item?.args?.data?.type === eventType &&
+ !! item.dur
+ )
+ .map( ( item ) => ( item.dur ? item.dur / 1000 : 0 ) );
+ }
}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/blocks.js b/packages/e2e-test-utils-playwright/src/request-utils/blocks.js
deleted file mode 100644
index 82f011c3f750e3..00000000000000
--- a/packages/e2e-test-utils-playwright/src/request-utils/blocks.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Delete all blocks using REST API.
- *
- * @see https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
- * @this {import('./index').RequestUtils}
- */
-export async function deleteAllBlocks() {
- // List all blocks.
- // https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
- const blocks = await this.rest( {
- path: '/wp/v2/blocks',
- params: {
- per_page: 100,
- // All possible statuses.
- status: 'publish,future,draft,pending,private,trash',
- },
- } );
-
- // Delete blocks.
- // https://developer.wordpress.org/rest-api/reference/blocks/#delete-a-editor-block
- // "/wp/v2/posts" not yet supports batch requests.
- await this.batchRest(
- blocks.map( ( block ) => ( {
- method: 'DELETE',
- path: `/wp/v2/blocks/${ block.id }?force=true`,
- } ) )
- );
-}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts b/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts
new file mode 100644
index 00000000000000..e954703578f00e
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts
@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+type CreateBlockPayload = {
+ date?: string;
+ date_gmt?: string;
+ slug?: string;
+ title: string;
+ status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+ content?: string;
+ meta?: unknown;
+ wp_pattern_category?: number[];
+};
+
+/**
+ * Delete all blocks using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
+ * @param this
+ */
+export async function deleteAllBlocks( this: RequestUtils ) {
+ // List all blocks.
+ // https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
+ const blocks = await this.rest( {
+ path: '/wp/v2/blocks',
+ params: {
+ per_page: 100,
+ // All possible statuses.
+ status: 'publish,future,draft,pending,private,trash',
+ },
+ } );
+
+ // Delete blocks.
+ // https://developer.wordpress.org/rest-api/reference/blocks/#delete-a-editor-block
+ // "/wp/v2/posts" not yet supports batch requests.
+ await this.batchRest(
+ blocks.map( ( block: { id: number } ) => ( {
+ method: 'DELETE',
+ path: `/wp/v2/blocks/${ block.id }?force=true`,
+ } ) )
+ );
+}
+
+/**
+ * Creates a new block using the REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/blocks/#create-a-editor-block.
+ * @param this
+ * @param payload Block payload.
+ */
+export async function createBlock(
+ this: RequestUtils,
+ payload: CreateBlockPayload
+) {
+ const block = await this.rest( {
+ path: '/wp/v2/blocks',
+ method: 'POST',
+ data: { ...payload },
+ } );
+
+ return block;
+}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/index.ts b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
index 99a11bf9956791..a82cef68f2f154 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
@@ -22,7 +22,7 @@ import {
getCurrentThemeGlobalStylesPostId,
getThemeGlobalStylesRevisions,
} from './themes';
-import { deleteAllBlocks } from './blocks';
+import { createBlock, deleteAllBlocks } from './blocks';
import { createComment, deleteAllComments } from './comments';
import { createPost, deleteAllPosts } from './posts';
import {
@@ -35,6 +35,7 @@ import { deleteAllPages, createPage } from './pages';
import { resetPreferences } from './preferences';
import { getSiteSettings, updateSiteSettings } from './site-settings';
import { deleteAllWidgets, addWidgetBlock } from './widgets';
+import { deleteAllPatternCategories } from './patterns';
interface StorageState {
cookies: Cookie[];
@@ -140,6 +141,8 @@ class RequestUtils {
deactivatePlugin: typeof deactivatePlugin = deactivatePlugin.bind( this );
/** @borrows activateTheme as this.activateTheme */
activateTheme: typeof activateTheme = activateTheme.bind( this );
+ /** @borrows createBlock as this.createBlock */
+ createBlock: typeof createBlock = createBlock.bind( this );
/** @borrows deleteAllBlocks as this.deleteAllBlocks */
deleteAllBlocks = deleteAllBlocks.bind( this );
/** @borrows createPost as this.createPost */
@@ -198,6 +201,8 @@ class RequestUtils {
/** @borrows getThemeGlobalStylesRevisions as this.getThemeGlobalStylesRevisions */
getThemeGlobalStylesRevisions: typeof getThemeGlobalStylesRevisions =
getThemeGlobalStylesRevisions.bind( this );
+ /** @borrows deleteAllPatternCategories as this.deleteAllPatternCategories */
+ deleteAllPatternCategories = deleteAllPatternCategories.bind( this );
}
export type { StorageState };
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/patterns.ts b/packages/e2e-test-utils-playwright/src/request-utils/patterns.ts
new file mode 100644
index 00000000000000..ea1e24c9c7aeaf
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/patterns.ts
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+/**
+ * Delete all pattern categories using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+ * @param this
+ */
+export async function deleteAllPatternCategories( this: RequestUtils ) {
+ // List all pattern categories.
+ // https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+ const categories = await this.rest( {
+ path: '/wp/v2/wp_pattern_category',
+ params: {
+ per_page: 100,
+ },
+ } );
+
+ // Delete pattern categories.
+ // https://developer.wordpress.org/rest-api/reference/categories/#delete-a-category
+ // "/wp/v2/category" does not yet supports batch requests.
+ await this.batchRest(
+ categories.map( ( category: { id: number } ) => ( {
+ method: 'DELETE',
+ path: `/wp/v2/wp_pattern_category/${ category.id }?force=true`,
+ } ) )
+ );
+}
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index c428df46c56f1b..778f71b6d770e1 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -176,10 +176,10 @@ const test = base.extend<
{ scope: 'worker' },
],
lighthouse: async ( { page, lighthousePort }, use ) => {
- await use( new Lighthouse( page, lighthousePort ) );
+ await use( new Lighthouse( { page, port: lighthousePort } ) );
},
metrics: async ( { page }, use ) => {
- await use( new Metrics( page ) );
+ await use( new Metrics( { page } ) );
},
} );
diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js
index ed756353310dd9..0b2e327a5c05c2 100644
--- a/packages/e2e-test-utils/src/create-reusable-block.js
+++ b/packages/e2e-test-utils/src/create-reusable-block.js
@@ -34,7 +34,7 @@ export const createReusableBlock = async ( content, title ) => {
// Wait for creation to finish
await page.waitForXPath(
- '//*[contains(@class, "components-snackbar")]/*[contains(text(),"Pattern created:")]'
+ '//*[contains(@class, "components-snackbar")]/*[contains(text(),"pattern created:")]'
);
// Check that we have a reusable block on the page
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index cd9bdaa2833458..5bf620276060c5 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -34,7 +34,7 @@
"jest-message-util": "^29.6.2",
"jest-snapshot": "^29.6.2",
"puppeteer-testing-library": "^0.5.0",
- "uuid": "^8.3.0"
+ "uuid": "^9.0.1"
},
"peerDependencies": {
"jest": ">=29",
diff --git a/packages/e2e-tests/plugins/iframed-inline-styles.php b/packages/e2e-tests/plugins/iframed-inline-styles.php
index 0f8c69e1073337..ef3484e1a6498f 100644
--- a/packages/e2e-tests/plugins/iframed-inline-styles.php
+++ b/packages/e2e-tests/plugins/iframed-inline-styles.php
@@ -7,13 +7,6 @@
* @package gutenberg-test-iframed-inline-styles
*/
-add_action(
- 'setup_theme',
- static function () {
- add_theme_support( 'block-templates' );
- }
-);
-
add_action(
'init',
static function () {
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block.php b/packages/e2e-tests/plugins/iframed-masonry-block.php
index ebfbdb6b1257ec..51109bbbfb8195 100644
--- a/packages/e2e-tests/plugins/iframed-masonry-block.php
+++ b/packages/e2e-tests/plugins/iframed-masonry-block.php
@@ -7,13 +7,6 @@
* @package gutenberg-test-iframed-masonry-block
*/
-add_action(
- 'setup_theme',
- static function () {
- add_theme_support( 'block-templates' );
- }
-);
-
add_action(
'init',
static function () {
diff --git a/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php b/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php
index 6a4505ed065228..06e0125e2ac0c9 100644
--- a/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php
+++ b/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php
@@ -7,13 +7,6 @@
* @package gutenberg-test-iframed-multiple-stylesheets
*/
-add_action(
- 'setup_theme',
- static function () {
- add_theme_support( 'block-templates' );
- }
-);
-
add_action(
'init',
static function () {
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap
deleted file mode 100644
index 49823edc5b1ea5..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`iframed inline styles should load inline styles in iframe 1`] = `
-"<!-- wp:test/iframed-inline-styles -->
-<div class="wp-block-test-iframed-inline-styles">Save</div>
-<!-- /wp:test/iframed-inline-styles -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap
deleted file mode 100644
index a37b33cdc3f410..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`iframed masonry block should load script and dependencies in iframe 1`] = `
-"<!-- wp:test/iframed-masonry-block -->
-<div class="wp-block-test-iframed-masonry-block"><div class="grid-item"></div><div class="grid-item grid-item--width2 grid-item--height2"></div><div class="grid-item grid-item--height3"></div><div class="grid-item grid-item--height2"></div><div class="grid-item grid-item--width3"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div><div class="grid-item grid-item--width2 grid-item--height3"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div><div class="grid-item"></div><div class="grid-item grid-item--width2 grid-item--height2"></div><div class="grid-item grid-item--width2"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item grid-item--height3"></div><div class="grid-item grid-item--height2"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item grid-item--height2"></div></div>
-<!-- /wp:test/iframed-masonry-block -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js
deleted file mode 100644
index df6eb4bf840328..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- activatePlugin,
- createNewPost,
- deactivatePlugin,
- canvas,
- activateTheme,
-} from '@wordpress/e2e-test-utils';
-
-async function getComputedStyle( context, selector, property ) {
- return await context.evaluate(
- ( sel, prop ) =>
- window.getComputedStyle( document.querySelector( sel ) )[ prop ],
- selector,
- property
- );
-}
-
-describe( 'iframed block editor settings styles', () => {
- beforeEach( async () => {
- // Activate the empty theme (block based theme), which is iframed.
- await activateTheme( 'emptytheme' );
- await activatePlugin(
- 'gutenberg-test-iframed-enqueue-block-editor-settings'
- );
- await createNewPost();
- } );
-
- afterEach( async () => {
- await deactivatePlugin(
- 'gutenberg-test-iframed-enqueue-block-editor-settings'
- );
- await activateTheme( 'twentytwentyone' );
- } );
-
- it( 'should load styles added through block editor settings', async () => {
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
- // Expect a red border (added in PHP).
- expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe(
- 'rgb(255, 0, 0)'
- );
-
- await page.evaluate( () => {
- const settings = window.wp.data
- .select( 'core/editor' )
- .getEditorSettings();
- wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
- ...settings,
- styles: [
- ...settings.styles,
- {
- css: 'p { border-width: 2px; }',
- __unstableType: 'plugin',
- },
- ],
- } );
- } );
-
- // Expect a 2px border (added in JS).
- expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
- '2px'
- );
- } );
-
- it( 'should load theme styles added through block editor settings', async () => {
- await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-
- await page.evaluate( () => {
- // Make sure that theme styles are added even if the theme styles
- // preference is off.
- window.wp.data
- .dispatch( 'core/edit-post' )
- .toggleFeature( 'themeStyles' );
- const settings = window.wp.data
- .select( 'core/editor' )
- .getEditorSettings();
- wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
- ...settings,
- styles: [
- ...settings.styles,
- {
- css: 'p { border-width: 2px; }',
- __unstableType: 'theme',
- },
- ],
- } );
- } );
-
- // Expect a 1px border because theme styles are disabled.
- expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
- '1px'
- );
-
- await page.evaluate( () => {
- // Now enable theme styles.
- window.wp.data
- .dispatch( 'core/edit-post' )
- .toggleFeature( 'themeStyles' );
- } );
-
- // Expect a 2px border because theme styles are enabled.
- expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
- '2px'
- );
- } );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
deleted file mode 100644
index eafc0b1f48b614..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- activatePlugin,
- createNewPost,
- deactivatePlugin,
- insertBlock,
- getEditedPostContent,
- canvas,
- createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-async function getComputedStyle( context, property ) {
- await context.waitForSelector( '.wp-block-test-iframed-inline-styles' );
- return await context.evaluate( ( prop ) => {
- const container = document.querySelector(
- '.wp-block-test-iframed-inline-styles'
- );
- return window.getComputedStyle( container )[ prop ];
- }, property );
-}
-
-describe( 'iframed inline styles', () => {
- beforeEach( async () => {
- await activatePlugin( 'gutenberg-test-iframed-inline-styles' );
- await createNewPost( { postType: 'page' } );
- } );
-
- afterEach( async () => {
- await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
- } );
-
- it( 'should load inline styles in iframe', async () => {
- await insertBlock( 'Iframed Inline Styles' );
-
- expect( await getEditedPostContent() ).toMatchSnapshot();
- expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
- expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
- '2px'
- );
-
- await createNewTemplate( 'Iframed Test' );
-
- // Inline styles of properly enqueued stylesheet should load.
- expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
-
- // Inline styles of stylesheet loaded with the compatibility layer
- // should load.
- expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
- '2px'
- );
-
- expect( console ).toHaveWarned();
- } );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js
deleted file mode 100644
index 503beeb92e1642..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- activatePlugin,
- createNewPost,
- deactivatePlugin,
- insertBlock,
- getEditedPostContent,
- canvas,
- createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-async function didMasonryLoadCorrectly( context ) {
- return await context.evaluate( () => {
- const container = document.querySelector(
- '.wp-block-test-iframed-masonry-block'
- );
- return (
- // Expect Masonry to set a non-zero height.
- parseInt( container.style.height, 10 ) > 0 &&
- // Expect Masonry to absolute position items.
- container.firstElementChild.style.position === 'absolute'
- );
- } );
-}
-
-describe( 'iframed masonry block', () => {
- beforeEach( async () => {
- await activatePlugin( 'gutenberg-test-iframed-masonry-block' );
- await createNewPost( { postType: 'page' } );
- } );
-
- afterEach( async () => {
- await deactivatePlugin( 'gutenberg-test-iframed-masonry-block' );
- } );
-
- it( 'should load script and dependencies in iframe', async () => {
- await insertBlock( 'Iframed Masonry Block' );
-
- expect( await getEditedPostContent() ).toMatchSnapshot();
- expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
-
- await createNewTemplate( 'Iframed Test' );
- await canvas().waitForSelector( '.grid-item[style]' );
-
- expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
- } );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js
deleted file mode 100644
index 23058b48b8da43..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- activatePlugin,
- createNewPost,
- deactivatePlugin,
- insertBlock,
- canvas,
- createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-async function getComputedStyle( context, property ) {
- await context.waitForSelector(
- '.wp-block-test-iframed-multiple-stylesheets'
- );
- return await context.evaluate( ( prop ) => {
- const container = document.querySelector(
- '.wp-block-test-iframed-multiple-stylesheets'
- );
- return window.getComputedStyle( container )[ prop ];
- }, property );
-}
-
-describe( 'iframed multiple block stylesheets', () => {
- beforeEach( async () => {
- await activatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
- await createNewPost( { postType: 'page' } );
- } );
-
- afterEach( async () => {
- await deactivatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
- } );
-
- it( 'should load multiple block stylesheets in iframe', async () => {
- await insertBlock( 'Iframed Multiple Stylesheets' );
-
- await canvas().waitForSelector(
- '.wp-block-test-iframed-multiple-stylesheets'
- );
- await createNewTemplate( 'Iframed Test' );
-
- // Style loaded from the main stylesheet.
- expect( await getComputedStyle( canvas(), 'border-style' ) ).toBe(
- 'dashed'
- );
-
- // Style loaded from the additional stylesheet.
- expect( await getComputedStyle( canvas(), 'border-color' ) ).toBe(
- 'rgb(255, 0, 0)'
- );
-
- // Style loaded from the a stylesheet using path instead of handle.
- expect( await getComputedStyle( canvas(), 'background-color' ) ).toBe(
- 'rgb(0, 0, 0)'
- );
- } );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap
deleted file mode 100644
index d619d310d5c296..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Order of block keyboard navigation should navigate correctly with multi selection 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>4</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js
index 32e51150945330..62057c4cbb2bc0 100644
--- a/packages/e2e-tests/specs/editor/various/change-detection.test.js
+++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js
@@ -349,6 +349,7 @@ describe( 'Change detection', () => {
// Trash post.
await openDocumentSettingsSidebar();
await page.click( '.editor-post-trash.components-button' );
+ await page.click( '.components-confirm-dialog .is-primary' );
await Promise.all( [
// Wait for "Saved" to confirm save complete.
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index bed9002e303a20..4285a410f891e5 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -249,7 +249,7 @@ describe( 'Inserting blocks', () => {
await page.keyboard.type( 'First paragraph' );
await insertBlock( 'Image' );
const paragraphBlock = await canvas().$(
- 'p[aria-label="Paragraph block"]'
+ 'p[aria-label="Block: Paragraph"]'
);
paragraphBlock.click();
await page.evaluate( () => new Promise( window.requestIdleCallback ) );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
deleted file mode 100644
index b3dccdf8bf20ad..00000000000000
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- createNewPost,
- insertBlock,
- pressKeyWithModifier,
- clickBlockAppender,
- getEditedPostContent,
- showBlockToolbar,
- canvas,
-} from '@wordpress/e2e-test-utils';
-
-async function getActiveLabel() {
- return await page.evaluate( () => {
- const { activeElement } =
- document.activeElement.contentDocument ?? document;
- return (
- activeElement.getAttribute( 'aria-label' ) ||
- activeElement.innerHTML
- );
- } );
-}
-
-const navigateToContentEditorTop = async () => {
- // Use 'Ctrl+`' to return to the top of the editor.
- await pressKeyWithModifier( 'ctrl', '`' );
- await pressKeyWithModifier( 'ctrl', '`' );
- await pressKeyWithModifier( 'ctrl', '`' );
- await pressKeyWithModifier( 'ctrl', '`' );
- await pressKeyWithModifier( 'ctrl', '`' );
-};
-
-const tabThroughParagraphBlock = async ( paragraphText ) => {
- await tabThroughBlockToolbar();
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
- await expect(
- await page.evaluate( () => {
- const { activeElement } =
- document.activeElement.contentDocument ?? document;
- return activeElement.innerHTML;
- } )
- ).toBe( paragraphText );
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Open document settings' );
-
- // Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
-};
-
-const tabThroughBlockToolbar = async () => {
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Paragraph' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Move up' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Move down' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Align text' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Bold' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Italic' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Link' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'More' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Options' );
-
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Paragraph' );
-};
-
-describe( 'Order of block keyboard navigation', () => {
- beforeEach( async () => {
- await createNewPost();
- } );
-
- it( 'permits tabbing through paragraph blocks in the expected order', async () => {
- const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
- // Create 3 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await insertBlock( 'Paragraph' );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Select the middle block.
- await page.keyboard.press( 'ArrowUp' );
- await showBlockToolbar();
- await navigateToContentEditorTop();
- await tabThroughParagraphBlock( 'Paragraph 1' );
-
- // Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
- // This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
- await navigateToContentEditorTop();
- await tabThroughParagraphBlock( 'Paragraph 1' );
- } );
-
- it( 'allows tabbing in navigation mode if no block is selected', async () => {
- const paragraphBlocks = [ '0', '1' ];
-
- // Create 2 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await insertBlock( 'Paragraph' );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Clear the selected block.
- const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
- const box = await paragraph.boundingBox();
- await page.mouse.click( box.x - 1, box.y );
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Add title' );
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe(
- 'Paragraph Block. Row 1. 0'
- );
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe(
- 'Paragraph Block. Row 2. 1'
- );
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Open document settings' );
- } );
-
- it( 'allows tabbing in navigation mode if no block is selected (reverse)', async () => {
- const paragraphBlocks = [ '0', '1' ];
-
- // Create 2 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await insertBlock( 'Paragraph' );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Clear the selected block.
- const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
- const box = await paragraph.boundingBox();
- await page.mouse.click( box.x - 1, box.y );
-
- // Put focus behind the block list.
- await page.evaluate( () => {
- document
- .querySelector( '.interface-interface-skeleton__sidebar' )
- .focus();
- } );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Add block' );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Add default block' );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe(
- 'Paragraph Block. Row 2. 1'
- );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe(
- 'Paragraph Block. Row 1. 0'
- );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Add title' );
- } );
-
- it( 'should navigate correctly with multi selection', async () => {
- await clickBlockAppender();
- await page.keyboard.type( '1' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( '2' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( '3' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( '4' );
- await page.keyboard.press( 'ArrowUp' );
- await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
- expect( await getEditedPostContent() ).toMatchSnapshot();
-
- expect( await getActiveLabel() ).toBe( 'Multiple selected blocks' );
-
- await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Post' );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await expect( await getActiveLabel() ).toBe(
- 'Multiple selected blocks'
- );
-
- await pressKeyWithModifier( 'shift', 'Tab' );
- await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Move up' );
- } );
-
- it( 'allows the first element within a block to receive focus', async () => {
- // Insert a image block.
- await insertBlock( 'Image' );
-
- // Make sure the upload button has focus.
- const uploadButton = await canvas().waitForXPath(
- '//button[contains( text(), "Upload" ) ]'
- );
- await expect( uploadButton ).toHaveFocus();
-
- // Try to focus the image block wrapper.
- await page.keyboard.press( 'ArrowUp' );
- await expect( await getActiveLabel() ).toBe( 'Block: Image' );
- } );
-
- it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
- // Insert a group block.
- await insertBlock( 'Group' );
- // Select the default, selected Group layout from the variation picker.
- await canvas().click(
- 'button[aria-label="Group: Gather blocks in a container."]'
- );
- // If active label matches, that means focus did not change from group block wrapper.
- await expect( await getActiveLabel() ).toBe( 'Block: Group' );
- } );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js b/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
index 72f11f2c95e7a4..442ed2b21915a5 100644
--- a/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
@@ -136,7 +136,7 @@ describe( 'Pattern blocks', () => {
);
// Make sure the reusable block has loaded properly before attempting to publish the post.
- await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+ await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
await publishPost();
@@ -146,8 +146,8 @@ describe( 'Pattern blocks', () => {
await page.waitForSelector( closePublishPanelSelector );
await page.click( closePublishPanelSelector );
- await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
- await canvas().focus( 'p[aria-label="Paragraph block"]' );
+ await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
+ await canvas().focus( 'p[aria-label="Block: Paragraph"]' );
// Change the block's content.
await page.keyboard.type( 'Einen ' );
@@ -157,7 +157,7 @@ describe( 'Pattern blocks', () => {
// Check that its content is up to date.
const paragraphContent = await canvas().$eval(
- 'p[aria-label="Paragraph block"]',
+ 'p[aria-label="Block: Paragraph"]',
( element ) => element.innerText
);
expect( paragraphContent ).toMatch( 'Einen Guten Berg!' );
@@ -209,7 +209,7 @@ describe( 'Pattern blocks', () => {
// Wait for creation to finish.
await page.waitForXPath(
- '//*[contains(@class, "components-snackbar")]/*[contains(text(),"Pattern created:")]'
+ '//*[contains(@class, "components-snackbar")]/*[contains(text(),"pattern created:")]'
);
await clearAllBlocks();
@@ -341,11 +341,11 @@ describe( 'Pattern blocks', () => {
// Make an edit to the reusable block and assert that there's only a
// paragraph in a reusable block.
- await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
- await canvas().click( 'p[aria-label="Paragraph block"]' );
+ await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
+ await canvas().click( 'p[aria-label="Block: Paragraph"]' );
await page.keyboard.type( '2' );
const selector =
- '//div[@aria-label="Block: Pattern"]//p[@aria-label="Paragraph block"][.="12"]';
+ '//div[@aria-label="Block: Pattern"]//p[@aria-label="Block: Paragraph"][.="12"]';
const reusableBlockWithParagraph = await page.$x( selector );
expect( reusableBlockWithParagraph ).toBeTruthy();
diff --git a/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js b/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
deleted file mode 100644
index d833926c88001b..00000000000000
--- a/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- deleteAllTemplates,
- activateTheme,
- visitSiteEditor,
- enterEditMode,
- toggleGlobalStyles,
- openGlobalStylesPanel,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Global styles sidebar', () => {
- beforeAll( async () => {
- await activateTheme( 'emptytheme' );
- await Promise.all( [
- deleteAllTemplates( 'wp_template' ),
- deleteAllTemplates( 'wp_template_part' ),
- ] );
- } );
- afterAll( async () => {
- await Promise.all( [
- deleteAllTemplates( 'wp_template' ),
- deleteAllTemplates( 'wp_template_part' ),
- ] );
- await activateTheme( 'twentytwentyone' );
- } );
- beforeEach( async () => {
- await visitSiteEditor();
- await enterEditMode();
- } );
- describe( 'blocks list', () => {
- it( 'should filter results properly', async () => {
- await toggleGlobalStyles();
- await openGlobalStylesPanel( 'Blocks' );
- await page.focus( '.edit-site-block-types-search input' );
- await page.keyboard.type( 'heading' );
- const results = await page.$$(
- '.edit-site-block-types-item-list div[role="listitem"]'
- );
- // Matches both Heading and Table of Contents blocks. (The latter contains "heading" in its description.)
- expect( results.length ).toEqual( 2 );
- } );
- } );
-} );
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
index 9292867159e610..e944e90a92fae8 100644
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -738,7 +738,7 @@ describe( 'Widgets screen', () => {
await find(
{
role: 'document',
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
value: 'First Paragraph',
},
{
@@ -759,7 +759,7 @@ describe( 'Widgets screen', () => {
await find(
{
role: 'document',
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
value: 'First Paragraph',
},
{
@@ -875,7 +875,7 @@ describe( 'Widgets screen', () => {
await page.keyboard.type( 'First Paragraph' );
const updatedParagraphBlockInFirstWidgetArea = await find(
{
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
value: 'First Paragraph',
},
{
diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
index bf592bb5e22052..ef96e0b16f3488 100644
--- a/packages/edit-post/README.md
+++ b/packages/edit-post/README.md
@@ -55,7 +55,7 @@ function doOnClick() {
}
function MyPluginBlockSettingsMenuItem() {
- return wp.element.createElement( PluginBlockSettingsMenuItem, {
+ return React.createElement( PluginBlockSettingsMenuItem, {
allowedBlocks: [ 'core/paragraph' ],
icon: 'dashicon-name',
label: __( 'Menu item text' ),
@@ -95,7 +95,7 @@ _Parameters_
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### PluginDocumentSettingPanel
@@ -105,7 +105,7 @@ _Usage_
```js
// Using ES5 syntax
-var el = wp.element.createElement;
+var el = React.createElement;
var __ = wp.i18n.__;
var registerPlugin = wp.plugins.registerPlugin;
var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
@@ -152,11 +152,11 @@ _Parameters_
- _props.className_ `[string]`: An optional class name added to the row.
- _props.title_ `[string]`: The title of the panel
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
-- _props.children_ `WPElement`: Children to be rendered
+- _props.children_ `Element`: Children to be rendered
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### PluginMoreMenuItem
@@ -168,14 +168,14 @@ _Usage_
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+var moreIcon = React.createElement( 'svg' ); //... svg element.
function onButtonClick() {
alert( 'Button clicked.' );
}
function MyButtonMoreMenuItem() {
- return wp.element.createElement(
+ return React.createElement(
PluginMoreMenuItem,
{
icon: moreIcon,
@@ -213,7 +213,7 @@ _Parameters_
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### PluginPostPublishPanel
@@ -227,7 +227,7 @@ var __ = wp.i18n.__;
var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
function MyPluginPostPublishPanel() {
- return wp.element.createElement(
+ return React.createElement(
PluginPostPublishPanel,
{
className: 'my-plugin-post-publish-panel',
@@ -262,11 +262,11 @@ _Parameters_
- _props.title_ `[string]`: Title displayed at the top of the panel.
- _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
-- _props.children_ `WPElement`: Children to be rendered
+- _props.children_ `Element`: Children to be rendered
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### PluginPostStatusInfo
@@ -280,7 +280,7 @@ var __ = wp.i18n.__;
var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
function MyPluginPostStatusInfo() {
- return wp.element.createElement(
+ return React.createElement(
PluginPostStatusInfo,
{
className: 'my-plugin-post-status-info',
@@ -306,11 +306,11 @@ _Parameters_
- _props_ `Object`: Component properties.
- _props.className_ `[string]`: An optional class name added to the row.
-- _props.children_ `WPElement`: Children to be rendered.
+- _props.children_ `Element`: Children to be rendered.
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### PluginPrePublishPanel
@@ -324,7 +324,7 @@ var __ = wp.i18n.__;
var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
function MyPluginPrePublishPanel() {
- return wp.element.createElement(
+ return React.createElement(
PluginPrePublishPanel,
{
className: 'my-plugin-pre-publish-panel',
@@ -359,11 +359,11 @@ _Parameters_
- _props.title_ `[string]`: Title displayed at the top of the panel.
- _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
-- _props.children_ `WPElement`: Children to be rendered
+- _props.children_ `Element`: Children to be rendered
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### PluginSidebar
@@ -384,10 +384,10 @@ _Usage_
```js
// Using ES5 syntax
var __ = wp.i18n.__;
-var el = wp.element.createElement;
+var el = React.createElement;
var PanelBody = wp.components.PanelBody;
var PluginSidebar = wp.editPost.PluginSidebar;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+var moreIcon = React.createElement( 'svg' ); //... svg element.
function MyPluginSidebar() {
return el(
@@ -435,10 +435,10 @@ _Usage_
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+var moreIcon = React.createElement( 'svg' ); //... svg element.
function MySidebarMoreMenuItem() {
- return wp.element.createElement(
+ return React.createElement(
PluginSidebarMoreMenuItem,
{
target: 'my-sidebar',
@@ -470,7 +470,7 @@ _Parameters_
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
### reinitializeEditor
diff --git a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
index f0390267259b66..322aa07db80f86 100644
--- a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
+++ b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
@@ -45,7 +45,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
* }
*
* function MyPluginBlockSettingsMenuItem() {
- * return wp.element.createElement(
+ * return React.createElement(
* PluginBlockSettingsMenuItem,
* {
* allowedBlocks: [ 'core/paragraph' ],
@@ -76,7 +76,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
const PluginBlockSettingsMenuItem = ( {
allowedBlocks,
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 840067e9fb9b3d..e814f7a49072ff 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -33,7 +33,7 @@ const preventDefault = ( event ) => {
event.preventDefault();
};
-function HeaderToolbar() {
+function HeaderToolbar( { setListViewToggleElement } ) {
const inserterButton = useRef();
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editPostStore );
@@ -108,6 +108,7 @@ function HeaderToolbar() {
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
aria-expanded={ isListViewOpen }
+ ref={ setListViewToggleElement }
/>
</>
);
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 4d567fe37493d5..2e0d470818fecd 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -32,7 +32,10 @@ const slideX = {
hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
};
-function Header( { setEntitiesSavedStatesCallback } ) {
+function Header( {
+ setEntitiesSavedStatesCallback,
+ setListViewToggleElement,
+} ) {
const isLargeViewport = useViewportMatch( 'large' );
const { hasActiveMetaboxes, isPublishSidebarOpened, showIconLabels } =
useSelect(
@@ -61,7 +64,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
transition={ { type: 'tween', delay: 0.8 } }
className="edit-post-header__toolbar"
>
- <HeaderToolbar />
+ <HeaderToolbar
+ setListViewToggleElement={ setListViewToggleElement }
+ />
<div className="edit-post-header__center">
<DocumentActions />
</div>
diff --git a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
index 6e8c4daa24d461..d9675974704626 100644
--- a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
+++ b/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
@@ -21,14 +21,14 @@ import { withPluginContext } from '@wordpress/plugins';
* // Using ES5 syntax
* var __ = wp.i18n.__;
* var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
*
* function onButtonClick() {
* alert( 'Button clicked.' );
* }
*
* function MyButtonMoreMenuItem() {
- * return wp.element.createElement(
+ * return React.createElement(
* PluginMoreMenuItem,
* {
* icon: moreIcon,
@@ -60,7 +60,7 @@ import { withPluginContext } from '@wordpress/plugins';
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
export default compose(
withPluginContext( ( context, ownProps ) => {
diff --git a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
index 1bb1a5e43153e7..133e5ae2ba301f 100644
--- a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
@@ -17,10 +17,10 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
* // Using ES5 syntax
* var __ = wp.i18n.__;
* var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
*
* function MySidebarMoreMenuItem() {
- * return wp.element.createElement(
+ * return React.createElement(
* PluginSidebarMoreMenuItem,
* {
* target: 'my-sidebar',
@@ -48,7 +48,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
export default function PluginSidebarMoreMenuItem( props ) {
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 878177c250f841..5265cac569239f 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -210,6 +210,10 @@ function Layout() {
// Note 'truthy' callback implies an open panel.
const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
useState( false );
+
+ const [ listViewToggleElement, setListViewToggleElement ] =
+ useState( null );
+
const closeEntitiesSavedStates = useCallback(
( arg ) => {
if ( typeof entitiesSavedStatesCallback === 'function' ) {
@@ -244,7 +248,11 @@ function Layout() {
return <InserterSidebar />;
}
if ( mode === 'visual' && isListViewOpened ) {
- return <ListViewSidebar />;
+ return (
+ <ListViewSidebar
+ listViewToggleElement={ listViewToggleElement }
+ />
+ );
}
return null;
@@ -285,6 +293,7 @@ function Layout() {
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
+ setListViewToggleElement={ setListViewToggleElement }
/>
}
editorNotices={ <EditorNotices /> }
diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
index 33baf50f0f6618..6d66115923e7b0 100644
--- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
+++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
@@ -20,7 +20,7 @@ import { store as editPostStore } from '../../../store';
*
* @param {Object} props Component props.
* @param {string} props.location metabox location.
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
function MetaBoxesArea( { location } ) {
const container = useRef( null );
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
index 77a56617cb1c63..0d96606e9e0434 100644
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -3,14 +3,10 @@
*/
import { __experimentalListView as ListView } from '@wordpress/block-editor';
import { Button, TabPanel } from '@wordpress/components';
-import {
- useFocusOnMount,
- useFocusReturn,
- useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { focus } from '@wordpress/dom';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -22,21 +18,27 @@ import { ESCAPE } from '@wordpress/keycodes';
import { store as editPostStore } from '../../store';
import ListViewOutline from './list-view-outline';
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
const { setIsListViewOpened } = useDispatch( editPostStore );
// This hook handles focus when the sidebar first renders.
const focusOnMountRef = useFocusOnMount( 'firstElement' );
- // The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
- const headerFocusReturnRef = useFocusReturn();
- const contentFocusReturnRef = useFocusReturn();
- function closeOnEscape( event ) {
- if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
- event.preventDefault();
- setIsListViewOpened( false );
- }
- }
+ // When closing the list view, focus should return to the toggle button.
+ const closeListView = useCallback( () => {
+ setIsListViewOpened( false );
+ listViewToggleElement?.focus();
+ }, [ listViewToggleElement, setIsListViewOpened ] );
+
+ const closeOnEscape = useCallback(
+ ( event ) => {
+ if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+ event.preventDefault();
+ closeListView();
+ }
+ },
+ [ closeListView ]
+ );
// Use internal state instead of a ref to make sure that the component
// re-renders when the dropZoneElement updates.
@@ -53,7 +55,6 @@ export default function ListViewSidebar() {
// Must merge the refs together so focus can be handled properly in the next function.
const listViewContainerRef = useMergeRefs( [
- contentFocusReturnRef,
focusOnMountRef,
listViewRef,
setDropZoneElement,
@@ -87,20 +88,26 @@ export default function ListViewSidebar() {
}
}
- // This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
- useShortcut( 'core/edit-post/toggle-list-view', () => {
+ const handleToggleListViewShortcut = useCallback( () => {
// If the sidebar has focus, it is safe to close.
if (
sidebarRef.current.contains(
sidebarRef.current.ownerDocument.activeElement
)
) {
- setIsListViewOpened( false );
- // If the list view or outline does not have focus, focus should be moved to it.
+ closeListView();
} else {
+ // If the list view or outline does not have focus, focus should be moved to it.
handleSidebarFocus( tab );
}
- } );
+ }, [ closeListView, tab ] );
+
+ // This only fires when the sidebar is open because of the conditional rendering.
+ // It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+ useShortcut(
+ 'core/edit-post/toggle-list-view',
+ handleToggleListViewShortcut
+ );
/**
* Render tab content for a given tab name.
@@ -127,10 +134,9 @@ export default function ListViewSidebar() {
>
<Button
className="edit-post-editor__document-overview-panel__close-button"
- ref={ headerFocusReturnRef }
icon={ closeSmall }
label={ __( 'Close' ) }
- onClick={ () => setIsListViewOpened( false ) }
+ onClick={ closeListView }
/>
<TabPanel
className="edit-post-editor__document-overview-panel__tab-panel"
diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
index 506de5bc907e80..7ee3f96498e53c 100644
--- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
@@ -22,12 +22,12 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
* @param {string} [props.className] An optional class name added to the row.
* @param {string} [props.title] The title of the panel
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- * @param {WPElement} props.children Children to be rendered
+ * @param {Element} props.children Children to be rendered
*
* @example
* ```js
* // Using ES5 syntax
- * var el = wp.element.createElement;
+ * var el = React.createElement;
* var __ = wp.i18n.__;
* var registerPlugin = wp.plugins.registerPlugin;
* var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
@@ -64,7 +64,7 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
* registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
const PluginDocumentSettingPanel = ( {
name,
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
index f355cacd763084..71de03b35b56ab 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
@@ -15,7 +15,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
* @param {string} [props.title] Title displayed at the top of the panel.
* @param {boolean} [props.initialOpen=false] Whether to have the panel initially opened. When no title is provided it is always opened.
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- * @param {WPElement} props.children Children to be rendered
+ * @param {Element} props.children Children to be rendered
*
* @example
* ```js
@@ -24,7 +24,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
* var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
*
* function MyPluginPostPublishPanel() {
- * return wp.element.createElement(
+ * return React.createElement(
* PluginPostPublishPanel,
* {
* className: 'my-plugin-post-publish-panel',
@@ -53,7 +53,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
const PluginPostPublishPanel = ( {
children,
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
index cbef3858cb2749..29af3832947d6f 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
@@ -14,9 +14,9 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
* It should be noted that this is named and implemented around the function it serves
* and not its location, which may change in future iterations.
*
- * @param {Object} props Component properties.
- * @param {string} [props.className] An optional class name added to the row.
- * @param {WPElement} props.children Children to be rendered.
+ * @param {Object} props Component properties.
+ * @param {string} [props.className] An optional class name added to the row.
+ * @param {Element} props.children Children to be rendered.
*
* @example
* ```js
@@ -25,7 +25,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
* var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
*
* function MyPluginPostStatusInfo() {
- * return wp.element.createElement(
+ * return React.createElement(
* PluginPostStatusInfo,
* {
* className: 'my-plugin-post-status-info',
@@ -50,7 +50,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
const PluginPostStatusInfo = ( { children, className } ) => (
<Fill>
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
index 91392ab7883ed5..014a7b31176a29 100644
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
@@ -18,7 +18,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/)
* icon slug string, or an SVG WP element, to be rendered when
* the sidebar is pinned to toolbar.
- * @param {WPElement} props.children Children to be rendered
+ * @param {Element} props.children Children to be rendered
*
* @example
* ```js
@@ -27,7 +27,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
* var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
*
* function MyPluginPrePublishPanel() {
- * return wp.element.createElement(
+ * return React.createElement(
* PluginPrePublishPanel,
* {
* className: 'my-plugin-pre-publish-panel',
@@ -56,7 +56,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
const PluginPrePublishPanel = ( {
children,
diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
index c6b09f0343a00b..39b9e4362ce32c 100644
--- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
@@ -34,10 +34,10 @@ import { store as editPostStore } from '../../../store';
* ```js
* // Using ES5 syntax
* var __ = wp.i18n.__;
- * var el = wp.element.createElement;
+ * var el = React.createElement;
* var PanelBody = wp.components.PanelBody;
* var PluginSidebar = wp.editPost.PluginSidebar;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
*
* function MyPluginSidebar() {
* return el(
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
index d0633f26cf254e..59fdc5d189c946 100644
--- a/packages/edit-post/src/components/sidebar/post-status/index.js
+++ b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -6,8 +6,7 @@ import {
__experimentalHStack as HStack,
PanelBody,
} from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, ifCondition } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
/**
@@ -31,13 +30,29 @@ import PostURL from '../post-url';
*/
const PANEL_NAME = 'post-status';
-function PostStatus( { isOpened, onTogglePanel } ) {
+export default function PostStatus() {
+ const { isOpened, isRemoved } = useSelect( ( select ) => {
+ // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+ // not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+ const { isEditorPanelRemoved, isEditorPanelOpened } =
+ select( editPostStore );
+ return {
+ isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+ isOpened: isEditorPanelOpened( PANEL_NAME ),
+ };
+ }, [] );
+ const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
+ if ( isRemoved ) {
+ return null;
+ }
+
return (
<PanelBody
className="edit-post-post-status"
title={ __( 'Summary' ) }
opened={ isOpened }
- onToggle={ onTogglePanel }
+ onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
>
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
@@ -69,24 +84,3 @@ function PostStatus( { isOpened, onTogglePanel } ) {
</PanelBody>
);
}
-
-export default compose( [
- withSelect( ( select ) => {
- // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
- // not use isEditorPanelEnabled since this panel should not be disabled through the UI.
- const { isEditorPanelRemoved, isEditorPanelOpened } =
- select( editPostStore );
- return {
- isRemoved: isEditorPanelRemoved( PANEL_NAME ),
- isOpened: isEditorPanelOpened( PANEL_NAME ),
- };
- } ),
- ifCondition( ( { isRemoved } ) => ! isRemoved ),
- withDispatch( ( dispatch ) => ( {
- onTogglePanel() {
- return dispatch( editPostStore ).toggleEditorPanelOpened(
- PANEL_NAME
- );
- },
- } ) ),
-] )( PostStatus );
diff --git a/packages/edit-post/src/components/sidebar/post-status/style.scss b/packages/edit-post/src/components/sidebar/post-status/style.scss
deleted file mode 100644
index 381c0744967962..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-status/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
- margin-top: 15px;
- width: 100%;
- text-align: center;
-}
diff --git a/packages/edit-post/src/hooks/validate-multiple-use/index.js b/packages/edit-post/src/hooks/validate-multiple-use/index.js
index 3877a894632c9a..31444a86467c70 100644
--- a/packages/edit-post/src/hooks/validate-multiple-use/index.js
+++ b/packages/edit-post/src/hooks/validate-multiple-use/index.js
@@ -23,9 +23,9 @@ const enhance = compose(
* "original" block is not the current one. Thus, an inexisting
* `originalBlockClientId` prop signals that the block is valid.
*
- * @param {WPComponent} WrappedBlockEdit A filtered BlockEdit instance.
+ * @param {Component} WrappedBlockEdit A filtered BlockEdit instance.
*
- * @return {WPComponent} Enhanced component with merged state data props.
+ * @return {Component} Enhanced component with merged state data props.
*/
withSelect( ( select, block ) => {
const multiple = hasBlockSupport( block.name, 'multiple', true );
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index bfd008e2164dd7..60544e7fc3a8ab 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -14,7 +14,6 @@
@import "./components/sidebar/post-format/style.scss";
@import "./components/sidebar/post-schedule/style.scss";
@import "./components/sidebar/post-slug/style.scss";
-@import "./components/sidebar/post-status/style.scss";
@import "./components/sidebar/post-template/style.scss";
@import "./components/sidebar/post-url/style.scss";
@import "./components/sidebar/post-visibility/style.scss";
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 3441b79ff9dd4f..21cff84cf564b5 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -27,6 +27,7 @@
"react-native": "src/index",
"dependencies": {
"@babel/runtime": "^7.16.0",
+ "@tanstack/react-table": "^8.10.3",
"@wordpress/a11y": "file:../a11y",
"@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/block-editor": "file:../block-editor",
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index e4b22031b15827..014ac6165aaef2 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -4,13 +4,14 @@
import { DropdownMenu } from '@wordpress/components';
import { useState, useRef } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
-import { plus, symbol, symbolFilled } from '@wordpress/icons';
+import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import {
privateApis as editPatternsPrivateApis,
store as patternsStore,
} from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';
/**
@@ -19,7 +20,6 @@ import { store as noticesStore } from '@wordpress/notices';
import CreateTemplatePartModal from '../create-template-part-modal';
import SidebarButton from '../sidebar-button';
import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
import {
PATTERN_TYPES,
PATTERN_DEFAULT_CATEGORY,
@@ -36,9 +36,8 @@ export default function AddNewPattern() {
const [ showPatternModal, setShowPatternModal ] = useState( false );
const [ showTemplatePartModal, setShowTemplatePartModal ] =
useState( false );
- const isTemplatePartsMode = useSelect( ( select ) => {
- const settings = select( editSiteStore ).getSettings();
- return !! settings.supportsTemplatePartsMode;
+ const isBlockBasedTheme = useSelect( ( select ) => {
+ return select( coreStore ).getCurrentTheme()?.is_block_theme;
}, [] );
const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
const { createSuccessNotice, createErrorNotice } =
@@ -51,8 +50,8 @@ export default function AddNewPattern() {
history.push( {
postId: pattern.id,
- postType: 'wp_block',
- categoryType: 'wp_block',
+ postType: PATTERN_TYPES.user,
+ categoryType: PATTERN_TYPES.theme,
categoryId,
canvas: 'edit',
} );
@@ -64,7 +63,7 @@ export default function AddNewPattern() {
// Navigate to the created template part editor.
history.push( {
postId: templatePart.id,
- postType: 'wp_template_part',
+ postType: TEMPLATE_PART_POST_TYPE,
canvas: 'edit',
} );
}
@@ -82,9 +81,7 @@ export default function AddNewPattern() {
},
];
- // Remove condition when command palette issues are resolved.
- // See: https://github.com/WordPress/gutenberg/issues/52154.
- if ( ! isTemplatePartsMode ) {
+ if ( isBlockBasedTheme ) {
controls.push( {
icon: symbolFilled,
onClick: () => setShowTemplatePartModal( true ),
@@ -93,7 +90,7 @@ export default function AddNewPattern() {
}
controls.push( {
- icon: symbol,
+ icon: upload,
onClick: () => {
patternUploadInputRef.current.click();
},
diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js b/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js
new file mode 100644
index 00000000000000..c91c687ce5284c
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import useSiteEditorSettings from '../use-site-editor-settings';
+import usePageContentBlocks from './use-page-content-blocks';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+const noop = () => {};
+
+/**
+ * The default block editor provider for the site editor. Typically used when
+ * the post type is `'wp_template_part'` or `'wp_template'` and allows editing
+ * of the template and its nested entities.
+ *
+ * If the page content focus type is `'hideTemplate'`, the provider will provide
+ * a set of page content blocks wrapped in a container that, together,
+ * mimic the look and feel of the post editor and
+ * allow editing of the page content only.
+ *
+ * @param {Object} props
+ * @param {Element} props.children
+ */
+export default function DefaultBlockEditorProvider( { children } ) {
+ const settings = useSiteEditorSettings();
+
+ const { templateType, isTemplateHidden } = useSelect( ( select ) => {
+ const { getEditedPostType } = select( editSiteStore );
+ const { getPageContentFocusType, getCanvasMode } = unlock(
+ select( editSiteStore )
+ );
+ return {
+ templateType: getEditedPostType(),
+ isTemplateHidden:
+ getCanvasMode() === 'edit' &&
+ getPageContentFocusType() === 'hideTemplate',
+ canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+ };
+ }, [] );
+
+ const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+ 'postType',
+ templateType
+ );
+ const pageContentBlocks = usePageContentBlocks( {
+ blocks,
+ isPageContentFocused: isTemplateHidden,
+ wrapPageContent: true,
+ } );
+
+ return (
+ <ExperimentalBlockEditorProvider
+ settings={ settings }
+ value={
+ isTemplateHidden && pageContentBlocks.length
+ ? pageContentBlocks
+ : blocks
+ }
+ onInput={ isTemplateHidden ? noop : onInput }
+ onChange={ isTemplateHidden ? noop : onChange }
+ useSubRegistry={ false }
+ >
+ { children }
+ </ExperimentalBlockEditorProvider>
+ );
+}
diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/index.js b/packages/edit-site/src/components/block-editor/block-editor-provider/index.js
new file mode 100644
index 00000000000000..ab07a3fefc5d31
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/block-editor-provider/index.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import DefaultBlockEditorProvider from './default-block-editor-provider';
+import NavigationBlockEditorProvider from './navigation-block-editor-provider';
+import { NAVIGATION_POST_TYPE } from '../../../utils/constants';
+
+export default function BlockEditorProvider( { children } ) {
+ const entityType = useSelect(
+ ( select ) => select( editSiteStore ).getEditedPostType(),
+ []
+ );
+ if ( entityType === NAVIGATION_POST_TYPE ) {
+ return (
+ <NavigationBlockEditorProvider>
+ { children }
+ </NavigationBlockEditorProvider>
+ );
+ }
+ return (
+ <DefaultBlockEditorProvider>{ children }</DefaultBlockEditorProvider>
+ );
+}
diff --git a/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js b/packages/edit-site/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js
similarity index 95%
rename from packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js
rename to packages/edit-site/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js
index 833ff6b0ef378b..9927cbb040c7bc 100644
--- a/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js
+++ b/packages/edit-site/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js
@@ -16,6 +16,7 @@ import { createBlock } from '@wordpress/blocks';
import { unlock } from '../../../lock-unlock';
import useSiteEditorSettings from '../use-site-editor-settings';
import { store as editSiteStore } from '../../../store';
+import { NAVIGATION_POST_TYPE } from '../../../utils/constants';
const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
@@ -37,7 +38,7 @@ const noop = () => {};
export default function NavigationBlockEditorProvider( { children } ) {
const defaultSettings = useSiteEditorSettings();
- const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
+ const navigationMenuId = useEntityId( 'postType', NAVIGATION_POST_TYPE );
const blocks = useMemo( () => {
return [
diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js b/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js
new file mode 100644
index 00000000000000..775aea0bdb391e
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import usePageContentBlocks from '../use-page-content-blocks';
+
+jest.mock( '@wordpress/blocks', () => {
+ return {
+ __esModule: true,
+ ...jest.requireActual( '@wordpress/blocks' ),
+ createBlock( name, attributes = {}, innerBlocks = [] ) {
+ return {
+ name,
+ attributes,
+ innerBlocks,
+ };
+ },
+ };
+} );
+
+describe( 'usePageContentBlocks', () => {
+ const blocksList = [
+ createBlock( 'core/group', {}, [
+ createBlock( 'core/post-title' ),
+ createBlock( 'core/post-featured-image' ),
+ createBlock( 'core/query', {}, [
+ createBlock( 'core/post-title' ),
+ createBlock( 'core/post-featured-image' ),
+ createBlock( 'core/post-content' ),
+ ] ),
+ createBlock( 'core/post-content' ),
+ ] ),
+ createBlock( 'core/query' ),
+ createBlock( 'core/paragraph' ),
+ createBlock( 'core/post-content' ),
+ ];
+ it( 'should return empty array if `isPageContentFocused` is `false`', () => {
+ const { result } = renderHook( () =>
+ usePageContentBlocks( {
+ blocks: blocksList,
+ isPageContentFocused: false,
+ } )
+ );
+ expect( result.current ).toEqual( [] );
+ } );
+ it( 'should return empty array if `blocks` is undefined', () => {
+ const { result } = renderHook( () =>
+ usePageContentBlocks( {
+ blocks: undefined,
+ isPageContentFocused: true,
+ } )
+ );
+ expect( result.current ).toEqual( [] );
+ } );
+ it( 'should return empty array if `blocks` is an empty array', () => {
+ const { result } = renderHook( () =>
+ usePageContentBlocks( {
+ blocks: [],
+ isPageContentFocused: true,
+ } )
+ );
+ expect( result.current ).toEqual( [] );
+ } );
+ it( 'should return new block list', () => {
+ const { result } = renderHook( () =>
+ usePageContentBlocks( {
+ blocks: blocksList,
+ isPageContentFocused: true,
+ } )
+ );
+ expect( result.current ).toEqual( [
+ createBlock( 'core/post-title' ),
+ createBlock( 'core/post-featured-image' ),
+ createBlock( 'core/post-content' ),
+ createBlock( 'core/post-content' ),
+ ] );
+ } );
+ it( 'should return new block list wrapped in a Group block', () => {
+ const { result } = renderHook( () =>
+ usePageContentBlocks( {
+ blocks: blocksList,
+ isPageContentFocused: true,
+ wrapPageContent: true,
+ } )
+ );
+ expect( result.current ).toEqual( [
+ {
+ name: 'core/group',
+ attributes: {
+ layout: { type: 'constrained' },
+ style: {
+ spacing: {
+ margin: {
+ top: '4em', // Mimics the post editor.
+ },
+ },
+ },
+ },
+ innerBlocks: [
+ createBlock( 'core/post-title' ),
+ createBlock( 'core/post-featured-image' ),
+ createBlock( 'core/post-content' ),
+ createBlock( 'core/post-content' ),
+ ],
+ },
+ ] );
+ } );
+} );
diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js b/packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js
new file mode 100644
index 00000000000000..dd05f90a56bbbb
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants';
+
+/**
+ * Helper method to iterate through all blocks, recursing into allowed inner blocks.
+ * Returns a flattened object of transformed blocks.
+ *
+ * @param {Array} blocks Blocks to flatten.
+ * @param {Function} transform Transforming function to be applied to each block. If transform returns `undefined`, the block is skipped.
+ *
+ * @return {Array} Flattened object.
+ */
+function flattenBlocks( blocks, transform ) {
+ const result = [];
+ for ( let i = 0; i < blocks.length; i++ ) {
+ // Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
+ // we skip it because we only want to render stand-alone page content blocks in the block list.
+ if ( [ 'core/query' ].includes( blocks[ i ].name ) ) {
+ continue;
+ }
+ const transformedBlock = transform( blocks[ i ] );
+ if ( transformedBlock ) {
+ result.push( transformedBlock );
+ }
+ result.push( ...flattenBlocks( blocks[ i ].innerBlocks, transform ) );
+ }
+
+ return result;
+}
+
+/**
+ * Returns a memoized array of blocks that contain only page content blocks,
+ * surrounded by an optional group block to mimic the post editor.
+ *
+ * @param {Object} props The argument for the function.
+ * @param {Array} props.blocks Block list.
+ * @param {boolean} props.isPageContentFocused Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
+ * @param {boolean} props.wrapPageContent Whether to wrap the page content blocks in a group block to mimic the post editor. Default `false`.
+ * @return {Array} Page content blocks.
+ */
+export default function usePageContentBlocks( {
+ blocks = [],
+ isPageContentFocused = false,
+ wrapPageContent = false,
+} ) {
+ return useMemo( () => {
+ if ( ! isPageContentFocused || ! blocks?.length ) {
+ return [];
+ }
+
+ const innerBlocks = flattenBlocks( blocks, ( block ) =>
+ PAGE_CONTENT_BLOCK_TYPES[ block.name ]
+ ? createBlock( block.name )
+ : undefined
+ );
+
+ if ( ! innerBlocks.length ) {
+ return [];
+ }
+
+ if ( ! wrapPageContent ) {
+ return innerBlocks;
+ }
+
+ return [
+ createBlock(
+ 'core/group',
+ {
+ layout: { type: 'constrained' },
+ style: {
+ spacing: {
+ margin: {
+ top: '4em', // Mimics the post editor.
+ },
+ },
+ },
+ },
+ innerBlocks
+ ),
+ ];
+ }, [ blocks, isPageContentFocused ] );
+}
diff --git a/packages/edit-site/src/components/block-editor/get-block-editor-provider.js b/packages/edit-site/src/components/block-editor/get-block-editor-provider.js
deleted file mode 100644
index df8185605f13aa..00000000000000
--- a/packages/edit-site/src/components/block-editor/get-block-editor-provider.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import DefaultBlockEditor from './providers/default-block-editor-provider';
-import NavigationBlockEditor from './providers/navigation-block-editor-provider';
-
-/**
- * Factory to isolate choosing the appropriate block editor
- * component to handle a given entity type.
- *
- * @param {string} entityType the entity type being edited
- * @return {JSX.Element} the block editor component to use.
- */
-export default function getBlockEditorProvider( entityType ) {
- let Provider = null;
-
- switch ( entityType ) {
- case 'wp_navigation':
- Provider = NavigationBlockEditor;
- break;
- case 'wp_template':
- case 'wp_template_part':
- default:
- Provider = DefaultBlockEditor;
- break;
- }
-
- return Provider;
-}
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 5bfcdb012d1f7e..2c635ff860a5bd 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
-import { useSelect } from '@wordpress/data';
import { BlockInspector } from '@wordpress/block-editor';
import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
@@ -10,31 +9,19 @@ import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
*/
import TemplatePartConverter from '../template-part-converter';
import { SidebarInspectorFill } from '../sidebar-edit-mode';
-import { store as editSiteStore } from '../../store';
import SiteEditorCanvas from './site-editor-canvas';
-import getBlockEditorProvider from './get-block-editor-provider';
+import BlockEditorProvider from './block-editor-provider';
import { unlock } from '../../lock-unlock';
const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
export default function BlockEditor() {
- const entityType = useSelect(
- ( select ) => select( editSiteStore ).getEditedPostType(),
- []
- );
-
- // Choose the provider based on the entity type currently
- // being edited.
- const BlockEditorProvider = getBlockEditorProvider( entityType );
-
return (
<BlockEditorProvider>
<TemplatePartConverter />
<SidebarInspectorFill>
<BlockInspector />
</SidebarInspectorFill>
-
<SiteEditorCanvas />
-
<PatternsMenuItems />
</BlockEditorProvider>
);
diff --git a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js
deleted file mode 100644
index 2ee0ae467f8d65..00000000000000
--- a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEntityBlockEditor } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
-import useSiteEditorSettings from '../use-site-editor-settings';
-
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-
-export default function DefaultBlockEditorProvider( { children } ) {
- const settings = useSiteEditorSettings();
-
- const { templateType } = useSelect( ( select ) => {
- const { getEditedPostType } = unlock( select( editSiteStore ) );
-
- return {
- templateType: getEditedPostType(),
- };
- }, [] );
-
- const [ blocks, onInput, onChange ] = useEntityBlockEditor(
- 'postType',
- templateType
- );
-
- return (
- <ExperimentalBlockEditorProvider
- settings={ settings }
- value={ blocks }
- onInput={ onInput }
- onChange={ onChange }
- useSubRegistry={ false }
- >
- { children }
- </ExperimentalBlockEditorProvider>
- );
-}
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
index 55bcf5b6121809..e715587891c0a5 100644
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -22,7 +22,10 @@ import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import useSiteEditorSettings from './use-site-editor-settings';
import { store as editSiteStore } from '../../store';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import {
+ FOCUSABLE_ENTITIES,
+ NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import PageContentFocusManager from '../page-content-focus-manager';
@@ -71,7 +74,7 @@ export default function SiteEditorCanvas() {
! isMobileViewport;
const contentRef = useRef();
- const isTemplateTypeNavigation = templateType === 'wp_navigation';
+ const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
index a006ba6f2cb439..0b3a57e0c07449 100644
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -28,7 +28,10 @@ import { serialize } from '@wordpress/blocks';
/**
* Internal dependencies
*/
-import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import {
+ TEMPLATE_PART_POST_TYPE,
+ TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
import {
useExistingTemplateParts,
getUniqueTemplatePartTitle,
@@ -46,7 +49,7 @@ export default function CreateTemplatePartModal( {
const existingTemplateParts = useExistingTemplateParts();
const [ title, setTitle ] = useState( '' );
- const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
+ const [ area, setArea ] = useState( TEMPLATE_PART_AREA_DEFAULT_CATEGORY );
const [ isSubmitting, setIsSubmitting ] = useState( false );
const instanceId = useInstanceId( CreateTemplatePartModal );
@@ -57,14 +60,12 @@ export default function CreateTemplatePartModal( {
);
async function createTemplatePart() {
- if ( ! title ) {
- createErrorNotice( __( 'Please enter a title.' ), {
- type: 'snackbar',
- } );
+ if ( ! title || isSubmitting ) {
return;
}
try {
+ setIsSubmitting( true );
const uniqueTitle = getUniqueTemplatePartTitle(
title,
existingTemplateParts
@@ -73,7 +74,7 @@ export default function CreateTemplatePartModal( {
const templatePart = await saveEntityRecord(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
{
slug: cleanSlug,
title: uniqueTitle,
@@ -96,6 +97,8 @@ export default function CreateTemplatePartModal( {
createErrorNotice( errorMessage, { type: 'snackbar' } );
onError?.();
+ } finally {
+ setIsSubmitting( false );
}
}
@@ -108,10 +111,6 @@ export default function CreateTemplatePartModal( {
<form
onSubmit={ async ( event ) => {
event.preventDefault();
- if ( ! title ) {
- return;
- }
- setIsSubmitting( true );
await createTemplatePart();
} }
>
@@ -179,7 +178,7 @@ export default function CreateTemplatePartModal( {
<Button
variant="primary"
type="submit"
- disabled={ ! title }
+ aria-disabled={ ! title || isSubmitting }
isBusy={ isSubmitting }
>
{ __( 'Create' ) }
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
new file mode 100644
index 00000000000000..bf492cb5691a36
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import {
+ getCoreRowModel,
+ getFilteredRowModel,
+ getSortedRowModel,
+ getPaginationRowModel,
+ useReactTable,
+} from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalVStack as VStack,
+ __experimentalHStack as HStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ListView from './list-view';
+import { Pagination } from './pagination';
+import ViewActions from './view-actions';
+import TextFilter from './text-filter';
+
+export default function DataViews( {
+ data,
+ fields,
+ isLoading,
+ paginationInfo,
+ options,
+} ) {
+ const dataView = useReactTable( {
+ data,
+ columns: fields,
+ ...options,
+ getCoreRowModel: getCoreRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ } );
+ return (
+ <div className="dataviews-wrapper">
+ <VStack spacing={ 4 }>
+ <HStack justify="space-between">
+ <TextFilter onChange={ dataView.setGlobalFilter } />
+ <ViewActions dataView={ dataView } />
+ </HStack>
+ { /* This component will be selected based on viewConfigs. Now we only have the list view. */ }
+ <ListView dataView={ dataView } isLoading={ isLoading } />
+ <Pagination
+ dataView={ dataView }
+ totalItems={ paginationInfo?.totalItems }
+ />
+ </VStack>
+ </div>
+ );
+}
diff --git a/packages/edit-site/src/components/dataviews/index.js b/packages/edit-site/src/components/dataviews/index.js
new file mode 100644
index 00000000000000..3fea6fd63714b7
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/index.js
@@ -0,0 +1,2 @@
+export { default as DataViews } from './dataviews';
+export { PAGE_SIZE_VALUES } from './view-actions';
diff --git a/packages/edit-site/src/components/dataviews/list-view.js b/packages/edit-site/src/components/dataviews/list-view.js
new file mode 100644
index 00000000000000..55a871d3df8c9b
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/list-view.js
@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { flexRender } from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { chevronDown, chevronUp } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+const sortIcons = { asc: chevronUp, desc: chevronDown };
+function Header( { header } ) {
+ if ( header.isPlaceholder ) {
+ return null;
+ }
+ const text = flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ );
+ if ( ! header.column.getCanSort() ) {
+ return text;
+ }
+ const sortDirection = header.column.getIsSorted();
+ return (
+ <Button
+ onClick={ header.column.getToggleSortingHandler() }
+ icon={ sortIcons[ sortDirection ] }
+ iconPosition="right"
+ text={ text }
+ style={ { padding: 0 } }
+ />
+ );
+}
+
+function ListView( { dataView, className, isLoading = false }, ref ) {
+ const { rows } = dataView.getRowModel();
+ const hasRows = !! rows?.length;
+ if ( isLoading ) {
+ // TODO:Add spinner or progress bar..
+ return <h3>{ __( 'Loading' ) }</h3>;
+ }
+ return (
+ <div className="dataviews-list-view-wrapper">
+ { hasRows && (
+ <table
+ ref={ ref }
+ className={ classnames( 'dataviews-list-view', className ) }
+ >
+ <thead>
+ { dataView.getHeaderGroups().map( ( headerGroup ) => (
+ <tr key={ headerGroup.id }>
+ { headerGroup.headers.map( ( header ) => (
+ <th
+ key={ header.id }
+ colSpan={ header.colSpan }
+ style={ {
+ width:
+ header.column.columnDef.width ||
+ undefined,
+ maxWidth:
+ header.column.columnDef
+ .maxWidth || undefined,
+ } }
+ >
+ <Header header={ header } />
+ </th>
+ ) ) }
+ </tr>
+ ) ) }
+ </thead>
+ <tbody>
+ { rows.map( ( row ) => (
+ <tr key={ row.id }>
+ { row.getVisibleCells().map( ( cell ) => (
+ <td
+ key={ cell.id }
+ style={ {
+ width:
+ cell.column.columnDef.width ||
+ undefined,
+ maxWidth:
+ cell.column.columnDef
+ .maxWidth || undefined,
+ } }
+ >
+ { flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ ) }
+ </td>
+ ) ) }
+ </tr>
+ ) ) }
+ </tbody>
+ </table>
+ ) }
+ { ! hasRows && <p>{ __( 'no results' ) }</p> }
+ </div>
+ );
+}
+
+export default forwardRef( ListView );
diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
new file mode 100644
index 00000000000000..3adecd2bb80851
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/pagination.js
@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ __experimentalHStack as HStack,
+ __experimentalText as Text,
+ __experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf, __, _x, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PageSizeControl } from './view-actions';
+
+// For now this is copied from the patterns list Pagination component, because
+// the datatable pagination starts from index zero(`0`). Eventually all lists will be
+// using this one.
+export function Pagination( {
+ dataView,
+ // If passed, use it, as it's for controlled pagination.
+ totalItems = 0,
+} ) {
+ const currentPage = dataView.getState().pagination.pageIndex + 1;
+ const numPages = dataView.getPageCount();
+ const _totalItems = totalItems || dataView.getCoreRowModel().rows.length;
+ return (
+ <HStack
+ expanded={ false }
+ spacing={ 3 }
+ justify="space-between"
+ className="dataviews-pagination"
+ >
+ <Text variant="muted">
+ {
+ // translators: %s: Total number of entries.
+ sprintf(
+ // translators: %s: Total number of entries.
+ _n( '%s item', '%s items', _totalItems ),
+ _totalItems
+ )
+ }
+ </Text>
+ { !! _totalItems && (
+ <HStack expanded={ false } spacing={ 1 }>
+ <Button
+ variant="tertiary"
+ onClick={ () => dataView.setPageIndex( 0 ) }
+ disabled={ ! dataView.getCanPreviousPage() }
+ aria-label={ __( 'First page' ) }
+ >
+ «
+ </Button>
+ <Button
+ variant="tertiary"
+ onClick={ () => dataView.previousPage() }
+ disabled={ ! dataView.getCanPreviousPage() }
+ aria-label={ __( 'Previous page' ) }
+ >
+ ‹
+ </Button>
+ <HStack
+ justify="flex-start"
+ expanded={ false }
+ spacing={ 1 }
+ >
+ { createInterpolateElement(
+ sprintf(
+ // translators: %1$s: Current page number, %2$s: Total number of pages.
+ _x( '<CurrenPageControl /> of %2$s', 'paging' ),
+ currentPage,
+ numPages
+ ),
+ {
+ CurrenPageControl: (
+ <NumberControl
+ aria-label={ __( 'Current page' ) }
+ min={ 1 }
+ max={ numPages }
+ onChange={ ( value ) => {
+ if ( value > numPages ) return;
+ dataView.setPageIndex( value - 1 );
+ } }
+ step="1"
+ value={ currentPage }
+ isDragEnabled={ false }
+ spinControls="none"
+ />
+ ),
+ }
+ ) }
+ </HStack>
+ <Button
+ variant="tertiary"
+ onClick={ () => dataView.nextPage() }
+ disabled={ ! dataView.getCanNextPage() }
+ aria-label={ __( 'Next page' ) }
+ >
+ ›
+ </Button>
+ <Button
+ variant="tertiary"
+ onClick={ () =>
+ dataView.setPageIndex( dataView.getPageCount() - 1 )
+ }
+ disabled={ ! dataView.getCanNextPage() }
+ aria-label={ __( 'Last page' ) }
+ >
+ »
+ </Button>
+ </HStack>
+ ) }
+ <PageSizeControl dataView={ dataView } />
+ </HStack>
+ );
+}
diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
new file mode 100644
index 00000000000000..47e80782255a4a
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/style.scss
@@ -0,0 +1,36 @@
+.dataviews-wrapper {
+ width: 100%;
+ padding: $grid-unit-40;
+}
+
+.dataviews-list-view {
+ width: 100%;
+ text-indent: 0;
+ border-color: inherit;
+ border-collapse: collapse;
+ position: relative;
+ a {
+ text-decoration: none;
+ }
+ th {
+ text-align: left;
+ font-weight: normal;
+ padding: 0 $grid-unit-20 $grid-unit-20;
+ color: $gray-700;
+ }
+ td,
+ th {
+ padding: $grid-unit-15;
+ &:last-child {
+ text-align: right;
+ }
+ }
+ tr {
+ border-bottom: 1px solid $gray-100;
+ }
+}
+
+.dataviews__per-page-control-prefix {
+ color: $gray-700;
+ text-wrap: nowrap;
+}
diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
new file mode 100644
index 00000000000000..76a06c14486170
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useDebouncedInput from '../../utils/use-debounced-input';
+
+export default function TextFilter( {
+ className,
+ searchLabel = __( 'Filter list' ),
+ onChange,
+} ) {
+ const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+ useEffect( () => {
+ onChange( debouncedSearch );
+ }, [ debouncedSearch, onChange ] );
+ return (
+ <SearchControl
+ className={ classnames( 'dataviews__text-filter', className ) }
+ onChange={ setSearch }
+ value={ search }
+ label={ searchLabel }
+ placeholder={ searchLabel }
+ size="compact"
+ />
+ );
+}
diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
new file mode 100644
index 00000000000000..1ede6ebcd8b75a
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -0,0 +1,246 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ Icon,
+ SelectControl,
+ privateApis as componentsPrivateApis,
+ __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import {
+ chevronRightSmall,
+ check,
+ blockTable,
+ chevronDown,
+ arrowUp,
+ arrowDown,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+ DropdownMenuV2,
+ DropdownMenuGroupV2,
+ DropdownMenuItemV2,
+ DropdownSubMenuV2,
+ DropdownSubMenuTriggerV2,
+} = unlock( componentsPrivateApis );
+
+export const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
+
+export function PageSizeControl( { dataView } ) {
+ const label = __( 'Rows per page:' );
+ return (
+ <SelectControl
+ __nextHasNoMarginBottom
+ label={ label }
+ hideLabelFromVision
+ // TODO: This should probably use a label based on the wanted design
+ // and we could remove InputControlPrefixWrapper usage.
+ prefix={
+ <InputControlPrefixWrapper
+ as="span"
+ className="dataviews__per-page-control-prefix"
+ >
+ { label }
+ </InputControlPrefixWrapper>
+ }
+ value={ dataView.getState().pagination.pageSize }
+ options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
+ value: pageSize,
+ label: pageSize,
+ } ) ) }
+ onChange={ ( value ) => dataView.setPageSize( +value ) }
+ />
+ );
+}
+
+function PageSizeMenu( { dataView } ) {
+ const currenPageSize = dataView.getState().pagination.pageSize;
+ return (
+ <DropdownSubMenuV2
+ trigger={
+ <DropdownSubMenuTriggerV2
+ suffix={
+ <>
+ { currenPageSize }
+ <Icon icon={ chevronRightSmall } />
+ </>
+ }
+ >
+ { /* TODO: probably label per view type. */ }
+ { __( 'Rows per page' ) }
+ </DropdownSubMenuTriggerV2>
+ }
+ >
+ { PAGE_SIZE_VALUES.map( ( size ) => {
+ return (
+ <DropdownMenuItemV2
+ key={ size }
+ prefix={
+ currenPageSize === size && <Icon icon={ check } />
+ }
+ onSelect={ ( event ) => {
+ // We need to handle this on DropDown component probably..
+ event.preventDefault();
+ dataView.setPageSize( size );
+ } }
+ // TODO: check about role and a11y.
+ role="menuitemcheckbox"
+ >
+ { size }
+ </DropdownMenuItemV2>
+ );
+ } ) }
+ </DropdownSubMenuV2>
+ );
+}
+
+function FieldsVisibilityMenu( { dataView } ) {
+ const hideableFields = dataView
+ .getAllColumns()
+ .filter( ( columnn ) => columnn.getCanHide() );
+ if ( ! hideableFields?.length ) {
+ return null;
+ }
+ return (
+ <DropdownSubMenuV2
+ trigger={
+ <DropdownSubMenuTriggerV2
+ suffix={ <Icon icon={ chevronRightSmall } /> }
+ >
+ { __( 'Fields' ) }
+ </DropdownSubMenuTriggerV2>
+ }
+ >
+ { hideableFields?.map( ( field ) => {
+ return (
+ <DropdownMenuItemV2
+ key={ field.id }
+ prefix={
+ field.getIsVisible() && <Icon icon={ check } />
+ }
+ onSelect={ ( event ) => {
+ event.preventDefault();
+ field.getToggleVisibilityHandler()( event );
+ } }
+ role="menuitemcheckbox"
+ >
+ { field.columnDef.header }
+ </DropdownMenuItemV2>
+ );
+ } ) }
+ </DropdownSubMenuV2>
+ );
+}
+
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+ asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+ desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+function SortMenu( { dataView } ) {
+ const sortableFields = dataView
+ .getAllColumns()
+ .filter( ( columnn ) => columnn.getCanSort() );
+ if ( ! sortableFields?.length ) {
+ return null;
+ }
+ const currentSortedField = sortableFields.find( ( field ) =>
+ field.getIsSorted()
+ );
+ return (
+ <DropdownSubMenuV2
+ trigger={
+ <DropdownSubMenuTriggerV2
+ suffix={
+ <>
+ { currentSortedField?.columnDef.header }
+ <Icon icon={ chevronRightSmall } />
+ </>
+ }
+ >
+ { __( 'Sort by' ) }
+ </DropdownSubMenuTriggerV2>
+ }
+ >
+ { sortableFields?.map( ( field ) => {
+ const sortedDirection = field.getIsSorted();
+ return (
+ <DropdownSubMenuV2
+ key={ field.id }
+ trigger={
+ <DropdownSubMenuTriggerV2
+ suffix={ <Icon icon={ chevronRightSmall } /> }
+ >
+ { field.columnDef.header }
+ </DropdownSubMenuTriggerV2>
+ }
+ side="left"
+ >
+ { Object.entries( sortingItemsInfo ).map(
+ ( [ direction, info ] ) => {
+ return (
+ <DropdownMenuItemV2
+ key={ direction }
+ prefix={ <Icon icon={ info.icon } /> }
+ suffix={
+ sortedDirection === direction && (
+ <Icon icon={ check } />
+ )
+ }
+ onSelect={ ( event ) => {
+ event.preventDefault();
+ if (
+ sortedDirection === direction
+ ) {
+ dataView.resetSorting();
+ } else {
+ dataView.setSorting( [
+ {
+ id: field.id,
+ desc:
+ direction ===
+ 'desc',
+ },
+ ] );
+ }
+ } }
+ >
+ { info.label }
+ </DropdownMenuItemV2>
+ );
+ }
+ ) }
+ </DropdownSubMenuV2>
+ );
+ } ) }
+ </DropdownSubMenuV2>
+ );
+}
+
+export default function ViewActions( { dataView, className } ) {
+ return (
+ <DropdownMenuV2
+ label={ __( 'Actions' ) }
+ className={ className }
+ trigger={
+ <Button variant="tertiary" icon={ blockTable }>
+ { __( 'View' ) }
+ <Icon icon={ chevronDown } />
+ </Button>
+ }
+ >
+ <DropdownMenuGroupV2>
+ <SortMenu dataView={ dataView } />
+ <FieldsVisibilityMenu dataView={ dataView } />
+ <PageSizeMenu dataView={ dataView } />
+ </DropdownMenuGroupV2>
+ </DropdownMenuV2>
+ );
+}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 25fcbff830553e..f3ee1bda69719f 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -71,7 +71,7 @@ const blockRemovalRules = {
),
};
-export default function Editor( { isLoading } ) {
+export default function Editor( { listViewToggleElement, isLoading } ) {
const {
record: editedPost,
getTitle,
@@ -247,7 +247,11 @@ export default function Editor( { isLoading } ) {
<InserterSidebar />
) ) ||
( shouldShowListView && (
- <ListViewSidebar />
+ <ListViewSidebar
+ listViewToggleElement={
+ listViewToggleElement
+ }
+ />
) ) )
}
sidebar={
diff --git a/packages/edit-site/src/components/global-styles/font-family-item.js b/packages/edit-site/src/components/global-styles/font-family-item.js
index fdd7012bc01372..a0044e156c9fbd 100644
--- a/packages/edit-site/src/components/global-styles/font-family-item.js
+++ b/packages/edit-site/src/components/global-styles/font-family-item.js
@@ -13,7 +13,7 @@ import { useContext } from '@wordpress/element';
* Internal dependencies
*/
import { FontLibraryContext } from './font-library-modal/context';
-import { getPreviewStyle } from './font-library-modal/utils';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
function FontFamilyItem( { font } ) {
const { handleSetLibraryFontSelected, toggleModal } =
@@ -26,7 +26,7 @@ function FontFamilyItem( { font } ) {
toggleModal( 'installed-fonts' );
};
- const previewStyle = getPreviewStyle( font );
+ const previewStyle = getFamilyPreviewStyle( font );
return (
<Item onClick={ handleClick }>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
new file mode 100644
index 00000000000000..de0c1cfa16ec6e
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalVStack as VStack,
+ __experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import CollectionFontVariant from './collection-font-variant';
+import { isFontFontFaceInOutline } from './utils/fonts-outline';
+import { sortFontFaces } from './utils/sort-font-faces';
+
+function CollectionFontDetails( {
+ font,
+ handleToggleVariant,
+ fontToInstallOutline,
+} ) {
+ const fontFaces =
+ font.fontFace && font.fontFace.length
+ ? sortFontFaces( font.fontFace )
+ : [
+ {
+ fontFamily: font.fontFamily,
+ fontStyle: 'normal',
+ fontWeight: '400',
+ },
+ ];
+
+ return (
+ <>
+ <Spacer margin={ 4 } />
+ <VStack spacing={ 0 }>
+ <Spacer margin={ 8 } />
+ { fontFaces.map( ( face, i ) => (
+ <CollectionFontVariant
+ font={ font }
+ face={ face }
+ key={ `face${ i }` }
+ handleToggleVariant={ handleToggleVariant }
+ selected={ isFontFontFaceInOutline(
+ font.slug,
+ font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
+ fontToInstallOutline
+ ) }
+ />
+ ) ) }
+ </VStack>
+ <Spacer margin={ 8 } />
+ </>
+ );
+}
+
+export default CollectionFontDetails;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
new file mode 100644
index 00000000000000..d0e797d78beef0
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl, Flex } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+
+/**
+ * Internal dependencies
+ */
+import FontFaceDemo from './font-demo';
+
+function CollectionFontVariant( {
+ face,
+ font,
+ handleToggleVariant,
+ selected,
+} ) {
+ const handleToggleActivation = () => {
+ if ( font?.fontFace ) {
+ handleToggleVariant( font, face );
+ return;
+ }
+ handleToggleVariant( font );
+ };
+
+ const displayName = font.name + ' ' + getFontFaceVariantName( face );
+
+ return (
+ <div className="font-library-modal__library-font-variant">
+ <Flex justify="space-between" align="center" gap="1rem">
+ <FontFaceDemo fontFace={ face } text={ displayName } />
+ <CheckboxControl
+ checked={ selected }
+ onChange={ handleToggleActivation }
+ __nextHasNoMarginBottom={ true }
+ />
+ </Flex>
+ </div>
+ );
+}
+
+export default CollectionFontVariant;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
index 07c2da701e9e0a..8ab067495fcc08 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -9,13 +9,16 @@ import {
useEntityRecords,
store as coreStore,
} from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import { fetchInstallFonts, fetchUninstallFonts } from './resolvers';
+import {
+ fetchInstallFonts,
+ fetchUninstallFonts,
+ fetchFontCollections,
+ fetchFontCollection,
+} from './resolvers';
import { unlock } from '../../../lock-unlock';
const { useGlobalSetting } = unlock( blockEditorPrivateApis );
import {
@@ -46,13 +49,11 @@ function FontLibraryProvider( { children } ) {
const fontFamiliesHasChanges =
!! globalStyles?.edits?.settings?.typography?.fontFamilies;
- const { createErrorNotice } = useDispatch( noticesStore );
-
const [ isInstalling, setIsInstalling ] = useState( false );
const [ refreshKey, setRefreshKey ] = useState( 0 );
const refreshLibrary = () => {
- setRefreshKey( ( prevKey ) => prevKey + 1 );
+ setRefreshKey( Date.now() );
};
const {
@@ -197,7 +198,8 @@ function FontLibraryProvider( { children } ) {
// Prepare formData to install.
const formData = makeFormDataFromFontFamilies( fonts );
// Install the fonts (upload the font files to the server and create the post in the database).
- const fontsInstalled = await fetchInstallFonts( formData );
+ const response = await fetchInstallFonts( formData );
+ const fontsInstalled = response?.successes || [];
// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
// (to avoid activating a non installed font).
const fontToBeActivated = getIntersectingFontFaces(
@@ -212,41 +214,40 @@ function FontLibraryProvider( { children } ) {
] );
refreshLibrary();
setIsInstalling( false );
- return true;
- } catch ( e ) {
- // eslint-disable-next-line no-console
- console.error( e );
- createErrorNotice( __( 'Error installing fonts.' ), {
- type: 'snackbar',
- } );
+
+ return response;
+ } catch ( error ) {
setIsInstalling( false );
- return false;
+ return {
+ errors: [ error ],
+ };
}
}
async function uninstallFont( font ) {
try {
// Uninstall the font (remove the font files from the server and the post from the database).
- await fetchUninstallFonts( [ font ] );
+ const response = await fetchUninstallFonts( [ font ] );
// Deactivate the font family (remove the font family from the global styles).
- deactivateFontFamily( font );
- // Save the global styles to the database.
- await saveSpecifiedEntityEdits(
- 'root',
- 'globalStyles',
- globalStylesId,
- [ 'settings.typography.fontFamilies' ]
- );
+ if ( ! response.errors ) {
+ deactivateFontFamily( font );
+ // Save the global styles to the database.
+ await saveSpecifiedEntityEdits(
+ 'root',
+ 'globalStyles',
+ globalStylesId,
+ [ 'settings.typography.fontFamilies' ]
+ );
+ }
// Refresh the library (the the library font families from database).
refreshLibrary();
- return true;
- } catch ( e ) {
+ return response;
+ } catch ( error ) {
// eslint-disable-next-line no-console
- console.error( e );
- createErrorNotice( __( 'Error uninstalling fonts.' ), {
- type: 'snackbar',
- } );
- return false;
+ console.error( error );
+ return {
+ errors: [ error ],
+ };
}
}
@@ -276,14 +277,16 @@ function FontLibraryProvider( { children } ) {
} );
// Add custom fonts to the browser.
fontsToAdd.forEach( ( font ) => {
- font.fontFace.forEach( ( face ) => {
- // Load font faces just in the iframe because they already are in the document.
- loadFontFaceInBrowser(
- face,
- getDisplaySrcFromFontFace( face.src ),
- 'iframe'
- );
- } );
+ if ( font.fontFace ) {
+ font.fontFace.forEach( ( face ) => {
+ // Load font faces just in the iframe because they already are in the document.
+ loadFontFaceInBrowser(
+ face,
+ getDisplaySrcFromFontFace( face.src ),
+ 'iframe'
+ );
+ } );
+ }
} );
};
@@ -306,13 +309,37 @@ function FontLibraryProvider( { children } ) {
// Get the src of the font.
const src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );
// If the font is already loaded, don't load it again.
- if ( loadedFontUrls.has( src ) ) return;
+ if ( ! src || loadedFontUrls.has( src ) ) return;
// Load the font in the browser.
loadFontFaceInBrowser( fontFace, src, 'document' );
// Add the font to the loaded fonts list.
loadedFontUrls.add( src );
};
+ // Font Collections
+ const [ collections, setFontCollections ] = useState( [] );
+ const getFontCollections = async () => {
+ const response = await fetchFontCollections();
+ setFontCollections( response );
+ };
+ const getFontCollection = async ( id ) => {
+ const hasData = !! collections.find(
+ ( collection ) => collection.id === id
+ )?.data;
+ if ( hasData ) return;
+ const response = await fetchFontCollection( id );
+ const updatedCollections = collections.map( ( collection ) =>
+ collection.id === id
+ ? { ...collection, data: { ...response?.data } }
+ : collection
+ );
+ setFontCollections( updatedCollections );
+ };
+
+ useEffect( () => {
+ getFontCollections();
+ }, [] );
+
return (
<FontLibraryContext.Provider
value={ {
@@ -337,6 +364,8 @@ function FontLibraryProvider( { children } ) {
isResolvingLibrary,
hasResolvedLibrary,
isInstalling,
+ collections,
+ getFontCollection,
} }
>
{ children }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
index 41203d745cc4d3..7553d7cd42a492 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -7,15 +7,17 @@ import {
Button,
Flex,
FlexItem,
+ Icon,
} from '@wordpress/components';
/**
* Internal dependencies
*/
import FontDemo from './font-demo';
-import { getPreviewStyle } from './utils';
+import { getFamilyPreviewStyle } from './utils/preview-styles';
+import { chevronRight } from '@wordpress/icons';
-function FontCard( { font, onClick, actionHandler, variantsText } ) {
+function FontCard( { font, onClick, variantsText } ) {
const fakeFontFace = {
fontStyle: 'normal',
fontWeight: '400',
@@ -31,7 +33,7 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
) || font.fontFace[ 0 ]
: fakeFontFace;
- const demoStyle = getPreviewStyle( font );
+ const demoStyle = getFamilyPreviewStyle( font );
const variantsCount = font.fontFace?.length || 1;
@@ -47,6 +49,7 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
>
<Flex justify="space-between" wrap={ false }>
<FontDemo
+ customPreviewUrl={ font.preview }
fontFace={ displayFontFace }
text={ font.name }
style={ demoStyle }
@@ -60,7 +63,9 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
_n( 'variant', 'variants', variantsCount ) }
</Text>
</FlexItem>
- <FlexItem>{ !! actionHandler && actionHandler }</FlexItem>
+ <FlexItem>
+ <Icon icon={ chevronRight } />
+ </FlexItem>
</Flex>
</Flex>
</Button>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
new file mode 100644
index 00000000000000..a3b697efcfb8b9
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -0,0 +1,286 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import {
+ __experimentalSpacer as Spacer,
+ __experimentalInputControl as InputControl,
+ __experimentalText as Text,
+ SelectControl,
+ Spinner,
+ Icon,
+ FlexItem,
+ Flex,
+ Button,
+ Notice,
+} from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { search, closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import FontCard from './font-card';
+import filterFonts from './utils/filter-fonts';
+import CollectionFontDetails from './collection-font-details';
+import { toggleFont } from './utils/toggleFont';
+import { getFontsOutline } from './utils/fonts-outline';
+import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
+
+const DEFAULT_CATEGORY = {
+ id: 'all',
+ name: __( 'All' ),
+};
+function FontCollection( { id } ) {
+ const requiresPermission = id === 'default-font-collection';
+
+ const getGoogleFontsPermissionFromStorage = () => {
+ return (
+ window.localStorage.getItem(
+ 'wp-font-library-default-font-collection-permission'
+ ) === 'true'
+ );
+ };
+
+ const [ notice, setNotice ] = useState( null );
+ const [ selectedFont, setSelectedFont ] = useState( null );
+ const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+ const [ filters, setFilters ] = useState( {} );
+ const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
+ requiresPermission && ! getGoogleFontsPermissionFromStorage()
+ );
+ const { collections, getFontCollection, installFonts } =
+ useContext( FontLibraryContext );
+ const selectedCollection = collections.find(
+ ( collection ) => collection.id === id
+ );
+
+ useEffect( () => {
+ const handleStorage = () => {
+ setRenderConfirmDialog(
+ requiresPermission && ! getGoogleFontsPermissionFromStorage()
+ );
+ };
+ handleStorage();
+ window.addEventListener( 'storage', handleStorage );
+ return () => window.removeEventListener( 'storage', handleStorage );
+ }, [ id, requiresPermission ] );
+
+ useEffect( () => {
+ getFontCollection( id );
+ resetFilters();
+ }, [ id, getFontCollection ] );
+
+ useEffect( () => {
+ setSelectedFont( null );
+ }, [ id ] );
+
+ // Reset notice after 5 seconds
+ useEffect( () => {
+ if ( notice ) {
+ const timeout = setTimeout( () => {
+ setNotice( null );
+ }, 5000 );
+ return () => clearTimeout( timeout );
+ }
+ }, [ notice ] );
+
+ const collectionFonts = useMemo(
+ () => selectedCollection?.data?.fontFamilies ?? [],
+ [ selectedCollection ]
+ );
+ const collectionCategories = selectedCollection?.data?.categories ?? [];
+
+ const categories = [ DEFAULT_CATEGORY, ...collectionCategories ];
+
+ const fonts = useMemo(
+ () => filterFonts( collectionFonts, filters ),
+ [ collectionFonts, filters ]
+ );
+
+ const handleCategoryFilter = ( category ) => {
+ setFilters( { ...filters, category } );
+ };
+
+ const handleUpdateSearchInput = ( value ) => {
+ setFilters( { ...filters, search: value } );
+ };
+
+ const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
+
+ const resetFilters = () => {
+ setFilters( {} );
+ };
+
+ const resetSearch = () => {
+ setFilters( { ...filters, search: '' } );
+ };
+
+ const handleUnselectFont = () => {
+ setSelectedFont( null );
+ };
+
+ const handleToggleVariant = ( font, face ) => {
+ const newFontsToInstall = toggleFont( font, face, fontsToInstall );
+ setFontsToInstall( newFontsToInstall );
+ };
+
+ const fontToInstallOutline = getFontsOutline( fontsToInstall );
+
+ const resetFontsToInstall = () => {
+ setFontsToInstall( [] );
+ };
+
+ const handleInstall = async () => {
+ const response = await installFonts( fontsToInstall );
+ const installNotice = getNoticeFromInstallResponse( response );
+ setNotice( installNotice );
+ resetFontsToInstall();
+ };
+
+ return (
+ <TabLayout
+ title={
+ ! selectedFont ? selectedCollection.name : selectedFont.name
+ }
+ description={
+ ! selectedFont
+ ? selectedCollection.description
+ : __( 'Select font variants to install.' )
+ }
+ handleBack={ !! selectedFont && handleUnselectFont }
+ footer={
+ fontsToInstall.length > 0 && (
+ <Footer handleInstall={ handleInstall } />
+ )
+ }
+ >
+ { renderConfirmDialog && (
+ <>
+ <Spacer margin={ 8 } />
+ <GoogleFontsConfirmDialog />
+ </>
+ ) }
+
+ { ! renderConfirmDialog && ! selectedCollection.data && (
+ <Spinner />
+ ) }
+
+ { notice && (
+ <>
+ <FlexItem>
+ <Spacer margin={ 2 } />
+ <Notice
+ isDismissible={ false }
+ status={ notice.type }
+ className="font-library-modal__font-collection__notice"
+ >
+ { notice.message }
+ </Notice>
+ </FlexItem>
+ <Spacer margin={ 2 } />
+ </>
+ ) }
+
+ { ! renderConfirmDialog && ! selectedFont && (
+ <Flex>
+ <FlexItem>
+ <InputControl
+ value={ filters.search }
+ placeholder={ __( 'Font name…' ) }
+ label={ __( 'Search' ) }
+ onChange={ debouncedUpdateSearchInput }
+ prefix={ <Icon icon={ search } /> }
+ suffix={
+ filters?.search ? (
+ <Icon
+ icon={ closeSmall }
+ onClick={ resetSearch }
+ />
+ ) : null
+ }
+ />
+ </FlexItem>
+ <FlexItem>
+ <SelectControl
+ label={ __( 'Category' ) }
+ value={ filters.category }
+ onChange={ handleCategoryFilter }
+ >
+ { categories &&
+ categories.map( ( category ) => (
+ <option
+ value={ category.id }
+ key={ category.id }
+ >
+ { category.name }
+ </option>
+ ) ) }
+ </SelectControl>
+ </FlexItem>
+ </Flex>
+ ) }
+
+ <Spacer margin={ 4 } />
+
+ { ! renderConfirmDialog &&
+ ! selectedCollection?.data?.fontFamilies && <Spinner /> }
+
+ { ! renderConfirmDialog &&
+ !! selectedCollection?.data?.fontFamilies?.length &&
+ ! fonts.length && (
+ <Text>
+ { __(
+ 'No fonts found. Try with a different seach term'
+ ) }
+ </Text>
+ ) }
+
+ { ! renderConfirmDialog && selectedFont && (
+ <CollectionFontDetails
+ font={ selectedFont }
+ handleToggleVariant={ handleToggleVariant }
+ fontToInstallOutline={ fontToInstallOutline }
+ />
+ ) }
+
+ { ! renderConfirmDialog && ! selectedFont && (
+ <FontsGrid>
+ { fonts.map( ( font ) => (
+ <FontCard
+ key={ font.slug }
+ font={ font }
+ onClick={ () => {
+ setSelectedFont( font );
+ } }
+ />
+ ) ) }
+ </FontsGrid>
+ ) }
+ </TabLayout>
+ );
+}
+
+function Footer( { handleInstall } ) {
+ const { isInstalling } = useContext( FontLibraryContext );
+
+ return (
+ <Flex justify="flex-end">
+ <Button
+ variant="primary"
+ onClick={ handleInstall }
+ isBusy={ isInstalling }
+ disabled={ isInstalling }
+ >
+ { __( 'Install' ) }
+ </Button>
+ </Flex>
+ );
+}
+
+export default FontCollection;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index 3cd69aa0570134..0c464ac2715806 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -8,24 +8,41 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
* Internal dependencies
*/
import { FontLibraryContext } from './context';
+import { getFacePreviewStyle } from './utils/preview-styles';
-function FontFaceDemo( { fontFace, text, style = {} } ) {
+function getPreviewUrl( fontFace ) {
+ if ( fontFace.preview ) {
+ return fontFace.preview;
+ }
+ if ( fontFace.src ) {
+ return Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;
+ }
+}
+
+function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
const ref = useRef( null );
const [ isIntersecting, setIsIntersecting ] = useState( false );
const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
const { loadFontFaceAsset } = useContext( FontLibraryContext );
- const { fontFamily, fontStyle, fontWeight } = fontFace;
- const demoStyle = {
- fontWeight,
- fontStyle,
- fontFamily,
+ const previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );
+ const isPreviewImage =
+ previewUrl && previewUrl.match( /\.(png|jpg|jpeg|gif|svg)$/i );
+
+ const faceStyles = getFacePreviewStyle( fontFace );
+ const textDemoStyle = {
+ whiteSpace: 'nowrap',
flexShrink: 0,
fontSize: '18px',
opacity: isAssetLoaded ? '1' : '0',
transition: 'opacity 0.3s ease-in-out',
+ ...faceStyles,
...style,
};
+ const imageDemoStyle = {
+ height: '23px',
+ width: 'auto',
+ };
useEffect( () => {
const observer = new window.IntersectionObserver( ( [ entry ] ) => {
@@ -38,7 +55,7 @@ function FontFaceDemo( { fontFace, text, style = {} } ) {
useEffect( () => {
const loadAsset = async () => {
if ( isIntersecting ) {
- if ( fontFace.src ) {
+ if ( ! isPreviewImage && fontFace.src ) {
await loadFontFaceAsset( fontFace );
}
setIsAssetLoaded( true );
@@ -48,9 +65,18 @@ function FontFaceDemo( { fontFace, text, style = {} } ) {
}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
return (
- <Text style={ demoStyle } ref={ ref }>
- { text }
- </Text>
+ <div ref={ ref }>
+ { isPreviewImage ? (
+ <img
+ src={ previewUrl }
+ loading="lazy"
+ alt={ text }
+ style={ imageDemoStyle }
+ />
+ ) : (
+ <Text style={ textDemoStyle }>{ text }</Text>
+ ) }
+ </div>
);
}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js b/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js
new file mode 100644
index 00000000000000..cb10ec89c4fc7a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+ Button,
+ Card,
+ CardBody,
+ __experimentalText as Text,
+ __experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+function GoogleFontsConfirmDialog() {
+ const handleConfirm = () => {
+ // eslint-disable-next-line no-undef
+ window.localStorage.setItem(
+ 'wp-font-library-default-font-collection-permission',
+ 'true'
+ );
+ window.dispatchEvent( new Event( 'storage' ) );
+ };
+
+ return (
+ <div className="font-library__google-fonts-confirm">
+ <Card>
+ <CardBody>
+ <Text as="h3">Connect to Google Fonts</Text>
+ <Spacer margin={ 6 } />
+ <Text as="p">
+ { __(
+ 'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'
+ ) }
+ </Text>
+ <Spacer margin={ 3 } />
+ <Text as="p">
+ { __(
+ 'You can alternatively upload files directly on the Library tab.'
+ ) }
+ </Text>
+ <Spacer margin={ 6 } />
+ <Button variant="primary" onClick={ handleConfirm }>
+ { __( 'Allow access to Google Fonts' ) }
+ </Button>
+ </CardBody>
+ </Card>
+ </div>
+ );
+}
+
+export default GoogleFontsConfirmDialog;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 6d55b130c85a4f..1128ca0811977e 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -3,35 +3,70 @@
*/
import { __ } from '@wordpress/i18n';
import { Modal, TabPanel } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import InstalledFonts from './installed-fonts';
-import { MODAL_TABS } from './utils/constants';
+import FontCollection from './font-collection';
+import UploadFonts from './upload-fonts';
+import { FontLibraryContext } from './context';
+
+const DEFAULT_TABS = [
+ {
+ name: 'installed-fonts',
+ title: __( 'Library' ),
+ className: 'installed-fonts',
+ },
+ {
+ name: 'upload-fonts',
+ title: __( 'Upload' ),
+ className: 'upload-fonts',
+ },
+];
+
+const tabsFromCollections = ( collections ) =>
+ collections.map( ( { id, name } ) => ( {
+ name: id,
+ title:
+ collections.length === 1 && id === 'default-font-collection'
+ ? __( 'Install Fonts' )
+ : name,
+ className: 'collection',
+ } ) );
function FontLibraryModal( {
onRequestClose,
initialTabName = 'installed-fonts',
} ) {
+ const { collections } = useContext( FontLibraryContext );
+
+ const tabs = [
+ ...DEFAULT_TABS,
+ ...tabsFromCollections( collections || [] ),
+ ];
+
return (
<Modal
title={ __( 'Fonts' ) }
onRequestClose={ onRequestClose }
- isFullScreen={ true }
+ isFullScreen
className="font-library-modal"
- style={ { width: '65vw' } }
>
<TabPanel
className="font-library-modal__tab-panel"
initialTabName={ initialTabName }
- tabs={ MODAL_TABS }
+ tabs={ tabs }
>
{ ( tab ) => {
switch ( tab.name ) {
+ case 'upload-fonts':
+ return <UploadFonts />;
case 'installed-fonts':
- default:
return <InstalledFonts />;
+ default:
+ return <FontCollection id={ tab.name } />;
}
} }
</TabPanel>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 95a7f2a7abcf20..2a8d1e591e084f 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -9,6 +9,8 @@ import {
__experimentalSpacer as Spacer,
Button,
Spinner,
+ Notice,
+ FlexItem,
} from '@wordpress/components';
/**
@@ -19,8 +21,8 @@ import { FontLibraryContext } from './context';
import FontsGrid from './fonts-grid';
import LibraryFontDetails from './library-font-details';
import LibraryFontCard from './library-font-card';
-import LocalFonts from './local-fonts';
import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';
import { unlock } from '../../../lock-unlock';
const { ProgressBar } = unlock( componentsPrivateApis );
@@ -44,10 +46,14 @@ function InstalledFonts() {
handleSetLibraryFontSelected( font );
};
+ const [ notice, setNotice ] = useState( null );
+
const handleConfirmUninstall = async () => {
- const result = await uninstallFont( libraryFontSelected );
+ const response = await uninstallFont( libraryFontSelected );
+ const uninstallNotice = getNoticeFromUninstallResponse( response );
+ setNotice( uninstallNotice );
// If the font was succesfully uninstalled it is unselected
- if ( result ) {
+ if ( ! response?.errors?.length ) {
handleUnselectFont();
}
setIsConfirmDeleteOpen( false );
@@ -72,8 +78,19 @@ function InstalledFonts() {
useEffect( () => {
refreshLibrary();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );
+ // Reset notice after 5 seconds
+ useEffect( () => {
+ if ( notice ) {
+ const timeout = setTimeout( () => {
+ setNotice( null );
+ }, 5000 );
+ return () => clearTimeout( timeout );
+ }
+ }, [ notice ] );
+
return (
<TabLayout
title={ libraryFontSelected?.name || '' }
@@ -93,6 +110,22 @@ function InstalledFonts() {
handleCancelUninstall={ handleCancelUninstall }
/>
+ { notice && (
+ <>
+ <FlexItem>
+ <Spacer margin={ 2 } />
+ <Notice
+ isDismissible={ false }
+ status={ notice.type }
+ className="font-library-modal__font-collection__notice"
+ >
+ { notice.message }
+ </Notice>
+ </FlexItem>
+ <Spacer margin={ 4 } />
+ </>
+ ) }
+
{ ! libraryFontSelected && (
<>
{ isResolvingLibrary && <Spinner /> }
@@ -110,12 +143,12 @@ function InstalledFonts() {
/>
) ) }
</FontsGrid>
+ <Spacer margin={ 8 } />
</>
) }
{ baseThemeFonts.length > 0 && (
<>
- <Spacer margin={ 8 } />
<FontsGrid title={ __( 'Theme Fonts' ) }>
{ baseThemeFonts.map( ( font ) => (
<LibraryFontCard
@@ -129,9 +162,6 @@ function InstalledFonts() {
</FontsGrid>
</>
) }
-
- <Spacer margin={ 8 } />
- <LocalFonts />
</>
) }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
index 6569f4345873db..16454595dc7f21 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
@@ -3,8 +3,6 @@
*/
import { __, sprintf } from '@wordpress/i18n';
import { useContext } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
-import { chevronRight } from '@wordpress/icons';
/**
* Internal dependencies
@@ -28,12 +26,7 @@ function LibraryFontCard( { font, ...props } ) {
);
return (
- <FontCard
- font={ font }
- variantsText={ variantsText }
- actionHandler={ <Icon icon={ chevronRight } /> }
- { ...props }
- />
+ <FontCard font={ font } variantsText={ variantsText } { ...props } />
);
}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js
index 94d19c3ad4fd95..57ed50f5bfa240 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js
@@ -10,13 +10,12 @@ import {
* Internal dependencies
*/
import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
function LibraryFontDetails( { font } ) {
const fontFaces =
font.fontFace && font.fontFace.length
- ? font.fontFace.sort( ( a, b ) =>
- a.fontWeight > b.fontWeight ? 1 : -1
- )
+ ? sortFontFaces( font.fontFace )
: [
{
fontFamily: font.fontFamily,
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
index 7d5f7a2f79b169..9612f8be52f5ee 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
@@ -1,15 +1,18 @@
/**
* WordPress dependencies
*/
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
import {
Button,
DropZone,
__experimentalSpacer as Spacer,
__experimentalText as Text,
+ __experimentalVStack as VStack,
FormFileUpload,
+ Notice,
+ FlexItem,
} from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useState, useEffect } from '@wordpress/element';
/**
* Internal dependencies
@@ -19,9 +22,16 @@ import { FontLibraryContext } from './context';
import { Font } from '../../../../lib/lib-font.browser';
import makeFamiliesFromFaces from './utils/make-families-from-faces';
import { loadFontFaceInBrowser } from './utils';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
function LocalFonts() {
const { installFonts } = useContext( FontLibraryContext );
+ const [ notice, setNotice ] = useState( null );
+ const supportedFormats =
+ ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
+ .map( ( extension ) => `.${ extension }` )
+ .join( ', ' ) +
+ ` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;
const handleDropZone = ( files ) => {
handleFilesUpload( files );
@@ -30,6 +40,16 @@ function LocalFonts() {
handleFilesUpload( event.target.files );
};
+ // Reset notice after 5 seconds
+ useEffect( () => {
+ if ( notice ) {
+ const timeout = setTimeout( () => {
+ setNotice( null );
+ }, 5000 );
+ return () => clearTimeout( timeout );
+ }
+ }, [ notice ] );
+
/**
* Filters the selected files to only allow the ones with the allowed extensions
*
@@ -37,6 +57,7 @@ function LocalFonts() {
* @return {void}
*/
const handleFilesUpload = ( files ) => {
+ setNotice( null );
const uniqueFilenames = new Set();
const selectedFiles = [ ...files ];
const allowedFiles = selectedFiles.filter( ( file ) => {
@@ -126,33 +147,54 @@ function LocalFonts() {
*/
const handleInstall = async ( fontFaces ) => {
const fontFamilies = makeFamiliesFromFaces( fontFaces );
- await installFonts( fontFamilies );
+ const response = await installFonts( fontFamilies );
+ const installNotice = getNoticeFromInstallResponse( response );
+ setNotice( installNotice );
};
return (
<>
- <Text className="font-library-modal__subtitle">
- { __( 'Upload Fonts' ) }
- </Text>
- <Spacer margin={ 2 } />
+ <Spacer margin={ 16 } />
<DropZone onFilesDrop={ handleDropZone } />
- <FormFileUpload
- accept={ ALLOWED_FILE_EXTENSIONS.map(
- ( ext ) => `.${ ext }`
- ).join( ',' ) }
- multiple={ true }
- onChange={ onFilesUpload }
- render={ ( { openFileDialog } ) => (
- <Button
- className="font-library-modal__upload-area"
- onClick={ openFileDialog }
- >
- <span>
- { __( 'Drag and drop your font files here.' ) }
- </span>
- </Button>
+ <VStack className="font-library-modal__local-fonts">
+ <FormFileUpload
+ accept={ ALLOWED_FILE_EXTENSIONS.map(
+ ( ext ) => `.${ ext }`
+ ).join( ',' ) }
+ multiple={ true }
+ onChange={ onFilesUpload }
+ render={ ( { openFileDialog } ) => (
+ <Button
+ className="font-library-modal__upload-area"
+ onClick={ openFileDialog }
+ >
+ <span>{ __( 'Upload font' ) }</span>
+ </Button>
+ ) }
+ />
+ { notice && (
+ <FlexItem>
+ <Spacer margin={ 2 } />
+ <Notice
+ isDismissible={ false }
+ status={ notice.type }
+ className="font-library-modal__upload-area__notice"
+ >
+ { notice.message }
+ </Notice>
+ </FlexItem>
) }
- />
+ <Spacer margin={ 2 } />
+ <Text className="font-library-modal__upload-area__text">
+ { sprintf(
+ /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
+ __(
+ 'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'
+ ),
+ supportedFormats
+ ) }
+ </Text>
+ </VStack>
</>
);
}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js
index e20e398bf3d7c4..425b3afb0e7c3c 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js
@@ -18,7 +18,7 @@ export async function fetchInstallFonts( data ) {
export async function fetchUninstallFonts( fonts ) {
const data = {
- fontFamilies: fonts,
+ font_families: fonts,
};
const config = {
path: '/wp/v2/fonts',
@@ -27,3 +27,19 @@ export async function fetchUninstallFonts( fonts ) {
};
return apiFetch( config );
}
+
+export async function fetchFontCollections() {
+ const config = {
+ path: '/wp/v2/fonts/collections',
+ method: 'GET',
+ };
+ return apiFetch( config );
+}
+
+export async function fetchFontCollection( id ) {
+ const config = {
+ path: `/wp/v2/fonts/collections/${ id }`,
+ method: 'GET',
+ };
+ return apiFetch( config );
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 7de345b659b6e9..86cac4244dea93 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -1,4 +1,14 @@
.font-library-modal {
+ // @todo: If a new prop is added to the Modal component that constrains
+ // the content width, we should use that prop instead of this style.
+ // see https://github.com/WordPress/gutenberg/issues/54471.
+ &.font-library-modal {
+
+ @include break-medium() {
+ width: 65vw;
+ }
+ }
+
.components-modal__header {
border-bottom: none;
}
@@ -82,11 +92,24 @@
align-items: center;
display: flex;
justify-content: center;
- height: 100px;
+ height: 250px;
width: 100%;
background-color: #f0f0f0;
}
+.font-library-modal__local-fonts {
+ margin: 0 auto;
+ width: 80%;
+
+ .font-library-modal__upload-area__text {
+ color: #6e6e6e;
+ }
+
+ .font-library-modal__upload-area__notice {
+ margin: 0;
+ }
+}
+
.font-library-modal__font-name {
font-weight: bold;
}
@@ -111,3 +134,23 @@
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
}
+
+.font-library__google-fonts-confirm {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ h3 {
+ font-size: 1.4rem;
+ }
+
+ .components-card {
+ width: 50%;
+ min-width: 250px;
+ max-width: 350px;
+ }
+}
+
+.font-library-modal__font-collection__notice {
+ margin: 0;
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
index e69ea37c6f7f7e..07f27cd31ea79c 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
@@ -24,7 +24,7 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
variant="tertiary"
onClick={ handleBack }
icon={ chevronLeft }
- isSmall
+ size="small"
/>
) }
{ title && (
@@ -41,7 +41,7 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
</VStack>
</header>
<main>{ children }</main>
- <footer>{ footer }</footer>
+ { footer && <footer>{ footer }</footer> }
</VStack>
</div>
);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
new file mode 100644
index 00000000000000..effc4a2a5227ca
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LocalFonts from './local-fonts';
+
+function UploadFonts() {
+ return (
+ <>
+ <Spacer margin={ 8 } />
+ <LocalFonts />
+ </>
+ );
+}
+
+export default UploadFonts;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js
index 31d86b8bda2178..4b2b9d1f5fc11e 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js
@@ -1,15 +1,7 @@
/**
* WordPress dependencies
*/
-import { __, _x } from '@wordpress/i18n';
-
-export const MODAL_TABS = [
- {
- name: 'installed-fonts',
- title: __( 'Library' ),
- className: 'installed-fonts',
- },
-];
+import { _x } from '@wordpress/i18n';
export const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/filter-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/filter-fonts.js
new file mode 100644
index 00000000000000..7348eb6b054973
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/filter-fonts.js
@@ -0,0 +1,18 @@
+export default function filterFonts( fonts, filters ) {
+ const { category, search } = filters;
+ let filteredFonts = fonts || [];
+
+ if ( category && category !== 'all' ) {
+ filteredFonts = filteredFonts.filter(
+ ( font ) => font.category === category
+ );
+ }
+
+ if ( search ) {
+ filteredFonts = filteredFonts.filter( ( font ) =>
+ font.name.toLowerCase().includes( search.toLowerCase() )
+ );
+ }
+
+ return filteredFonts;
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
new file mode 100644
index 00000000000000..bef9353e943505
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
@@ -0,0 +1,22 @@
+export function getFontsOutline( fonts ) {
+ return fonts.reduce(
+ ( acc, font ) => ( {
+ ...acc,
+ [ font.slug ]: ( font?.fontFace || [] ).reduce(
+ ( faces, face ) => ( {
+ ...faces,
+ [ `${ face.fontStyle }-${ face.fontWeight }` ]: true,
+ } ),
+ {}
+ ),
+ } ),
+ {}
+ );
+}
+
+export function isFontFontFaceInOutline( slug, face, outline ) {
+ if ( ! face ) {
+ return !! outline[ slug ];
+ }
+ return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js
new file mode 100644
index 00000000000000..b22bd0afe23248
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function getNoticeFromInstallResponse( response ) {
+ const { errors = [], successes = [] } = response;
+ // Everything failed.
+ if ( errors.length && ! successes.length ) {
+ return {
+ type: 'error',
+ message: __( 'Error installing the fonts.' ),
+ };
+ }
+
+ // Eveerything succeeded.
+ if ( ! errors.length && successes.length ) {
+ return {
+ type: 'success',
+ message: __( 'Fonts were installed successfully.' ),
+ };
+ }
+
+ // Some succeeded, some failed.
+ if ( errors.length && successes.length ) {
+ return {
+ type: 'warning',
+ message: __(
+ 'Some fonts were installed successfully and some failed.'
+ ),
+ };
+ }
+}
+
+export function getNoticeFromUninstallResponse( response ) {
+ const { errors = [], successes = [] } = response;
+ // Everything failed.
+ if ( errors.length && ! successes.length ) {
+ return {
+ type: 'error',
+ message: __( 'Error uninstalling the fonts.' ),
+ };
+ }
+
+ // Everything succeeded.
+ if ( ! errors.length && successes.length ) {
+ return {
+ type: 'success',
+ message: __( 'Fonts were uninstalled successfully.' ),
+ };
+ }
+
+ // Some succeeded, some failed.
+ if ( errors.length && successes.length ) {
+ return {
+ type: 'warning',
+ message: __(
+ 'Some fonts were uninstalled successfully and some failed.'
+ ),
+ };
+ }
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
index bdb3635a175272..d0a57978bcce94 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -2,6 +2,7 @@
* Internal dependencies
*/
import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { formatFontFamily } from './preview-styles';
export function setUIValuesNeeded( font, extraValues = {} ) {
if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -84,10 +85,14 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
}
// eslint-disable-next-line no-undef
- const newFont = new FontFace( fontFace.fontFamily, dataSource, {
- style: fontFace.fontStyle,
- weight: fontFace.fontWeight,
- } );
+ const newFont = new FontFace(
+ formatFontFamily( fontFace.fontFamily ),
+ dataSource,
+ {
+ style: fontFace.fontStyle,
+ weight: fontFace.fontWeight,
+ }
+ );
const loadedFace = await newFont.load();
@@ -104,6 +109,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
}
export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+ if ( ! input ) {
+ return;
+ }
+
let src;
if ( Array.isArray( input ) ) {
src = input[ 0 ];
@@ -120,71 +129,6 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
return src;
}
-function findNearest( input, numbers ) {
- // If the numbers array is empty, return null
- if ( numbers.length === 0 ) {
- return null;
- }
- // Sort the array based on the absolute difference with the input
- numbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );
- // Return the first element (which will be the nearest) from the sorted array
- return numbers[ 0 ];
-}
-
-function extractFontWeights( fontFaces ) {
- const result = [];
-
- fontFaces.forEach( ( face ) => {
- const weights = String( face.fontWeight ).split( ' ' );
-
- if ( weights.length === 2 ) {
- const start = parseInt( weights[ 0 ] );
- const end = parseInt( weights[ 1 ] );
-
- for ( let i = start; i <= end; i += 100 ) {
- result.push( i );
- }
- } else if ( weights.length === 1 ) {
- result.push( parseInt( weights[ 0 ] ) );
- }
- } );
-
- return result;
-}
-
-export function getPreviewStyle( family ) {
- const style = { fontFamily: family.fontFamily };
-
- if ( ! Array.isArray( family.fontFace ) ) {
- style.fontWeight = '400';
- style.fontStyle = 'normal';
- return style;
- }
-
- if ( family.fontFace ) {
- //get all the font faces with normal style
- const normalFaces = family.fontFace.filter(
- ( face ) => face.fontStyle.toLowerCase() === 'normal'
- );
- if ( normalFaces.length > 0 ) {
- style.fontStyle = 'normal';
- const normalWeights = extractFontWeights( normalFaces );
- const nearestWeight = findNearest( 400, normalWeights );
- style.fontWeight = String( nearestWeight ) || '400';
- } else {
- style.fontStyle =
- ( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||
- 'normal';
- style.fontWeight =
- ( family.fontFace.length &&
- String( family.fontFace[ 0 ].fontWeight ) ) ||
- '400';
- }
- }
-
- return style;
-}
-
export function makeFormDataFromFontFamilies( fontFamilies ) {
const formData = new FormData();
const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {
@@ -208,6 +152,6 @@ export function makeFormDataFromFontFamilies( fontFamilies ) {
}
return family;
} );
- formData.append( 'fontFamilies', JSON.stringify( newFontFamilies ) );
+ formData.append( 'font_families', JSON.stringify( newFontFamilies ) );
return formData;
}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js
new file mode 100644
index 00000000000000..b47ffb781f0486
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js
@@ -0,0 +1,86 @@
+function findNearest( input, numbers ) {
+ // If the numbers array is empty, return null
+ if ( numbers.length === 0 ) {
+ return null;
+ }
+ // Sort the array based on the absolute difference with the input
+ numbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );
+ // Return the first element (which will be the nearest) from the sorted array
+ return numbers[ 0 ];
+}
+
+function extractFontWeights( fontFaces ) {
+ const result = [];
+
+ fontFaces.forEach( ( face ) => {
+ const weights = String( face.fontWeight ).split( ' ' );
+
+ if ( weights.length === 2 ) {
+ const start = parseInt( weights[ 0 ] );
+ const end = parseInt( weights[ 1 ] );
+
+ for ( let i = start; i <= end; i += 100 ) {
+ result.push( i );
+ }
+ } else if ( weights.length === 1 ) {
+ result.push( parseInt( weights[ 0 ] ) );
+ }
+ } );
+
+ return result;
+}
+
+export function formatFontFamily( input ) {
+ return input
+ .split( ',' )
+ .map( ( font ) => {
+ font = font.trim(); // Remove any leading or trailing white spaces
+ // If the font doesn't have single quotes and contains a space, then add single quotes around it
+ if ( ! font.startsWith( "'" ) && font.indexOf( ' ' ) !== -1 ) {
+ return `'${ font }'`;
+ }
+ return font; // Return font as is if no transformation is needed
+ } )
+ .join( ', ' );
+}
+
+export function getFamilyPreviewStyle( family ) {
+ const style = { fontFamily: formatFontFamily( family.fontFamily ) };
+
+ if ( ! Array.isArray( family.fontFace ) ) {
+ style.fontWeight = '400';
+ style.fontStyle = 'normal';
+ return style;
+ }
+
+ if ( family.fontFace ) {
+ //get all the font faces with normal style
+ const normalFaces = family.fontFace.filter(
+ ( face ) => face.fontStyle.toLowerCase() === 'normal'
+ );
+ if ( normalFaces.length > 0 ) {
+ style.fontStyle = 'normal';
+ const normalWeights = extractFontWeights( normalFaces );
+ const nearestWeight = findNearest( 400, normalWeights );
+ style.fontWeight = String( nearestWeight ) || '400';
+ } else {
+ style.fontStyle =
+ ( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||
+ 'normal';
+ style.fontWeight =
+ ( family.fontFace.length &&
+ String( family.fontFace[ 0 ].fontWeight ) ) ||
+ '400';
+ }
+ }
+
+ return style;
+}
+
+export function getFacePreviewStyle( face ) {
+ return {
+ fontFamily: formatFontFamily( face.fontFamily ),
+ fontStyle: face.fontStyle || 'normal',
+ fontWeight: face.fontWeight || '400',
+ };
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js
new file mode 100644
index 00000000000000..4d94318c9b4476
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js
@@ -0,0 +1,33 @@
+function getNumericFontWeight( value ) {
+ switch ( value ) {
+ case 'normal':
+ return 400;
+ case 'bold':
+ return 700;
+ case 'bolder':
+ return 500;
+ case 'lighter':
+ return 300;
+ default:
+ return parseInt( value, 10 );
+ }
+}
+
+export function sortFontFaces( faces ) {
+ return faces.sort( ( a, b ) => {
+ // Ensure 'normal' fontStyle is always first
+ if ( a.fontStyle === 'normal' && b.fontStyle !== 'normal' ) return -1;
+ if ( b.fontStyle === 'normal' && a.fontStyle !== 'normal' ) return 1;
+
+ // If both fontStyles are the same, sort by fontWeight
+ if ( a.fontStyle === b.fontStyle ) {
+ return (
+ getNumericFontWeight( a.fontWeight ) -
+ getNumericFontWeight( b.fontWeight )
+ );
+ }
+
+ // Sort other fontStyles alphabetically
+ return a.fontStyle.localeCompare( b.fontStyle );
+ } );
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js
new file mode 100644
index 00000000000000..4b171691d49d85
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js
@@ -0,0 +1,69 @@
+/**
+ * Internal dependencies
+ */
+import filterFonts from '../filter-fonts';
+
+describe( 'filterFonts', () => {
+ const mockFonts = [
+ { name: 'Arial', category: 'sans-serif' },
+ { name: 'Arial Condensed', category: 'sans-serif' },
+ { name: 'Times New Roman', category: 'serif' },
+ { name: 'Courier New', category: 'monospace' },
+ { name: 'Romantic', category: 'cursive' },
+ ];
+
+ it( 'should return all fonts if no filters are provided', () => {
+ const result = filterFonts( mockFonts, {} );
+ expect( result ).toEqual( mockFonts );
+ } );
+
+ it( 'should filter by category', () => {
+ const result = filterFonts( mockFonts, { category: 'serif' } );
+ expect( result ).toEqual( [
+ { name: 'Times New Roman', category: 'serif' },
+ ] );
+ } );
+
+ it( 'should return all fonts if category is "all"', () => {
+ const result = filterFonts( mockFonts, { category: 'all' } );
+ expect( result ).toEqual( mockFonts );
+ } );
+
+ it( 'should filter by search', () => {
+ const result = filterFonts( mockFonts, { search: 'ari' } );
+ expect( result ).toEqual( [
+ { name: 'Arial', category: 'sans-serif' },
+ { name: 'Arial Condensed', category: 'sans-serif' },
+ ] );
+ } );
+
+ it( 'should be case insensitive when filtering by search', () => {
+ const result = filterFonts( mockFonts, { search: 'RoMANtic' } );
+ expect( result ).toEqual( [
+ { name: 'Romantic', category: 'cursive' },
+ ] );
+ } );
+
+ it( 'should filter by both category and search', () => {
+ const result = filterFonts( mockFonts, {
+ category: 'serif',
+ search: 'Times',
+ } );
+ expect( result ).toEqual( [
+ { name: 'Times New Roman', category: 'serif' },
+ ] );
+ } );
+
+ it( 'should return an empty array if no fonts match the filter criteria', () => {
+ const result = filterFonts( mockFonts, {
+ category: 'serif',
+ search: 'Arial',
+ } );
+ expect( result ).toEqual( [] );
+ } );
+
+ it( 'should return an empty array if fonts array is not provided', () => {
+ const result = filterFonts( undefined, { category: 'serif' } );
+ expect( result ).toEqual( [] );
+ } );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/fonts-outline.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/fonts-outline.spec.js
new file mode 100644
index 00000000000000..24d9f05d028910
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/fonts-outline.spec.js
@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+import { getFontsOutline, isFontFontFaceInOutline } from '../fonts-outline';
+
+describe( 'getFontsOutline', () => {
+ test( 'should return an empty object for an empty fonts array', () => {
+ const fonts = [];
+ const result = getFontsOutline( fonts );
+ expect( result ).toEqual( {} );
+ } );
+
+ test( 'should handle fonts with no fontFace property', () => {
+ const fonts = [
+ { slug: 'font1' },
+ {
+ slug: 'font2',
+ fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+ },
+ ];
+ const result = getFontsOutline( fonts );
+ expect( result ).toEqual( {
+ font1: {},
+ font2: { 'normal-400': true },
+ } );
+ } );
+
+ test( 'should handle fonts with an empty fontFace array', () => {
+ const fonts = [ { slug: 'font1', fontFace: [] } ];
+ const result = getFontsOutline( fonts );
+ expect( result ).toEqual( {
+ font1: {},
+ } );
+ } );
+
+ test( 'should handle fonts with multiple font faces', () => {
+ const fonts = [
+ {
+ slug: 'font1',
+ fontFace: [
+ { fontStyle: 'normal', fontWeight: '400' },
+ { fontStyle: 'italic', fontWeight: '700' },
+ ],
+ },
+ ];
+ const result = getFontsOutline( fonts );
+ expect( result ).toEqual( {
+ font1: {
+ 'normal-400': true,
+ 'italic-700': true,
+ },
+ } );
+ } );
+} );
+
+describe( 'isFontFontFaceInOutline', () => {
+ test( 'should return false for an empty outline', () => {
+ const slug = 'font1';
+ const face = { fontStyle: 'normal', fontWeight: '400' };
+ const outline = {};
+
+ const result = isFontFontFaceInOutline( slug, face, outline );
+
+ expect( result ).toBe( false );
+ } );
+
+ test( 'should return false when outline has the slug but no matching fontStyle-fontWeight', () => {
+ const slug = 'font1';
+ const face = { fontStyle: 'normal', fontWeight: '400' };
+ const outline = {
+ font1: {
+ 'italic-700': true,
+ },
+ };
+
+ const result = isFontFontFaceInOutline( slug, face, outline );
+
+ expect( result ).toBe( false );
+ } );
+
+ test( 'should return false when outline does not have the slug', () => {
+ const slug = 'font1';
+ const face = { fontStyle: 'normal', fontWeight: '400' };
+ const outline = {
+ font2: {
+ 'normal-400': true,
+ },
+ };
+
+ const result = isFontFontFaceInOutline( slug, face, outline );
+
+ expect( result ).toBe( false );
+ } );
+
+ test( 'should return true when outline has the slug and the matching fontStyle-fontWeight', () => {
+ const slug = 'font1';
+ const face = { fontStyle: 'normal', fontWeight: '400' };
+ const outline = {
+ font1: {
+ 'normal-400': true,
+ 'italic-700': true,
+ },
+ };
+
+ const result = isFontFontFaceInOutline( slug, face, outline );
+
+ expect( result ).toBe( true );
+ } );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFormDataFromFontFamilies.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFormDataFromFontFamilies.spec.js
index 9db0195f30072e..4adae7889cc5e5 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFormDataFromFontFamilies.spec.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFormDataFromFontFamilies.spec.js
@@ -55,7 +55,7 @@ describe( 'makeFormDataFromFontFamilies', () => {
fontFamily: 'Bebas',
},
];
- expect( JSON.parse( formData.get( 'fontFamilies' ) ) ).toEqual(
+ expect( JSON.parse( formData.get( 'font_families' ) ) ).toEqual(
expectedFontFamilies
);
} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getPreviewStyle.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
similarity index 63%
rename from packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getPreviewStyle.spec.js
rename to packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
index 88cd91d352a807..f9f789a61fd6c0 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getPreviewStyle.spec.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
@@ -1,12 +1,12 @@
/**
* Internal dependencies
*/
-import { getPreviewStyle } from '../index';
+import { getFamilyPreviewStyle, formatFontFamily } from '../preview-styles';
-describe( 'getPreviewStyle', () => {
+describe( 'getFamilyPreviewStyle', () => {
it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
const family = { fontFamily: 'Rosario' };
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontWeight: '400',
@@ -23,7 +23,7 @@ describe( 'getPreviewStyle', () => {
{ fontStyle: 'normal', fontWeight: '600' },
],
};
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontStyle: 'normal',
@@ -40,7 +40,7 @@ describe( 'getPreviewStyle', () => {
{ fontStyle: 'italic', fontWeight: '600' },
],
};
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontStyle: 'italic',
@@ -57,7 +57,7 @@ describe( 'getPreviewStyle', () => {
{ fontStyle: 'normal', fontWeight: '700' },
],
};
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontStyle: 'normal',
@@ -74,7 +74,7 @@ describe( 'getPreviewStyle', () => {
{ fontStyle: 'normal', fontWeight: '400' },
],
};
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontStyle: 'normal',
@@ -92,7 +92,7 @@ describe( 'getPreviewStyle', () => {
{ fontStyle: 'normal', fontWeight: '600' },
],
};
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontStyle: 'normal',
@@ -110,7 +110,7 @@ describe( 'getPreviewStyle', () => {
{ fontStyle: 'italic', fontWeight: '200 900' },
],
};
- const result = getPreviewStyle( family );
+ const result = getFamilyPreviewStyle( family );
const expected = {
fontFamily: 'Rosario',
fontStyle: 'normal',
@@ -119,3 +119,43 @@ describe( 'getPreviewStyle', () => {
expect( result ).toEqual( expected );
} );
} );
+
+describe( 'formatFontFamily', () => {
+ it( 'should transform "Baloo 2, system-ui" correctly', () => {
+ expect( formatFontFamily( 'Baloo 2, system-ui' ) ).toBe(
+ "'Baloo 2', system-ui"
+ );
+ } );
+
+ it( 'should ignore extra spaces', () => {
+ expect( formatFontFamily( ' Baloo 2 , system-ui' ) ).toBe(
+ "'Baloo 2', system-ui"
+ );
+ } );
+
+ it( 'should keep quoted strings unchanged', () => {
+ expect(
+ formatFontFamily(
+ "Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+ )
+ ).toBe(
+ "Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+ );
+ } );
+
+ it( 'should wrap single font name with spaces in quotes', () => {
+ expect( formatFontFamily( 'Baloo 2' ) ).toBe( "'Baloo 2'" );
+ } );
+
+ it( 'should wrap multiple font names with spaces in quotes', () => {
+ expect( formatFontFamily( 'Baloo Bhai 2, Baloo 2' ) ).toBe(
+ "'Baloo Bhai 2', 'Baloo 2'"
+ );
+ } );
+
+ it( 'should wrap only those font names with spaces which are not already quoted', () => {
+ expect( formatFontFamily( 'Baloo Bhai 2, Arial' ) ).toBe(
+ "'Baloo Bhai 2', Arial"
+ );
+ } );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js
new file mode 100644
index 00000000000000..7f81b57a77f665
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js
@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { sortFontFaces } from '../sort-font-faces';
+
+describe( 'sortFontFaces', () => {
+ it( 'should prioritize "normal" fontStyle and then sort by numeric fontWeight values', () => {
+ const input = [
+ { fontStyle: 'normal', fontWeight: '500' },
+ { fontStyle: 'normal', fontWeight: '400' },
+ ];
+ const expected = [
+ { fontStyle: 'normal', fontWeight: '400' },
+ { fontStyle: 'normal', fontWeight: '500' },
+ ];
+ expect( sortFontFaces( input ) ).toEqual( expected );
+ } );
+
+ it( 'should correctly sort named fontWeight values within the same fontStyle', () => {
+ const input = [
+ { fontStyle: 'italic', fontWeight: 'bold' },
+ { fontStyle: 'italic', fontWeight: 'normal' },
+ ];
+ const expected = [
+ { fontStyle: 'italic', fontWeight: 'normal' },
+ { fontStyle: 'italic', fontWeight: 'bold' },
+ ];
+ expect( sortFontFaces( input ) ).toEqual( expected );
+ } );
+
+ it( 'should prioritize fontStyle "normal" over other styles', () => {
+ const input = [
+ { fontStyle: 'italic', fontWeight: '400' },
+ { fontStyle: 'normal', fontWeight: '500' },
+ ];
+ const expected = [
+ { fontStyle: 'normal', fontWeight: '500' },
+ { fontStyle: 'italic', fontWeight: '400' },
+ ];
+ expect( sortFontFaces( input ) ).toEqual( expected );
+ } );
+
+ it( 'should sort other fontStyles alphabetically after "normal"', () => {
+ const input = [
+ { fontStyle: 'oblique', fontWeight: '500' },
+ { fontStyle: 'italic', fontWeight: '500' },
+ ];
+ const expected = [
+ { fontStyle: 'italic', fontWeight: '500' },
+ { fontStyle: 'oblique', fontWeight: '500' },
+ ];
+ expect( sortFontFaces( input ) ).toEqual( expected );
+ } );
+
+ it( 'should correctly handle multiple test cases', () => {
+ const input = [
+ { fontStyle: 'oblique', fontWeight: '300' },
+ { fontStyle: 'normal', fontWeight: '400' },
+ { fontStyle: 'italic', fontWeight: '500' },
+ { fontStyle: 'italic', fontWeight: 'bold' },
+ { fontStyle: 'italic', fontWeight: '600 900' },
+ { fontStyle: 'normal', fontWeight: '500' },
+ ];
+ const expected = [
+ { fontStyle: 'normal', fontWeight: '400' },
+ { fontStyle: 'normal', fontWeight: '500' },
+ { fontStyle: 'italic', fontWeight: '500' },
+ { fontStyle: 'italic', fontWeight: '600 900' },
+ { fontStyle: 'italic', fontWeight: 'bold' },
+ { fontStyle: 'oblique', fontWeight: '300' },
+ ];
+ expect( sortFontFaces( input ) ).toEqual( expected );
+ } );
+} );
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 644e08a6ee137a..2a895b68fa717f 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -22,7 +22,9 @@ function ScreenTypography() {
/>
<div className="edit-site-global-styles-screen-typography">
<VStack spacing={ 6 }>
- { window.__experimentalFontLibrary && <FontFamilies /> }
+ { ! window.__experimentalDisableFontLibrary && (
+ <FontFamilies />
+ ) }
<TypographyElements />
</VStack>
</div>
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 058dd1d054aed5..33a52809b0fb09 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -32,12 +32,19 @@ import { store as coreStore } from '@wordpress/core-data';
*/
import useEditedEntityRecord from '../../use-edited-entity-record';
import { store as editSiteStore } from '../../../store';
+import {
+ TEMPLATE_POST_TYPE,
+ NAVIGATION_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+ PATTERN_TYPES,
+ PATTERN_SYNC_TYPES,
+} from '../../../utils/constants';
const typeLabels = {
- wp_block: __( 'Editing pattern:' ),
- wp_navigation: __( 'Editing navigation menu:' ),
- wp_template: __( 'Editing template:' ),
- wp_template_part: __( 'Editing template part:' ),
+ [ PATTERN_TYPES.user ]: __( 'Editing pattern:' ),
+ [ NAVIGATION_POST_TYPE ]: __( 'Editing navigation menu:' ),
+ [ TEMPLATE_POST_TYPE ]: __( 'Editing template:' ),
+ [ TEMPLATE_PART_POST_TYPE ]: __( 'Editing template part:' ),
};
export default function DocumentActions() {
@@ -129,9 +136,9 @@ function TemplateDocumentActions( { className, onBack } ) {
}
let typeIcon = icon;
- if ( record.type === 'wp_navigation' ) {
+ if ( record.type === NAVIGATION_POST_TYPE ) {
typeIcon = navigationIcon;
- } else if ( record.type === 'wp_block' ) {
+ } else if ( record.type === PATTERN_TYPES.user ) {
typeIcon = symbol;
}
@@ -139,13 +146,15 @@ function TemplateDocumentActions( { className, onBack } ) {
<BaseDocumentActions
className={ classnames( className, {
'is-synced-entity':
- record.wp_pattern_sync_status !== 'unsynced',
+ record.wp_pattern_sync_status !==
+ PATTERN_SYNC_TYPES.unsynced,
} ) }
icon={ typeIcon }
onBack={ onBack }
>
<VisuallyHidden as="span">
- { typeLabels[ record.type ] ?? typeLabels.wp_template }
+ { typeLabels[ record.type ] ??
+ typeLabels[ TEMPLATE_POST_TYPE ] }
</VisuallyHidden>
{ getTitle() }
</BaseDocumentActions>
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index da682e995defd3..3528e0623fc7d5 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -53,7 +53,7 @@ const preventDefault = ( event ) => {
event.preventDefault();
};
-export default function HeaderEditMode() {
+export default function HeaderEditMode( { setListViewToggleElement } ) {
const inserterButton = useRef();
const {
deviceType,
@@ -259,6 +259,7 @@ export default function HeaderEditMode() {
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'List View' ) }
onClick={ toggleListView }
+ ref={ setListViewToggleElement }
shortcut={ listViewShortcut }
showTooltip={ ! showIconLabels }
variant={
diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
index e507b1bf2fbc59..edb093a487e772 100644
--- a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
@@ -60,7 +60,7 @@ import { withPluginContext } from '@wordpress/plugins';
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
export default compose(
withPluginContext( ( context, ownProps ) => {
diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
index 3b9bbd9288142a..4d6c8008497241 100644
--- a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
@@ -48,7 +48,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
export default function PluginSidebarMoreMenuItem( props ) {
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 80950d130a0a1b..c03ad2cd05ecd8 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -127,6 +127,8 @@ export default function Layout() {
const isEditorLoading = useIsSiteEditorLoading();
const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
useState( false );
+ const [ listViewToggleElement, setListViewToggleElement ] =
+ useState( null );
// This determines which animation variant should apply to the header.
// There is also a `isDistractionFreeHovering` state that gets priority
@@ -256,7 +258,11 @@ export default function Layout() {
ease: 'easeOut',
} }
>
- <Header />
+ <Header
+ setListViewToggleElement={
+ setListViewToggleElement
+ }
+ />
</NavigableRegion>
) }
</AnimatePresence>
@@ -369,6 +375,9 @@ export default function Layout() {
} }
>
<Editor
+ listViewToggleElement={
+ listViewToggleElement
+ }
isLoading={
isEditorLoading
}
diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js
index ede50d8e22c205..da6111e0b29bd5 100644
--- a/packages/edit-site/src/components/list/added-by.js
+++ b/packages/edit-site/src/components/list/added-by.js
@@ -19,10 +19,22 @@ import {
} from '@wordpress/icons';
import { _x } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+ TEMPLATE_ORIGINS,
+} from '../../utils/constants';
+
/** @typedef {'wp_template'|'wp_template_part'} TemplateType */
/** @type {TemplateType} */
-const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
+const TEMPLATE_POST_TYPE_NAMES = [
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+];
/**
* @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
@@ -64,11 +76,12 @@ export function useAddedBy( postType, postId ) {
// or 'custom' source.
if (
template.has_theme_file &&
- ( template.origin === 'theme' ||
+ ( template.origin === TEMPLATE_ORIGINS.theme ||
( ! template.origin &&
- [ 'theme', 'custom' ].includes(
- template.source
- ) ) )
+ [
+ TEMPLATE_ORIGINS.theme,
+ TEMPLATE_ORIGINS.custom,
+ ].includes( template.source ) ) )
) {
return {
type: 'theme',
@@ -76,18 +89,23 @@ export function useAddedBy( postType, postId ) {
text:
getTheme( template.theme )?.name?.rendered ||
template.theme,
- isCustomized: template.source === 'custom',
+ isCustomized:
+ template.source === TEMPLATE_ORIGINS.custom,
};
}
// Added by plugin.
- if ( template.has_theme_file && template.origin === 'plugin' ) {
+ if (
+ template.has_theme_file &&
+ template.origin === TEMPLATE_ORIGINS.plugin
+ ) {
return {
- type: 'plugin',
+ type: TEMPLATE_ORIGINS.plugin,
icon: pluginIcon,
text:
getPlugin( template.theme )?.name || template.theme,
- isCustomized: template.source === 'custom',
+ isCustomized:
+ template.source === TEMPLATE_ORIGINS.custom,
};
}
@@ -97,7 +115,7 @@ export function useAddedBy( postType, postId ) {
// site logo and title.
if (
! template.has_theme_file &&
- template.source === 'custom' &&
+ template.source === TEMPLATE_ORIGINS.custom &&
! template.author
) {
const siteData = getEntityRecord(
@@ -176,7 +194,7 @@ export default function AddedBy( { postType, postId } ) {
{ text }
{ isCustomized && (
<span className="edit-site-list-added-by__customized-info">
- { postType === 'wp_template'
+ { postType === TEMPLATE_POST_TYPE
? _x( 'Customized', 'template' )
: _x( 'Customized', 'template part' ) }
</span>
diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js
index cc01ad6ece7ff5..4fcf27239f05e2 100644
--- a/packages/edit-site/src/components/list/index.js
+++ b/packages/edit-site/src/components/list/index.js
@@ -17,6 +17,10 @@ import Header from './header';
import Table from './table';
import useTitle from '../routes/use-title';
import { unlock } from '../../lock-unlock';
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
const { useLocation } = unlock( routerPrivateApis );
@@ -25,7 +29,9 @@ export default function List() {
params: { path },
} = useLocation();
const templateType =
- path === '/wp_template/all' ? 'wp_template' : 'wp_template_part';
+ path === '/wp_template/all'
+ ? TEMPLATE_POST_TYPE
+ : TEMPLATE_PART_POST_TYPE;
useRegisterShortcuts();
diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
index 9d28c01164f29b..f3e021ba885244 100644
--- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
+++ b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
@@ -9,12 +9,7 @@ import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
-
-const PAGE_CONTENT_BLOCK_TYPES = [
- 'core/post-title',
- 'core/post-featured-image',
- 'core/post-content',
-];
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../utils/constants';
/**
* Component that when rendered, makes it so that the site editor allows only
@@ -48,8 +43,7 @@ const withDisableNonPageContentBlocks = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
const isDescendentOfQueryLoop = props.context.queryId !== undefined;
const isPageContent =
- PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
- ! isDescendentOfQueryLoop;
+ PAGE_CONTENT_BLOCK_TYPES[ props.name ] && ! isDescendentOfQueryLoop;
const mode = isPageContent ? 'contentOnly' : undefined;
useBlockEditingMode( mode );
return <BlockEdit { ...props } />;
diff --git a/packages/edit-site/src/components/page-content-focus-manager/index.js b/packages/edit-site/src/components/page-content-focus-manager/index.js
index 935ba1c96248cf..05bcc0da003cfc 100644
--- a/packages/edit-site/src/components/page-content-focus-manager/index.js
+++ b/packages/edit-site/src/components/page-content-focus-manager/index.js
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
-import { useSelect } from '@wordpress/data';
-
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
@@ -10,12 +10,37 @@ import { store as editSiteStore } from '../../store';
import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
import EditTemplateNotification from './edit-template-notification';
import BackToPageNotification from './back-to-page-notification';
+import { unlock } from '../../lock-unlock';
export default function PageContentFocusManager( { contentRef } ) {
- const hasPageContentFocus = useSelect(
- ( select ) => select( editSiteStore ).hasPageContentFocus(),
+ const { hasPageContentFocus, pageContentFocusType, canvasMode } = useSelect(
+ ( select ) => {
+ const { getPageContentFocusType, getCanvasMode } = unlock(
+ select( editSiteStore )
+ );
+ const _canvasMode = getCanvasMode();
+ return {
+ canvasMode: _canvasMode,
+ pageContentFocusType: getPageContentFocusType(),
+ hasPageContentFocus:
+ select( editSiteStore ).hasPageContentFocus(),
+ };
+ },
[]
);
+ const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
+
+ /*
+ * Ensure that the page content focus type is set to `disableTemplate` when
+ * the canvas mode is not `edit`. This makes the experience consistent with
+ * refreshing the page, which resets the page content focus type.
+ */
+ useEffect( () => {
+ if ( canvasMode !== 'edit' && !! pageContentFocusType ) {
+ setPageContentFocusType( null );
+ }
+ }, [ canvasMode, pageContentFocusType ] );
+
return (
<>
{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
index af017a8db9700a..10b5b99dc2fbf5 100644
--- a/packages/edit-site/src/components/page-main/index.js
+++ b/packages/edit-site/src/components/page-main/index.js
@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
import PagePatterns from '../page-patterns';
import PageTemplateParts from '../page-template-parts';
import PageTemplates from '../page-templates';
+import PagePages from '../page-pages';
import { unlock } from '../../lock-unlock';
const { useLocation } = unlock( routerPrivateApis );
@@ -24,6 +25,8 @@ export default function PageMain() {
return <PageTemplateParts />;
} else if ( path === '/patterns' ) {
return <PagePatterns />;
+ } else if ( window?.__experimentalAdminViews && path === '/pages' ) {
+ return <PagePages />;
}
return null;
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
new file mode 100644
index 00000000000000..e7b8f913efe7ca
--- /dev/null
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -0,0 +1,190 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import {
+ VisuallyHidden,
+ __experimentalHeading as Heading,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Link from '../routes/link';
+import PageActions from '../page-actions';
+import { DataViews, PAGE_SIZE_VALUES } from '../dataviews';
+
+const EMPTY_ARRAY = [];
+
+export default function PagePages() {
+ const [ reset, setResetQuery ] = useState( ( v ) => ! v );
+ const [ globalFilter, setGlobalFilter ] = useState( '' );
+ const [ paginationInfo, setPaginationInfo ] = useState();
+ const [ { pageIndex, pageSize }, setPagination ] = useState( {
+ pageIndex: 0,
+ pageSize: PAGE_SIZE_VALUES[ 0 ],
+ } );
+ // Request post statuses to get the proper labels.
+ const [ postStatuses, setPostStatuses ] = useState( EMPTY_ARRAY );
+ useEffect( () => {
+ apiFetch( {
+ path: '/wp/v2/statuses',
+ } ).then( setPostStatuses );
+ }, [] );
+
+ // TODO: probably memo other objects passed as state(ex:https://tanstack.com/table/v8/docs/examples/react/pagination-controlled).
+ const pagination = useMemo(
+ () => ( { pageIndex, pageSize } ),
+ [ pageIndex, pageSize ]
+ );
+ const [ sorting, setSorting ] = useState( [
+ { order: 'desc', orderby: 'date' },
+ ] );
+ const queryArgs = useMemo(
+ () => ( {
+ per_page: pageSize,
+ page: pageIndex + 1, // tanstack starts from zero.
+ _embed: 'author',
+ order: sorting[ 0 ]?.desc ? 'desc' : 'asc',
+ orderby: sorting[ 0 ]?.id,
+ search: globalFilter,
+ status: [ 'publish', 'draft' ],
+ } ),
+ [
+ globalFilter,
+ sorting[ 0 ]?.id,
+ sorting[ 0 ]?.desc,
+ pageSize,
+ pageIndex,
+ reset,
+ ]
+ );
+ const { records, isResolving: isLoading } = useEntityRecords(
+ 'postType',
+ 'page',
+ queryArgs
+ );
+ useEffect( () => {
+ // Make extra request to handle controlled pagination.
+ apiFetch( {
+ path: addQueryArgs( '/wp/v2/pages', {
+ ...queryArgs,
+ _fields: 'id',
+ } ),
+ method: 'HEAD',
+ parse: false,
+ } ).then( ( res ) => {
+ const totalPages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
+ const totalItems = parseInt( res.headers.get( 'X-WP-Total' ) );
+ setPaginationInfo( {
+ totalPages,
+ totalItems,
+ } );
+ } );
+ // Status should not make extra request if already did..
+ }, [ globalFilter, pageSize, reset ] );
+
+ const fields = useMemo(
+ () => [
+ {
+ header: __( 'Title' ),
+ id: 'title',
+ accessorFn: ( page ) => page.title?.rendered || page.slug,
+ cell: ( props ) => {
+ const page = props.row.original;
+ return (
+ <VStack spacing={ 1 }>
+ <Heading as="h3" level={ 5 }>
+ <Link
+ params={ {
+ postId: page.id,
+ postType: page.type,
+ canvas: 'edit',
+ } }
+ >
+ { decodeEntities( props.getValue() ) }
+ </Link>
+ </Heading>
+ </VStack>
+ );
+ },
+ maxWidth: 400,
+ sortingFn: 'alphanumeric',
+ enableHiding: false,
+ },
+ {
+ header: __( 'Author' ),
+ id: 'author',
+ accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
+ cell: ( props ) => {
+ const author = props.row.original._embedded?.author[ 0 ];
+ return (
+ <a href={ `user-edit.php?user_id=${ author.id }` }>
+ { author.name }
+ </a>
+ );
+ },
+ },
+ {
+ header: 'Status',
+ id: 'status',
+ cell: ( props ) =>
+ postStatuses[ props.row.original.status ]?.name,
+ },
+ {
+ header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+ id: 'actions',
+ cell: ( props ) => {
+ const page = props.row.original;
+ return (
+ <PageActions
+ postId={ page.id }
+ onRemove={ () => setResetQuery() }
+ />
+ );
+ },
+ enableHiding: false,
+ },
+ ],
+ [ postStatuses ]
+ );
+
+ // TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
+ return (
+ <Page title={ __( 'Pages' ) }>
+ <DataViews
+ paginationInfo={ paginationInfo }
+ data={ records || EMPTY_ARRAY }
+ isLoading={ isLoading }
+ fields={ fields }
+ options={ {
+ manualSorting: true,
+ manualFiltering: true,
+ manualPagination: true,
+ enableRowSelection: true,
+ state: {
+ sorting,
+ globalFilter,
+ pagination,
+ },
+ pageCount: paginationInfo?.totalPages,
+ onSortingChange: setSorting,
+ onGlobalFilterChange: ( value ) => {
+ setGlobalFilter( value );
+ setPagination( { pageIndex: 0, pageSize } );
+ },
+ // TODO: check these callbacks and maybe reset the query when needed...
+ onPaginationChange: setPagination,
+ meta: { resetQuery: setResetQuery },
+ } }
+ />
+ </Page>
+ );
+}
diff --git a/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
index c562ffbeeb6c83..a882de95bdaebe 100644
--- a/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
+++ b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
@@ -70,7 +70,7 @@ export default function DuplicateMenuItem( {
const result = await saveEntityRecord(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
{ slug, title, content, area },
{ throwOnError: true }
);
@@ -156,13 +156,13 @@ export default function DuplicateMenuItem( {
const title = sprintf(
/* translators: %s: Existing pattern title */
__( '%s (Copy)' ),
- item.title
+ item.title || item.name
);
- const categories = await getCategories( item.categories );
+ const categories = await getCategories( item.categories || [] );
const result = await saveEntityRecord(
'postType',
- 'wp_block',
+ PATTERN_TYPES.user,
{
content: isThemePattern
? item.content
@@ -179,7 +179,7 @@ export default function DuplicateMenuItem( {
sprintf(
// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
__( '"%s" duplicated.' ),
- item.title
+ item.title || item.name
),
{
type: 'snackbar',
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index f1da1f925229d5..5c2802891b949a 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -75,7 +75,7 @@ function GridItem( { categoryId, item, ...props } ) {
postType: item.type,
postId: isUserPattern ? item.id : item.name,
categoryId,
- categoryType: item.type,
+ categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
} );
const isEmpty = ! item.blocks?.length;
@@ -113,14 +113,14 @@ function GridItem( { categoryId, item, ...props } ) {
const exportAsJSON = () => {
const json = {
__file: item.type,
- title: item.title,
+ title: item.title || item.name,
content: item.patternBlock.content.raw,
syncStatus: item.patternBlock.wp_pattern_sync_status,
};
return downloadjs(
JSON.stringify( json, null, 2 ),
- `${ kebabCase( item.title ) }.json`,
+ `${ kebabCase( item.title || item.name ) }.json`,
'application/json'
);
};
@@ -160,7 +160,7 @@ function GridItem( { categoryId, item, ...props } ) {
: sprintf(
// translators: %s: The pattern or template part's title e.g. 'Call to action'.
__( 'Are you sure you want to delete "%s"?' ),
- item.title
+ item.title || item.name
);
const additionalStyles = ! backgroundColor
@@ -246,7 +246,7 @@ function GridItem( { categoryId, item, ...props } ) {
// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
tabIndex="-1"
>
- { item.title }
+ { item.title || item.name }
</Button>
</Heading>
) }
diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js
index 32fa6ebe55b39d..59a8cc431567f9 100644
--- a/packages/edit-site/src/components/page-patterns/grid.js
+++ b/packages/edit-site/src/components/page-patterns/grid.js
@@ -9,7 +9,7 @@ export default function Grid( { categoryId, items, ...props } ) {
}
return (
- <ul role="listbox" className="edit-site-patterns__grid" { ...props }>
+ <ul className="edit-site-patterns__grid" { ...props }>
{ items.map( ( item ) => (
<GridItem
key={ item.name }
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 6861b26d653870..713fa21c8fe923 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -18,7 +18,7 @@ const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
export default function PagePatterns() {
const { categoryType, categoryId } = getQueryArgs( window.location.href );
- const type = categoryType || PATTERN_TYPES.user;
+ const type = categoryType || PATTERN_TYPES.theme;
const category = categoryId || PATTERN_DEFAULT_CATEGORY;
const settings = usePatternSettings();
diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
index 95e6824c58144a..bbcb7e7910211a 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -35,7 +35,7 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
const SYNC_FILTERS = {
all: __( 'All' ),
[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
- [ PATTERN_SYNC_TYPES.unsynced ]: __( 'Standard' ),
+ [ PATTERN_SYNC_TYPES.unsynced ]: __( 'Not synced' ),
};
const SYNC_DESCRIPTIONS = {
diff --git a/packages/edit-site/src/components/page-patterns/search-items.js b/packages/edit-site/src/components/page-patterns/search-items.js
index 3c9beca587c24f..183cf3bad140d6 100644
--- a/packages/edit-site/src/components/page-patterns/search-items.js
+++ b/packages/edit-site/src/components/page-patterns/search-items.js
@@ -7,7 +7,11 @@ import { noCase } from 'change-case';
/**
* Internal dependencies
*/
-import { PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
+import {
+ PATTERN_DEFAULT_CATEGORY,
+ PATTERN_USER_CATEGORY,
+ PATTERN_TYPES,
+} from '../../utils/constants';
// Default search helpers.
const defaultGetName = ( item ) => item.name || '';
@@ -141,6 +145,8 @@ function getItemSearchRank( item, searchTerm, config ) {
let rank =
categoryId === PATTERN_DEFAULT_CATEGORY ||
+ ( categoryId === PATTERN_USER_CATEGORY &&
+ item.type === PATTERN_TYPES.user ) ||
hasCategory( item, categoryId )
? 1
: 0;
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index daaa9dd7822da6..6504b6f59684c6 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
/**
* WordPress dependencies
*/
@@ -16,6 +21,8 @@ import {
PATTERN_TYPES,
PATTERN_SYNC_TYPES,
TEMPLATE_PART_POST_TYPE,
+ TEMPLATE_ORIGINS,
+ TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
} from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import { searchItems } from './search-items';
@@ -32,7 +39,7 @@ const templatePartToPattern = ( templatePart ) => ( {
} ),
categories: [ templatePart.area ],
description: templatePart.description || '',
- isCustom: templatePart.source === 'custom',
+ isCustom: templatePart.source === TEMPLATE_ORIGINS.custom,
keywords: templatePart.keywords || [],
id: createTemplatePartId( templatePart.theme, templatePart.slug ),
name: createTemplatePartId( templatePart.theme, templatePart.slug ),
@@ -41,108 +48,140 @@ const templatePartToPattern = ( templatePart ) => ( {
templatePart,
} );
-const selectTemplatePartsAsPatterns = (
- select,
- { categoryId, search = '' } = {}
-) => {
- const { getEntityRecords, getIsResolving } = select( coreStore );
- const { __experimentalGetDefaultTemplatePartAreas } = select( editorStore );
- const query = { per_page: -1 };
- const rawTemplateParts =
- getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
- EMPTY_PATTERN_LIST;
- const templateParts = rawTemplateParts.map( ( templatePart ) =>
- templatePartToPattern( templatePart )
- );
+const selectTemplatePartsAsPatterns = createSelector(
+ ( select, categoryId, search = '' ) => {
+ const { getEntityRecords, getIsResolving } = select( coreStore );
+ const { __experimentalGetDefaultTemplatePartAreas } =
+ select( editorStore );
+ const query = { per_page: -1 };
+ const rawTemplateParts =
+ getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
+ EMPTY_PATTERN_LIST;
+ const templateParts = rawTemplateParts.map( ( templatePart ) =>
+ templatePartToPattern( templatePart )
+ );
- // In the case where a custom template part area has been removed we need
- // the current list of areas to cross check against so orphaned template
- // parts can be treated as uncategorized.
- const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
- const templatePartAreas = knownAreas.map( ( area ) => area.area );
+ // In the case where a custom template part area has been removed we need
+ // the current list of areas to cross check against so orphaned template
+ // parts can be treated as uncategorized.
+ const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+ const templatePartAreas = knownAreas.map( ( area ) => area.area );
- const templatePartHasCategory = ( item, category ) => {
- if ( category !== 'uncategorized' ) {
- return item.templatePart.area === category;
- }
+ const templatePartHasCategory = ( item, category ) => {
+ if ( category !== TEMPLATE_PART_AREA_DEFAULT_CATEGORY ) {
+ return item.templatePart.area === category;
+ }
- return (
- item.templatePart.area === category ||
- ! templatePartAreas.includes( item.templatePart.area )
- );
- };
+ return (
+ item.templatePart.area === category ||
+ ! templatePartAreas.includes( item.templatePart.area )
+ );
+ };
+
+ const isResolving = getIsResolving( 'getEntityRecords', [
+ 'postType',
+ TEMPLATE_PART_POST_TYPE,
+ query,
+ ] );
- const isResolving = getIsResolving( 'getEntityRecords', [
- 'postType',
- 'wp_template_part',
- query,
- ] );
+ const patterns = searchItems( templateParts, search, {
+ categoryId,
+ hasCategory: templatePartHasCategory,
+ } );
- const patterns = searchItems( templateParts, search, {
- categoryId,
- hasCategory: templatePartHasCategory,
- } );
+ return { patterns, isResolving };
+ },
+ ( select ) => [
+ select( coreStore ).getEntityRecords(
+ 'postType',
+ TEMPLATE_PART_POST_TYPE,
+ {
+ per_page: -1,
+ }
+ ),
+ select( coreStore ).getIsResolving( 'getEntityRecords', [
+ 'postType',
+ TEMPLATE_PART_POST_TYPE,
+ { per_page: -1 },
+ ] ),
+ select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+ ]
+);
- return { patterns, isResolving };
-};
+const selectThemePatterns = createSelector(
+ ( select ) => {
+ const { getSettings } = unlock( select( editSiteStore ) );
+ const settings = getSettings();
+ const blockPatterns =
+ settings.__experimentalAdditionalBlockPatterns ??
+ settings.__experimentalBlockPatterns;
-const selectThemePatterns = ( select ) => {
- const { getSettings } = unlock( select( editSiteStore ) );
- const settings = getSettings();
- const blockPatterns =
- settings.__experimentalAdditionalBlockPatterns ??
- settings.__experimentalBlockPatterns;
+ const restBlockPatterns = select( coreStore ).getBlockPatterns();
- const restBlockPatterns = select( coreStore ).getBlockPatterns();
+ const patterns = [
+ ...( blockPatterns || [] ),
+ ...( restBlockPatterns || [] ),
+ ]
+ .filter(
+ ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source )
+ )
+ .filter( filterOutDuplicatesByName )
+ .filter( ( pattern ) => pattern.inserter !== false )
+ .map( ( pattern ) => ( {
+ ...pattern,
+ keywords: pattern.keywords || [],
+ type: PATTERN_TYPES.theme,
+ blocks: parse( pattern.content, {
+ __unstableSkipMigrationLogs: true,
+ } ),
+ } ) );
- const patterns = [
- ...( blockPatterns || [] ),
- ...( restBlockPatterns || [] ),
+ return { patterns, isResolving: false };
+ },
+ ( select ) => [
+ select( coreStore ).getBlockPatterns(),
+ unlock( select( editSiteStore ) ).getSettings(),
]
- .filter(
- ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source )
- )
- .filter( filterOutDuplicatesByName )
- .filter( ( pattern ) => pattern.inserter !== false )
- .map( ( pattern ) => ( {
- ...pattern,
- keywords: pattern.keywords || [],
- type: PATTERN_TYPES.theme,
- blocks: parse( pattern.content, {
- __unstableSkipMigrationLogs: true,
- } ),
- } ) );
-
- return { patterns, isResolving: false };
-};
-const selectPatterns = (
- select,
- { categoryId, search = '', syncStatus } = {}
-) => {
- const { patterns: themePatterns } = selectThemePatterns( select );
- const { patterns: userPatterns } = selectUserPatterns( select );
+);
- let patterns = [ ...( themePatterns || [] ), ...( userPatterns || [] ) ];
+const selectPatterns = createSelector(
+ ( select, categoryId, syncStatus, search = '' ) => {
+ const { patterns: themePatterns } = selectThemePatterns( select );
+ const { patterns: userPatterns } = selectUserPatterns( select );
- if ( syncStatus ) {
- patterns = patterns.filter(
- ( pattern ) => pattern.syncStatus === syncStatus
- );
- }
+ let patterns = [
+ ...( themePatterns || [] ),
+ ...( userPatterns || [] ),
+ ];
- if ( categoryId ) {
- patterns = searchItems( patterns, search, {
- categoryId,
- hasCategory: ( item, currentCategory ) =>
- item.categories?.includes( currentCategory ),
- } );
- } else {
- patterns = searchItems( patterns, search, {
- hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
- } );
- }
- return { patterns, isResolving: false };
-};
+ if ( syncStatus ) {
+ // User patterns can have their sync statuses checked directly
+ // Non-user patterns are all unsynced for the time being.
+ patterns = patterns.filter( ( pattern ) => {
+ return pattern.id
+ ? pattern.syncStatus === syncStatus
+ : syncStatus === PATTERN_SYNC_TYPES.unsynced;
+ } );
+ }
+
+ if ( categoryId ) {
+ patterns = searchItems( patterns, search, {
+ categoryId,
+ hasCategory: ( item, currentCategory ) =>
+ item.categories?.includes( currentCategory ),
+ } );
+ } else {
+ patterns = searchItems( patterns, search, {
+ hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+ } );
+ }
+ return { patterns, isResolving: false };
+ },
+ ( select ) => [
+ selectThemePatterns( select ),
+ selectUserPatterns( select ),
+ ]
+);
const patternBlockToPattern = ( patternBlock, categories ) => ( {
blocks: parse( patternBlock.content.raw, {
@@ -164,44 +203,65 @@ const patternBlockToPattern = ( patternBlock, categories ) => ( {
patternBlock,
} );
-const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
- const { getEntityRecords, getIsResolving, getUserPatternCategories } =
- select( coreStore );
+const selectUserPatterns = createSelector(
+ ( select, syncStatus, search = '' ) => {
+ const { getEntityRecords, getIsResolving, getUserPatternCategories } =
+ select( coreStore );
- const query = { per_page: -1 };
- const records = getEntityRecords( 'postType', PATTERN_TYPES.user, query );
- const userPatternCategories = getUserPatternCategories();
- const categories = new Map();
- userPatternCategories.forEach( ( userCategory ) =>
- categories.set( userCategory.id, userCategory )
- );
- let patterns = records
- ? records.map( ( record ) =>
- patternBlockToPattern( record, categories )
- )
- : EMPTY_PATTERN_LIST;
-
- const isResolving = getIsResolving( 'getEntityRecords', [
- 'postType',
- PATTERN_TYPES.user,
- query,
- ] );
-
- if ( syncStatus ) {
- patterns = patterns.filter(
- ( pattern ) => pattern.syncStatus === syncStatus
+ const query = { per_page: -1 };
+ const records = getEntityRecords(
+ 'postType',
+ PATTERN_TYPES.user,
+ query
);
- }
+ const userPatternCategories = getUserPatternCategories();
+ const categories = new Map();
+ userPatternCategories.forEach( ( userCategory ) =>
+ categories.set( userCategory.id, userCategory )
+ );
+ let patterns = records
+ ? records.map( ( record ) =>
+ patternBlockToPattern( record, categories )
+ )
+ : EMPTY_PATTERN_LIST;
- patterns = searchItems( patterns, search, {
- // We exit user pattern retrieval early if we aren't in the
- // catch-all category for user created patterns, so it has
- // to be in the category.
- hasCategory: () => true,
- } );
+ const isResolving = getIsResolving( 'getEntityRecords', [
+ 'postType',
+ PATTERN_TYPES.user,
+ query,
+ ] );
- return { patterns, isResolving, categories: userPatternCategories };
-};
+ if ( syncStatus ) {
+ patterns = patterns.filter(
+ ( pattern ) => pattern.syncStatus === syncStatus
+ );
+ }
+
+ patterns = searchItems( patterns, search, {
+ // We exit user pattern retrieval early if we aren't in the
+ // catch-all category for user created patterns, so it has
+ // to be in the category.
+ hasCategory: () => true,
+ } );
+
+ return {
+ patterns,
+ isResolving,
+ categories: userPatternCategories,
+ };
+ },
+ ( select ) => [
+ select( coreStore ).getEntityRecords( 'postType', PATTERN_TYPES.user, {
+ per_page: -1,
+ } ),
+ select( coreStore ).getIsResolving( 'getEntityRecords', [
+ 'postType',
+ PATTERN_TYPES.user,
+ { per_page: -1 },
+ ] ),
+ select( coreStore ).getUserPatternCategories(),
+ ]
+);
export const usePatterns = (
categoryType,
@@ -211,20 +271,20 @@ export const usePatterns = (
return useSelect(
( select ) => {
if ( categoryType === TEMPLATE_PART_POST_TYPE ) {
- return selectTemplatePartsAsPatterns( select, {
+ return selectTemplatePartsAsPatterns(
+ select,
categoryId,
- search,
- } );
+ search
+ );
} else if ( categoryType === PATTERN_TYPES.theme ) {
- return selectPatterns( select, {
- categoryId,
- search,
- syncStatus,
- } );
+ return selectPatterns( select, categoryId, syncStatus, search );
} else if ( categoryType === PATTERN_TYPES.user ) {
- return selectUserPatterns( select, { search, syncStatus } );
+ return selectUserPatterns( select, syncStatus, search );
}
- return { patterns: EMPTY_PATTERN_LIST, isResolving: false };
+ return {
+ patterns: EMPTY_PATTERN_LIST,
+ isResolving: false,
+ };
},
[ categoryId, categoryType, search, syncStatus ]
);
diff --git a/packages/edit-site/src/components/page-template-parts/add-new-template-part.js b/packages/edit-site/src/components/page-template-parts/add-new-template-part.js
index d2b52a88701fda..8d46010587242a 100644
--- a/packages/edit-site/src/components/page-template-parts/add-new-template-part.js
+++ b/packages/edit-site/src/components/page-template-parts/add-new-template-part.js
@@ -13,6 +13,7 @@ import { Button } from '@wordpress/components';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import CreateTemplatePartModal from '../create-template-part-modal';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
const { useHistory } = unlock( routerPrivateApis );
@@ -22,7 +23,9 @@ export default function AddNewTemplatePart() {
select( editSiteStore ).getSettings();
return {
canCreate: ! supportsTemplatePartsMode,
- postType: select( coreStore ).getPostType( 'wp_template_part' ),
+ postType: select( coreStore ).getPostType(
+ TEMPLATE_PART_POST_TYPE
+ ),
};
}, [] );
const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -45,7 +48,7 @@ export default function AddNewTemplatePart() {
setIsModalOpen( false );
history.push( {
postId: templatePart.id,
- postType: 'wp_template_part',
+ postType: TEMPLATE_PART_POST_TYPE,
canvas: 'edit',
} );
} }
diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js
index e03d726a575254..2a8c41e333ce27 100644
--- a/packages/edit-site/src/components/page-template-parts/index.js
+++ b/packages/edit-site/src/components/page-template-parts/index.js
@@ -9,6 +9,7 @@ import {
import { __ } from '@wordpress/i18n';
import { useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
@@ -19,11 +20,19 @@ import Link from '../routes/link';
import AddedBy from '../list/added-by';
import TemplateActions from '../template-actions';
import AddNewTemplatePart from './add-new-template-part';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
export default function PageTemplateParts() {
+ const {
+ params: { didAccessPatternsPage },
+ } = useLocation();
+
const { records: templateParts } = useEntityRecords(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
{
per_page: -1,
}
@@ -39,8 +48,13 @@ export default function PageTemplateParts() {
params={ {
postId: templatePart.id,
postType: templatePart.type,
+ didAccessPatternsPage: !! didAccessPatternsPage
+ ? 1
+ : undefined,
+ } }
+ state={ {
+ backPath: '/wp_template_part/all',
} }
- state={ { backPath: '/wp_template_part/all' } }
>
{ decodeEntities(
templatePart.title?.rendered ||
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 5b0a306fa7fef3..55c666970b5cc2 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -20,11 +20,12 @@ import Link from '../routes/link';
import AddedBy from '../list/added-by';
import TemplateActions from '../template-actions';
import AddNewTemplate from '../add-new-template';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
export default function PageTemplates() {
const { records: templates } = useEntityRecords(
'postType',
- 'wp_template',
+ TEMPLATE_POST_TYPE,
{
per_page: -1,
}
@@ -79,7 +80,7 @@ export default function PageTemplates() {
title={ __( 'Templates' ) }
actions={
<AddNewTemplate
- templateType={ 'wp_template' }
+ templateType={ TEMPLATE_POST_TYPE }
showIcon={ false }
toggleProps={ { variant: 'primary' } }
/>
diff --git a/packages/edit-site/src/components/plugin-template-setting-panel/index.js b/packages/edit-site/src/components/plugin-template-setting-panel/index.js
index 6a059dc2520ad2..0c279c91039a79 100644
--- a/packages/edit-site/src/components/plugin-template-setting-panel/index.js
+++ b/packages/edit-site/src/components/plugin-template-setting-panel/index.js
@@ -28,6 +28,6 @@ PluginTemplateSettingPanel.Slot = Slot;
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
export default PluginTemplateSettingPanel;
diff --git a/packages/edit-site/src/components/save-hub/index.js b/packages/edit-site/src/components/save-hub/index.js
index 9154429f770b0b..f43e843ee73c14 100644
--- a/packages/edit-site/src/components/save-hub/index.js
+++ b/packages/edit-site/src/components/save-hub/index.js
@@ -16,13 +16,14 @@ import { store as noticesStore } from '@wordpress/notices';
import SaveButton from '../save-button';
import { isPreviewingTheme } from '../../utils/is-previewing-theme';
import { unlock } from '../../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
const { useLocation } = unlock( routerPrivateApis );
const PUBLISH_ON_SAVE_ENTITIES = [
{
kind: 'postType',
- name: 'wp_navigation',
+ name: NAVIGATION_POST_TYPE,
},
];
diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
index 0e46e99decd2f5..f86b7b8c9784d0 100644
--- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -3,13 +3,9 @@
*/
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
-import {
- useFocusOnMount,
- useFocusReturn,
- useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
@@ -24,20 +20,27 @@ import { unlock } from '../../lock-unlock';
const { PrivateListView } = unlock( blockEditorPrivateApis );
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
const { setIsListViewOpened } = useDispatch( editSiteStore );
// This hook handles focus when the sidebar first renders.
const focusOnMountRef = useFocusOnMount( 'firstElement' );
- // The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
- const headerFocusReturnRef = useFocusReturn();
- const contentFocusReturnRef = useFocusReturn();
- function closeOnEscape( event ) {
- if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
- setIsListViewOpened( false );
- }
- }
+ // When closing the list view, focus should return to the toggle button.
+ const closeListView = useCallback( () => {
+ setIsListViewOpened( false );
+ listViewToggleElement?.focus();
+ }, [ listViewToggleElement, setIsListViewOpened ] );
+
+ const closeOnEscape = useCallback(
+ ( event ) => {
+ if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+ event.preventDefault();
+ closeListView();
+ }
+ },
+ [ closeListView ]
+ );
// Use internal state instead of a ref to make sure that the component
// re-renders when the dropZoneElement updates.
@@ -68,20 +71,26 @@ export default function ListViewSidebar() {
listViewFocusArea.focus();
}
- // This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
- useShortcut( 'core/edit-site/toggle-list-view', () => {
+ const handleToggleListViewShortcut = useCallback( () => {
// If the sidebar has focus, it is safe to close.
if (
sidebarRef.current.contains(
sidebarRef.current.ownerDocument.activeElement
)
) {
- setIsListViewOpened( false );
- // If the list view or close button does not have focus, focus should be moved to it.
+ closeListView();
} else {
+ // If the list view or close button does not have focus, focus should be moved to it.
handleSidebarFocus();
}
- } );
+ }, [ closeListView ] );
+
+ // This only fires when the sidebar is open because of the conditional rendering.
+ // It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+ useShortcut(
+ 'core/edit-site/toggle-list-view',
+ handleToggleListViewShortcut
+ );
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -90,22 +99,18 @@ export default function ListViewSidebar() {
onKeyDown={ closeOnEscape }
ref={ sidebarRef }
>
- <div
- className="edit-site-editor__list-view-panel-header"
- ref={ headerFocusReturnRef }
- >
+ <div className="edit-site-editor__list-view-panel-header">
<strong>{ __( 'List View' ) }</strong>
<Button
icon={ closeSmall }
label={ __( 'Close' ) }
- onClick={ () => setIsListViewOpened( false ) }
+ onClick={ closeListView }
ref={ sidebarCloseButtonRef }
/>
</div>
<div
className="edit-site-editor__list-view-panel-content"
ref={ useMergeRefs( [
- contentFocusReturnRef,
focusOnMountRef,
setDropZoneElement,
listViewRef,
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js
index 2295ee12f45049..8067453a518217 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js
@@ -11,7 +11,8 @@ import {
__experimentalText as Text,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import { check } from '@wordpress/icons';
/**
* Internal dependencies
@@ -19,6 +20,8 @@ import { store as coreStore } from '@wordpress/core-data';
import { store as editSiteStore } from '../../../store';
import SwapTemplateButton from './swap-template-button';
import ResetDefaultTemplate from './reset-default-template';
+import { unlock } from '../../../lock-unlock';
+import usePageContentBlocks from '../../block-editor/block-editor-provider/use-page-content-blocks';
const POPOVER_PROPS = {
className: 'edit-site-page-panels-edit-template__dropdown',
@@ -26,28 +29,50 @@ const POPOVER_PROPS = {
};
export default function EditTemplate() {
- const { hasResolved, template } = useSelect( ( select ) => {
- const { getEditedPostContext, getEditedPostType, getEditedPostId } =
- select( editSiteStore );
- const { getEditedEntityRecord, hasFinishedResolution } =
- select( coreStore );
- const _context = getEditedPostContext();
- const queryArgs = [
- 'postType',
- getEditedPostType(),
- getEditedPostId(),
- ];
- return {
- context: _context,
- hasResolved: hasFinishedResolution(
- 'getEditedEntityRecord',
- queryArgs
- ),
- template: getEditedEntityRecord( ...queryArgs ),
- };
- }, [] );
+ const { hasResolved, template, isTemplateHidden, postType } = useSelect(
+ ( select ) => {
+ const { getEditedPostContext, getEditedPostType, getEditedPostId } =
+ select( editSiteStore );
+ const { getCanvasMode, getPageContentFocusType } = unlock(
+ select( editSiteStore )
+ );
+ const { getEditedEntityRecord, hasFinishedResolution } =
+ select( coreStore );
+ const _context = getEditedPostContext();
+ const _postType = getEditedPostType();
+ const queryArgs = [
+ 'postType',
+ getEditedPostType(),
+ getEditedPostId(),
+ ];
+
+ return {
+ context: _context,
+ hasResolved: hasFinishedResolution(
+ 'getEditedEntityRecord',
+ queryArgs
+ ),
+ template: getEditedEntityRecord( ...queryArgs ),
+ isTemplateHidden:
+ getCanvasMode() === 'edit' &&
+ getPageContentFocusType() === 'hideTemplate',
+ postType: _postType,
+ };
+ },
+ []
+ );
+
+ const [ blocks ] = useEntityBlockEditor( 'postType', postType );
const { setHasPageContentFocus } = useDispatch( editSiteStore );
+ // Disable reason: `useDispatch` can't be called conditionally.
+ // eslint-disable-next-line @wordpress/no-unused-vars-before-return
+ const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
+ // Check if there are any post content block types in the blocks tree.
+ const pageContentBlocks = usePageContentBlocks( {
+ blocks,
+ isPageContentFocused: true,
+ } );
if ( ! hasResolved ) {
return null;
@@ -83,6 +108,24 @@ export default function EditTemplate() {
<SwapTemplateButton onClick={ onClose } />
</MenuGroup>
<ResetDefaultTemplate onClick={ onClose } />
+ { !! pageContentBlocks?.length && (
+ <MenuGroup>
+ <MenuItem
+ icon={
+ ! isTemplateHidden ? check : undefined
+ }
+ onClick={ () => {
+ setPageContentFocusType(
+ isTemplateHidden
+ ? 'disableTemplate'
+ : 'hideTemplate'
+ );
+ } }
+ >
+ { __( 'Template preview' ) }
+ </MenuItem>
+ </MenuGroup>
+ ) }
</>
) }
</DropdownMenu>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
index 3000d21ab13662..92fad17cd1d3e4 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
@@ -9,6 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import { store as editSiteStore } from '../../../store';
+import { TEMPLATE_POST_TYPE } from '../../../utils/constants';
export function useEditedPostContext() {
return useSelect(
@@ -31,10 +32,14 @@ export function useIsPostsPage() {
function useTemplates() {
return useSelect(
( select ) =>
- select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
- per_page: -1,
- post_type: 'page',
- } ),
+ select( coreStore ).getEntityRecords(
+ 'postType',
+ TEMPLATE_POST_TYPE,
+ {
+ per_page: -1,
+ post_type: 'page',
+ }
+ ),
[]
);
}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
index bc61b82a8d0057..fab050c62d2194 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
@@ -37,7 +37,7 @@ export default function ResetDefaultTemplate( { onClick } ) {
} );
} }
>
- { __( 'Reset' ) }
+ { __( 'Use default template' ) }
</MenuItem>
</MenuGroup>
);
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index aedcf5e46ca9ea..5501fe49e5876b 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -79,3 +79,9 @@
width: 30%;
}
}
+
+.edit-site-page-panels-edit-template__dropdown {
+ .components-popover__content {
+ min-width: 240px;
+ }
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
index 7bc951524e7e5c..569bad72ad7ef9 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
@@ -17,12 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface';
import { STORE_NAME } from '../../../store/constants';
import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
import { store as editSiteStore } from '../../../store';
-
-const entityLabels = {
- wp_navigation: __( 'Navigation' ),
- wp_block: __( 'Pattern' ),
- wp_template: __( 'Template' ),
-};
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';
const SettingsHeader = ( { sidebarName } ) => {
const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
@@ -35,7 +30,9 @@ const SettingsHeader = ( { sidebarName } ) => {
};
} );
- const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
+ const entityLabel =
+ POST_TYPE_LABELS[ entityType ] ||
+ POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ];
const { enableComplementaryArea } = useDispatch( interfaceStore );
const openTemplateSettings = () =>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js
new file mode 100644
index 00000000000000..b5e5988491396a
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js
@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants';
+import { unlock } from '../../../lock-unlock';
+
+function injectThemeAttributeInBlockTemplateContent(
+ block,
+ currentThemeStylesheet
+) {
+ block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+ return injectThemeAttributeInBlockTemplateContent(
+ innerBlock,
+ currentThemeStylesheet
+ );
+ } );
+
+ if (
+ block.name === 'core/template-part' &&
+ block.attributes.theme === undefined
+ ) {
+ block.attributes.theme = currentThemeStylesheet;
+ }
+ return block;
+}
+
+function preparePatterns( patterns, template, currentThemeStylesheet ) {
+ // Filter out duplicates.
+ const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+ index === items.findIndex( ( item ) => currentItem.name === item.name );
+
+ // Filter out core patterns.
+ const filterOutCorePatterns = ( pattern ) =>
+ ! PATTERN_CORE_SOURCES.includes( pattern.source );
+
+ // Filter only the patterns that are compatible with the current template.
+ const filterCompatiblePatterns = ( pattern ) =>
+ pattern.templateTypes?.includes( template.slug );
+
+ return patterns
+ .filter(
+ filterOutCorePatterns &&
+ filterOutDuplicatesByName &&
+ filterCompatiblePatterns
+ )
+ .map( ( pattern ) => ( {
+ ...pattern,
+ keywords: pattern.keywords || [],
+ type: PATTERN_TYPES.theme,
+ blocks: parse( pattern.content, {
+ __unstableSkipMigrationLogs: true,
+ } ).map( ( block ) =>
+ injectThemeAttributeInBlockTemplateContent(
+ block,
+ currentThemeStylesheet
+ )
+ ),
+ } ) );
+}
+
+export function useAvailablePatterns( template ) {
+ const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
+ useSelect( ( select ) => {
+ const { getSettings } = unlock( select( editSiteStore ) );
+ const settings = getSettings();
+
+ return {
+ blockPatterns:
+ settings.__experimentalAdditionalBlockPatterns ??
+ settings.__experimentalBlockPatterns,
+ restBlockPatterns: select( coreStore ).getBlockPatterns(),
+ currentThemeStylesheet:
+ select( coreStore ).getCurrentTheme().stylesheet,
+ };
+ }, [] );
+
+ return useMemo( () => {
+ const mergedPatterns = [
+ ...( blockPatterns || [] ),
+ ...( restBlockPatterns || [] ),
+ ];
+ return preparePatterns(
+ mergedPatterns,
+ template,
+ currentThemeStylesheet
+ );
+ }, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
index 388094576789d6..3740b622361ff5 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
@@ -3,13 +3,18 @@
*/
import { __, _x, sprintf } from '@wordpress/i18n';
import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, PanelRow } from '@wordpress/components';
+import { FormTokenField, FlexBlock, PanelRow } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { useDebounce } from '@wordpress/compose';
import { store as noticesStore } from '@wordpress/notices';
import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import { PATTERN_TYPES } from '../../../utils/constants';
+
export const unescapeString = ( arg ) => {
return decodeEntities( arg );
};
@@ -145,7 +150,8 @@ export default function PatternCategories( { post } ) {
);
}, [ searchResults ] );
- const { saveEntityRecord, editEntityRecord } = useDispatch( coreStore );
+ const { saveEntityRecord, editEntityRecord, invalidateResolution } =
+ useDispatch( coreStore );
const { createErrorNotice } = useDispatch( noticesStore );
if ( ! hasAssignAction ) {
@@ -157,6 +163,7 @@ export default function PatternCategories( { post } ) {
const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
throwOnError: true,
} );
+ invalidateResolution( 'getUserPatternCategories' );
return unescapeTerm( newTerm );
} catch ( error ) {
if ( error.code !== 'term_exists' ) {
@@ -171,7 +178,7 @@ export default function PatternCategories( { post } ) {
}
function onUpdateTerms( newTermIds ) {
- editEntityRecord( 'postType', 'wp_block', post.id, {
+ editEntityRecord( 'postType', PATTERN_TYPES.user, post.id, {
wp_pattern_category: newTermIds,
} );
}
@@ -250,21 +257,23 @@ export default function PatternCategories( { post } ) {
return (
<PanelRow initialOpen={ true } title={ __( 'Categories' ) }>
- <FormTokenField
- __next40pxDefaultSize
- value={ values }
- suggestions={ suggestions }
- onChange={ onChange }
- onInputChange={ debouncedSearch }
- maxSuggestions={ MAX_TERMS_SUGGESTIONS }
- label={ __( 'Pattern categories' ) }
- messages={ {
- added: termAddedLabel,
- removed: termRemovedLabel,
- remove: removeTermLabel,
- } }
- tokenizeOnBlur
- />
+ <FlexBlock>
+ <FormTokenField
+ __next40pxDefaultSize
+ value={ values }
+ suggestions={ suggestions }
+ onChange={ onChange }
+ onInputChange={ debouncedSearch }
+ maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+ label={ __( 'Pattern categories' ) }
+ messages={ {
+ added: termAddedLabel,
+ removed: termRemovedLabel,
+ remove: removeTermLabel,
+ } }
+ tokenizeOnBlur
+ />
+ </FlexBlock>
</PanelRow>
);
}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js
new file mode 100644
index 00000000000000..658aacd331debc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js
@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { useAsyncList } from '@wordpress/compose';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export default function ReplaceTemplateButton( {
+ onClick,
+ availableTemplates,
+} ) {
+ const { editEntityRecord } = useDispatch( coreStore );
+ const [ showModal, setShowModal ] = useState( false );
+ const onClose = () => {
+ setShowModal( false );
+ };
+
+ const { postId, postType } = useSelect( ( select ) => {
+ return {
+ postId: select( editSiteStore ).getEditedPostId(),
+ postType: select( editSiteStore ).getEditedPostType(),
+ };
+ }, [] );
+
+ const onTemplateSelect = async ( selectedTemplate ) => {
+ onClose(); // Close the template suggestions modal first.
+ onClick();
+ await editEntityRecord( 'postType', postType, postId, {
+ blocks: selectedTemplate.blocks,
+ content: serialize( selectedTemplate.blocks ),
+ } );
+ };
+
+ if ( ! availableTemplates.length || availableTemplates.length < 1 ) {
+ return null;
+ }
+
+ return (
+ <>
+ <MenuItem
+ info={ __(
+ 'Replace the contents of this template with another.'
+ ) }
+ onClick={ () => setShowModal( true ) }
+ >
+ { __( 'Replace template' ) }
+ </MenuItem>
+
+ { showModal && (
+ <Modal
+ title={ __( 'Choose a template' ) }
+ onRequestClose={ onClose }
+ overlayClassName="edit-site-template-panel__replace-template-modal"
+ isFullScreen
+ >
+ <div className="edit-site-template-panel__replace-template-modal__content">
+ <TemplatesList
+ availableTemplates={ availableTemplates }
+ onSelect={ onTemplateSelect }
+ />
+ </div>
+ </Modal>
+ ) }
+ </>
+ );
+}
+
+function TemplatesList( { availableTemplates, onSelect } ) {
+ const shownTemplates = useAsyncList( availableTemplates );
+
+ return (
+ <BlockPatternsList
+ label={ __( 'Templates' ) }
+ blockPatterns={ availableTemplates }
+ shownPatterns={ shownTemplates }
+ onClickPattern={ onSelect }
+ />
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
index 4c8ef94855dcb1..6eab753e8ad285 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
@@ -37,3 +37,21 @@ h3.edit-site-template-card__template-areas-title {
font-weight: 500;
margin: 0 0 $grid-unit-10;
}
+
+
+.edit-site-template-panel__replace-template-modal {
+ z-index: z-index(".edit-site-template-panel__replace-template-modal");
+}
+
+.edit-site-template-panel__replace-template-modal__content {
+ column-count: 2;
+ column-gap: $grid-unit-30;
+
+ @include break-medium() {
+ column-count: 3;
+ }
+
+ @include break-wide() {
+ column-count: 4;
+ }
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
index b68cf1ff617579..81acb244a11863 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
@@ -11,13 +11,21 @@ import { moreVertical } from '@wordpress/icons';
*/
import { store as editSiteStore } from '../../../store';
import isTemplateRevertable from '../../../utils/is-template-revertable';
+import ReplaceTemplateButton from './replace-template-button';
+import { useAvailablePatterns } from './hooks';
export default function Actions( { template } ) {
+ const availablePatterns = useAvailablePatterns( template );
const { revertTemplate } = useDispatch( editSiteStore );
const isRevertable = isTemplateRevertable( template );
- if ( ! isRevertable ) {
+
+ if (
+ ! isRevertable &&
+ ( ! availablePatterns.length || availablePatterns.length < 1 )
+ ) {
return null;
}
+
return (
<DropdownMenu
icon={ moreVertical }
@@ -27,17 +35,24 @@ export default function Actions( { template } ) {
>
{ ( { onClose } ) => (
<MenuGroup>
- <MenuItem
- info={ __(
- 'Use the template as supplied by the theme.'
- ) }
- onClick={ () => {
- revertTemplate( template );
- onClose();
- } }
- >
- { __( 'Clear customizations' ) }
- </MenuItem>
+ { isRevertable && (
+ <MenuItem
+ info={ __(
+ 'Use the template as supplied by the theme.'
+ ) }
+ onClick={ () => {
+ revertTemplate( template );
+ onClose();
+ } }
+ >
+ { __( 'Clear customizations' ) }
+ </MenuItem>
+ ) }
+ <ReplaceTemplateButton
+ availableTemplates={ availablePatterns }
+ template={ template }
+ onClick={ onClose }
+ />
</MenuGroup>
) }
</DropdownMenu>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js
index fd00d9d2c0e24d..24dcd301bf2399 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js
@@ -73,7 +73,7 @@ export default function TemplateAreas() {
<ul className="edit-site-template-card__template-areas-list">
{ templateParts.map( ( { templatePart, block } ) => (
- <li key={ templatePart.slug }>
+ <li key={ block.clientId }>
<TemplateAreaItem
area={ templatePart.area }
clientId={ block.clientId }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js
index 391017796b5e64..962062a96da743 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js
@@ -8,11 +8,12 @@ import { pencil } from '@wordpress/icons';
*/
import SidebarButton from '../sidebar-button';
import { useLink } from '../routes/link';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
export default function EditButton( { postId } ) {
const linkInfo = useLink( {
postId,
- postType: 'wp_navigation',
+ postType: NAVIGATION_POST_TYPE,
canvas: 'edit',
} );
return (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
index c7dbf919324f61..47a6cc53d6f246 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
@@ -6,10 +6,12 @@ import { __experimentalUseNavigator as useNavigator } from '@wordpress/component
import { __, sprintf } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
+
/**
* Internal dependencies
*/
import { postType } from '.';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
function useDeleteNavigationMenu() {
const { goTo } = useNavigator();
@@ -82,7 +84,7 @@ function useSaveNavigationMenu() {
// Prepare for revert in case of error.
const originalRecord = getEditedEntityRecord(
'postType',
- 'wp_navigation',
+ NAVIGATION_POST_TYPE,
postId
);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index c6c91d443947f6..43a4e85fb3640d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -22,6 +22,7 @@ import { useLink } from '../routes/link';
import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
import { unlock } from '../../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
function buildMenuLabel( title, id, status ) {
@@ -52,7 +53,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
hasResolved: hasResolvedNavigationMenus,
} = useEntityRecords(
'postType',
- `wp_navigation`,
+ NAVIGATION_POST_TYPE,
PRELOADED_NAVIGATION_MENUS_QUERY
);
@@ -151,7 +152,7 @@ export function SidebarNavigationScreenWrapper( {
const NavMenuItem = ( { postId, ...props } ) => {
const linkInfo = useLink( {
postId,
- postType: 'wp_navigation',
+ postType: NAVIGATION_POST_TYPE,
} );
return <SidebarNavigationItem { ...linkInfo } { ...props } />;
};
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 47c435a54e0caa..9389842391a779 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -21,6 +21,7 @@ import {
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
} from '../sidebar-navigation-screen-details-panel';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
// Taken from packages/editor/src/components/time-to-read/index.js.
const AVERAGE_READING_RATE = 189;
@@ -106,7 +107,7 @@ export default function PageDetails( { id } ) {
const postContext = getEditedPostContext();
const templates = select( coreStore ).getEntityRecords(
'postType',
- 'wp_template',
+ TEMPLATE_POST_TYPE,
{ per_page: -1 }
);
// Template title.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
index 13e5f9c3cb3266..e9a6163a0047e9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -24,6 +24,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
import SidebarButton from '../sidebar-button';
import AddNewPageModal from '../add-new-page';
import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
const { useHistory } = unlock( routerPrivateApis );
@@ -50,7 +51,7 @@ export default function SidebarNavigationScreenPages() {
}
);
const { records: templates, isResolving: isLoadingTemplates } =
- useEntityRecords( 'postType', 'wp_template', {
+ useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
per_page: -1,
} );
@@ -130,11 +131,21 @@ export default function SidebarNavigationScreenPages() {
return {
icon: itemIcon,
- postType: postsPageTemplateId ? 'wp_template' : 'page',
+ postType: postsPageTemplateId ? TEMPLATE_POST_TYPE : 'page',
postId: postsPageTemplateId || id,
};
};
+ const pagesLink = useLink( { path: '/pages' } );
+ const manageAllPagesProps = window?.__experimentalAdminViews
+ ? { ...pagesLink }
+ : {
+ href: 'edit.php?post_type=page',
+ onClick: () => {
+ document.location = 'edit.php?post_type=page';
+ },
+ };
+
return (
<>
{ showAddPage && (
@@ -167,7 +178,7 @@ export default function SidebarNavigationScreenPages() {
) }
{ isHomePageBlog && homeTemplate && (
<PageItem
- postType="wp_template"
+ postType={ TEMPLATE_POST_TYPE }
postId={ homeTemplate.id }
key={ homeTemplate.id }
icon={ home }
@@ -203,7 +214,7 @@ export default function SidebarNavigationScreenPages() {
<VStack spacing={ 0 }>
{ dynamicPageTemplates?.map( ( item ) => (
<PageItem
- postType="wp_template"
+ postType={ TEMPLATE_POST_TYPE }
postId={ item.id }
key={ item.id }
icon={ layout }
@@ -219,10 +230,7 @@ export default function SidebarNavigationScreenPages() {
) ) }
<SidebarNavigationItem
className="edit-site-sidebar-navigation-screen-pages__see-all"
- href="edit.php?post_type=page"
- onClick={ () => {
- document.location = 'edit.php?post_type=page';
- } }
+ { ...manageAllPagesProps }
>
{ __( 'Manage all pages' ) }
</SidebarNavigationItem>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
index d9701e5358dcb5..693d16914869ad 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -17,6 +17,7 @@ import usePatternDetails from './use-pattern-details';
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';
import TemplateActions from '../template-actions';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
export default function SidebarNavigationScreenPattern() {
const navigator = useNavigator();
@@ -34,7 +35,7 @@ export default function SidebarNavigationScreenPattern() {
// indicates the user has arrived at the template part via the "manage all"
// page and the back button should return them to that list page.
const backPath =
- ! categoryType && postType === 'wp_template_part'
+ ! categoryType && postType === TEMPLATE_PART_POST_TYPE
? '/wp_template_part/all'
: '/patterns';
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
index b685c766107a32..8a493130ad27db 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
@@ -9,16 +9,24 @@ import { __ } from '@wordpress/i18n';
*/
import SidebarNavigationItem from '../sidebar-navigation-item';
import { useLink } from '../routes/link';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
export default function TemplatePartNavigationMenuListItem( { id } ) {
- const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+ const [ title ] = useEntityProp(
+ 'postType',
+ NAVIGATION_POST_TYPE,
+ 'title',
+ id
+ );
const linkInfo = useLink( {
postId: id,
- postType: 'wp_navigation',
+ postType: NAVIGATION_POST_TYPE,
} );
- if ( ! id ) return null;
+ if ( ! id || title === undefined ) {
+ return null;
+ }
return (
<SidebarNavigationItem withChevron { ...linkInfo }>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
index a124c4163fc54c..40012ec46a85e4 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
@@ -9,11 +9,19 @@ import { useEntityProp } from '@wordpress/core-data';
* Internal dependencies
*/
import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
export default function TemplatePartNavigationMenu( { id } ) {
- const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+ const [ title ] = useEntityProp(
+ 'postType',
+ NAVIGATION_POST_TYPE,
+ 'title',
+ id
+ );
- if ( ! id ) return null;
+ if ( ! id || title === undefined ) {
+ return null;
+ }
return (
<>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js
index 0a5de0a6274d4d..249124b1054cec 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js
@@ -8,6 +8,17 @@ import { parse } from '@wordpress/blocks';
*/
import TemplatePartNavigationMenus from './template-part-navigation-menus';
import useEditedEntityRecord from '../use-edited-entity-record';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+function getBlocksFromRecord( record ) {
+ if ( record?.blocks ) {
+ return record?.blocks;
+ }
+
+ return record?.content && typeof record.content !== 'function'
+ ? parse( record.content )
+ : [];
+}
/**
* Retrieves a list of specific blocks from a given tree of blocks.
@@ -55,15 +66,11 @@ export default function useNavigationMenuContent( postType, postId ) {
// Only managing navigation menus in template parts is supported
// to match previous behaviour. This could potentially be expanded
// to patterns as well.
- if ( postType !== 'wp_template_part' ) {
+ if ( postType !== TEMPLATE_PART_POST_TYPE ) {
return;
}
- const blocks =
- record?.content && typeof record.content !== 'function'
- ? parse( record.content )
- : [];
-
+ const blocks = getBlocksFromRecord( record );
const navigationBlocks = getBlocksOfTypeFromBlocks(
'core/navigation',
blocks
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
index 674d95e02a13b1..4e1e9ec6a11aa8 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
@@ -24,6 +24,12 @@ import {
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
} from '../sidebar-navigation-screen-details-panel';
+import {
+ PATTERN_TYPES,
+ TEMPLATE_PART_POST_TYPE,
+ PATTERN_SYNC_TYPES,
+ TEMPLATE_ORIGINS,
+} from '../../utils/constants';
export default function usePatternDetails( postType, postId ) {
const { getDescription, getTitle, record } = useEditedEntityRecord(
@@ -53,7 +59,7 @@ export default function usePatternDetails( postType, postId ) {
if ( ! description && addedBy.text ) {
description =
- postType === 'wp_block'
+ postType === PATTERN_TYPES.user
? sprintf(
// translators: %s: pattern title e.g: "Header".
__( 'This is the %s pattern.' ),
@@ -66,7 +72,7 @@ export default function usePatternDetails( postType, postId ) {
);
}
- if ( ! description && postType === 'wp_block' && record?.title ) {
+ if ( ! description && postType === PATTERN_TYPES.user && record?.title ) {
description = sprintf(
// translators: %s: user created pattern title e.g. "Footer".
__( 'This is the %s pattern.' ),
@@ -80,11 +86,14 @@ export default function usePatternDetails( postType, postId ) {
const details = [];
- if ( postType === 'wp_block' || 'wp_template_part' ) {
+ if (
+ postType === PATTERN_TYPES.user ||
+ postType === TEMPLATE_PART_POST_TYPE
+ ) {
details.push( {
label: __( 'Syncing' ),
value:
- record.wp_pattern_sync_status === 'unsynced'
+ record.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced
? __( 'Not synced' )
: __( 'Fully synced' ),
} );
@@ -112,7 +121,7 @@ export default function usePatternDetails( postType, postId ) {
}
}
- if ( postType === 'wp_template_part' ) {
+ if ( postType === TEMPLATE_PART_POST_TYPE ) {
const templatePartArea = templatePartAreas.find(
( area ) => area.area === record.area
);
@@ -133,7 +142,7 @@ export default function usePatternDetails( postType, postId ) {
}
if (
- postType === 'wp_template_part' &&
+ postType === TEMPLATE_PART_POST_TYPE &&
addedBy.text &&
! isAddedByActiveTheme
) {
@@ -148,9 +157,10 @@ export default function usePatternDetails( postType, postId ) {
}
if (
- postType === 'wp_template_part' &&
+ postType === TEMPLATE_PART_POST_TYPE &&
addedBy.text &&
- ( record.origin === 'plugin' || record.has_theme_file === true )
+ ( record.origin === TEMPLATE_ORIGINS.plugin ||
+ record.has_theme_file === true )
) {
details.push( {
label: __( 'Customized' ),
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 0b7be99812dd67..70325f09bd21de 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -10,6 +10,8 @@ import { useViewportMatch } from '@wordpress/compose';
import { getTemplatePartIcon } from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import { getQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
import { file } from '@wordpress/icons';
/**
@@ -19,10 +21,15 @@ import AddNewPattern from '../add-new-pattern';
import SidebarNavigationItem from '../sidebar-navigation-item';
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import CategoryItem from './category-item';
-import { PATTERN_DEFAULT_CATEGORY, PATTERN_TYPES } from '../../utils/constants';
+import {
+ PATTERN_DEFAULT_CATEGORY,
+ PATTERN_TYPES,
+ TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
import { useLink } from '../routes/link';
import usePatternCategories from './use-pattern-categories';
import useTemplatePartAreas from './use-template-part-areas';
+import { store as editSiteStore } from '../../store';
function TemplatePartGroup( { areas, currentArea, currentType } ) {
return (
@@ -39,10 +46,10 @@ function TemplatePartGroup( { areas, currentArea, currentType } ) {
icon={ getTemplatePartIcon( area ) }
label={ label }
id={ area }
- type="wp_template_part"
+ type={ TEMPLATE_PART_POST_TYPE }
isActive={
currentArea === area &&
- currentType === 'wp_template_part'
+ currentType === TEMPLATE_PART_POST_TYPE
}
/>
)
@@ -84,13 +91,28 @@ export default function SidebarNavigationScreenPatterns() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const { categoryType, categoryId } = getQueryArgs( window.location.href );
const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
- const currentType = categoryType || PATTERN_TYPES.user;
+ const currentType = categoryType || PATTERN_TYPES.theme;
const { templatePartAreas, hasTemplateParts, isLoading } =
useTemplatePartAreas();
const { patternCategories, hasPatterns } = usePatternCategories();
+ const isBlockBasedTheme = useSelect(
+ ( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+ []
+ );
+ const isTemplatePartsMode = useSelect( ( select ) => {
+ const settings = select( editSiteStore ).getSettings();
+ return !! settings.supportsTemplatePartsMode;
+ }, [] );
+
+ const templatePartsLink = useLink( {
+ path: '/wp_template_part/all',
+ // If a classic theme that supports template parts accessed
+ // the Patterns page directly, preserve that state in the URL.
+ didAccessPatternsPage:
+ ! isBlockBasedTheme && isTemplatePartsMode ? 1 : undefined,
+ } );
- const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
const footer = ! isMobileViewport ? (
<ItemGroup>
<SidebarNavigationItem
@@ -100,14 +122,17 @@ export default function SidebarNavigationScreenPatterns() {
>
{ __( 'Manage all of my patterns' ) }
</SidebarNavigationItem>
- <SidebarNavigationItem withChevron { ...templatePartsLink }>
- { __( 'Manage all template parts' ) }
- </SidebarNavigationItem>
+ { ( isBlockBasedTheme || isTemplatePartsMode ) && (
+ <SidebarNavigationItem withChevron { ...templatePartsLink }>
+ { __( 'Manage all template parts' ) }
+ </SidebarNavigationItem>
+ ) }
</ItemGroup>
) : undefined;
return (
<SidebarNavigationScreen
+ isRoot={ ! isBlockBasedTheme }
title={ __( 'Patterns' ) }
description={ __(
'Manage what patterns are available when editing the site.'
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js
index 367b293f2206dc..4dee1bae3f314f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js
@@ -10,12 +10,17 @@ import { __ } from '@wordpress/i18n';
import useDefaultPatternCategories from './use-default-pattern-categories';
import useThemePatterns from './use-theme-patterns';
import usePatterns from '../page-patterns/use-patterns';
-import { PATTERN_TYPES, PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
+import {
+ PATTERN_TYPES,
+ PATTERN_DEFAULT_CATEGORY,
+ PATTERN_USER_CATEGORY,
+ TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
export default function usePatternCategories() {
const defaultCategories = useDefaultPatternCategories();
defaultCategories.push( {
- name: 'uncategorized',
+ name: TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
label: __( 'Uncategorized' ),
} );
const themePatterns = useThemePatterns();
@@ -80,12 +85,20 @@ export default function usePatternCategories() {
const sortedCategories = categoriesWithCounts.sort( ( a, b ) =>
a.label.localeCompare( b.label )
);
+
+ sortedCategories.unshift( {
+ name: PATTERN_USER_CATEGORY,
+ label: __( 'My patterns' ),
+ count: userPatterns.length,
+ } );
+
sortedCategories.unshift( {
name: PATTERN_DEFAULT_CATEGORY,
- label: __( 'All Patterns' ),
+ label: __( 'All patterns' ),
description: __( 'A list of all patterns from all sources' ),
count: themePatterns.length + userPatterns.length,
} );
+
return sortedCategories;
}, [
defaultCategories,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
index bc538c5e7a85fa..77cbf87b3d439e 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
@@ -5,6 +5,14 @@ import { useEntityRecords } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
+/**
+ * Internal dependencies
+ */
+import {
+ TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+ TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+
const useTemplatePartsGroupedByArea = ( items ) => {
const allItems = items || [];
@@ -32,7 +40,9 @@ const useTemplatePartsGroupedByArea = ( items ) => {
);
const groupedByArea = allItems.reduce( ( accumulator, item ) => {
- const key = accumulator[ item.area ] ? item.area : 'uncategorized';
+ const key = accumulator[ item.area ]
+ ? item.area
+ : TEMPLATE_PART_AREA_DEFAULT_CATEGORY;
accumulator[ key ].templateParts.push( item );
return accumulator;
}, knownAreas );
@@ -43,7 +53,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
export default function useTemplatePartAreas() {
const { records: templateParts, isResolving: isLoading } = useEntityRecords(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
{ per_page: -1 }
);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
index 5c25f7768dee0f..4f1dbcd432df25 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -7,7 +7,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import {
CheckboxControl,
- __experimentalUseNavigator as useNavigator,
__experimentalInputControl as InputControl,
__experimentalNumberControl as NumberControl,
__experimentalTruncate as Truncate,
@@ -28,6 +27,7 @@ import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import { useLink } from '../routes/link';
import SidebarNavigationItem from '../sidebar-navigation-item';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
const EMPTY_OBJECT = {};
@@ -37,7 +37,7 @@ function TemplateAreaButton( { postId, icon, title } ) {
footer,
};
const linkInfo = useLink( {
- postType: 'wp_template_part',
+ postType: TEMPLATE_PART_POST_TYPE,
postId,
} );
@@ -61,10 +61,6 @@ function TemplateAreaButton( { postId, icon, title } ) {
}
export default function HomeTemplateDetails() {
- const navigator = useNavigator();
- const {
- params: { postType, postId },
- } = navigator;
const { editEntityRecord } = useDispatch( coreStore );
const {
@@ -74,34 +70,30 @@ export default function HomeTemplateDetails() {
postsPageTitle,
postsPageId,
currentTemplateParts,
- } = useSelect(
- ( select ) => {
- const { getEntityRecord } = select( coreStore );
- const siteSettings = getEntityRecord( 'root', 'site' );
- const { getSettings } = unlock( select( editSiteStore ) );
- const _currentTemplateParts =
- select( editSiteStore ).getCurrentTemplateTemplateParts();
- const siteEditorSettings = getSettings();
- const _postsPageRecord = siteSettings?.page_for_posts
- ? select( coreStore ).getEntityRecord(
- 'postType',
- 'page',
- siteSettings?.page_for_posts
- )
- : EMPTY_OBJECT;
+ } = useSelect( ( select ) => {
+ const { getEntityRecord } = select( coreStore );
+ const { getSettings, getCurrentTemplateTemplateParts } = unlock(
+ select( editSiteStore )
+ );
+ const siteSettings = getEntityRecord( 'root', 'site' );
+ const _postsPageRecord = siteSettings?.page_for_posts
+ ? getEntityRecord(
+ 'postType',
+ 'page',
+ siteSettings?.page_for_posts
+ )
+ : EMPTY_OBJECT;
- return {
- allowCommentsOnNewPosts:
- siteSettings?.default_comment_status === 'open',
- postsPageTitle: _postsPageRecord?.title?.rendered,
- postsPageId: _postsPageRecord?.id,
- postsPerPage: siteSettings?.posts_per_page,
- templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas,
- currentTemplateParts: _currentTemplateParts,
- };
- },
- [ postType, postId ]
- );
+ return {
+ allowCommentsOnNewPosts:
+ siteSettings?.default_comment_status === 'open',
+ postsPageTitle: _postsPageRecord?.title?.rendered,
+ postsPageId: _postsPageRecord?.id,
+ postsPerPage: siteSettings?.posts_per_page,
+ templatePartAreas: getSettings()?.defaultTemplatePartAreas,
+ currentTemplateParts: getCurrentTemplateTemplateParts(),
+ };
+ }, [] );
const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
useState( '' );
@@ -125,11 +117,12 @@ export default function HomeTemplateDetails() {
*/
const templateAreas = useMemo( () => {
return currentTemplateParts.length && templatePartAreas
- ? currentTemplateParts.map( ( { templatePart } ) => ( {
+ ? currentTemplateParts.map( ( { templatePart, block } ) => ( {
...templatePartAreas?.find(
( { area } ) => area === templatePart?.area
),
...templatePart,
+ clientId: block.clientId,
} ) )
: [];
}, [ currentTemplateParts, templatePartAreas ] );
@@ -213,9 +206,9 @@ export default function HomeTemplateDetails() {
>
<ItemGroup>
{ templateAreas.map(
- ( { label, icon, theme, slug, title } ) => (
+ ( { clientId, label, icon, theme, slug, title } ) => (
<SidebarNavigationScreenDetailsPanelRow
- key={ slug }
+ key={ clientId }
>
<TemplateAreaButton
postId={ `${ theme }//${ slug }` }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
index 9d739036a5e97f..a07e08a44f8b41 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -4,21 +4,27 @@
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import { store as editSiteStore } from '../../store';
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
const config = {
- wp_template: {
+ [ TEMPLATE_POST_TYPE ]: {
title: __( 'All templates' ),
description: __(
'Create new templates, or reset any customizations made to the templates supplied by your theme.'
),
},
- wp_template_part: {
+ [ TEMPLATE_PART_POST_TYPE ]: {
title: __( 'All template parts' ),
description: __(
'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
@@ -27,20 +33,26 @@ const config = {
},
};
+const { useLocation } = unlock( routerPrivateApis );
+
export default function SidebarNavigationScreenTemplatesBrowse() {
const {
params: { postType },
} = useNavigator();
+ const {
+ params: { didAccessPatternsPage },
+ } = useLocation();
const isTemplatePartsMode = useSelect( ( select ) => {
- const settings = select( editSiteStore ).getSettings();
-
- return !! settings.supportsTemplatePartsMode;
+ return !! select( editSiteStore ).getSettings()
+ .supportsTemplatePartsMode;
}, [] );
return (
<SidebarNavigationScreen
- isRoot={ isTemplatePartsMode }
+ // If a classic theme that supports template parts has never
+ // accessed the Patterns page, return to the dashboard.
+ isRoot={ isTemplatePartsMode && ! didAccessPatternsPage }
title={ config[ postType ].title }
description={ config[ postType ].description }
backPath={ config[ postType ].backPath }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index 46e668b94bc567..527cb37ceddaf7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -18,6 +18,7 @@ import { useLink } from '../routes/link';
import SidebarNavigationItem from '../sidebar-navigation-item';
import AddNewTemplate from '../add-new-template';
import SidebarButton from '../sidebar-button';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
const TemplateItem = ( { postType, postId, ...props } ) => {
const linkInfo = useLink( {
@@ -32,7 +33,7 @@ export default function SidebarNavigationScreenTemplates() {
const { records: templates, isResolving: isLoading } = useEntityRecords(
'postType',
- 'wp_template',
+ TEMPLATE_POST_TYPE,
{
per_page: -1,
}
@@ -54,7 +55,7 @@ export default function SidebarNavigationScreenTemplates() {
actions={
canCreate && (
<AddNewTemplate
- templateType={ 'wp_template' }
+ templateType={ TEMPLATE_POST_TYPE }
toggleProps={ {
as: SidebarButton,
} }
@@ -71,7 +72,7 @@ export default function SidebarNavigationScreenTemplates() {
) }
{ sortedTemplates.map( ( template ) => (
<TemplateItem
- postType={ 'wp_template' }
+ postType={ TEMPLATE_POST_TYPE }
postId={ template.id }
key={ template.id }
withChevron
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 6eb4b9eb91b8f4..687326fbebd332 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -68,7 +68,6 @@
.edit-site-sidebar-navigation-screen__title {
flex-grow: 1;
padding: $grid-unit-15 * 0.5 0 0 0;
- overflow: hidden;
overflow-wrap: break-word;
}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 9e035759ea9ad6..a233cf1eca1988 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { memo, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
import {
__experimentalNavigatorProvider as NavigatorProvider,
__experimentalNavigatorScreen as NavigatorScreen,
@@ -27,6 +28,7 @@ import SaveHub from '../save-hub';
import { unlock } from '../../lock-unlock';
import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
const { useLocation } = unlock( routerPrivateApis );
@@ -53,6 +55,15 @@ function SidebarScreens() {
<NavigatorScreen path="/page/:postId">
<SidebarNavigationScreenPage />
</NavigatorScreen>
+ { window?.__experimentalAdminViews && (
+ <NavigatorScreen path="/pages">
+ <SidebarNavigationScreen
+ title={ __( 'All Pages' ) }
+ description={ __( 'Manage your pages.' ) }
+ backPath="/page"
+ />
+ </NavigatorScreen>
+ ) }
<NavigatorScreen path="/:postType(wp_template)">
<SidebarNavigationScreenTemplates />
</NavigatorScreen>
diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
index 6cce84deebfa97..fe4179a338504b 100644
--- a/packages/edit-site/src/components/start-template-options/index.js
+++ b/packages/edit-site/src/components/start-template-options/index.js
@@ -12,14 +12,15 @@ import { useSelect } from '@wordpress/data';
import { useAsyncList } from '@wordpress/compose';
import { store as preferencesStore } from '@wordpress/preferences';
import { parse } from '@wordpress/blocks';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../store';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
function useFallbackTemplateContent( slug, isCustom = false ) {
const [ templateContent, setTemplateContent ] = useState( '' );
@@ -50,6 +51,37 @@ function useStartPatterns( fallbackContent ) {
};
}, [] );
+ const currentThemeStylesheet = useSelect(
+ ( select ) => select( coreStore ).getCurrentTheme().stylesheet
+ );
+
+ // Duplicated from packages/block-library/src/pattern/edit.js.
+ function injectThemeAttributeInBlockTemplateContent( block ) {
+ if (
+ block.innerBlocks.find(
+ ( innerBlock ) => innerBlock.name === 'core/template-part'
+ )
+ ) {
+ block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+ if (
+ innerBlock.name === 'core/template-part' &&
+ innerBlock.attributes.theme === undefined
+ ) {
+ innerBlock.attributes.theme = currentThemeStylesheet;
+ }
+ return innerBlock;
+ } );
+ }
+
+ if (
+ block.name === 'core/template-part' &&
+ block.attributes.theme === undefined
+ ) {
+ block.attributes.theme = currentThemeStylesheet;
+ }
+ return block;
+ }
+
return useMemo( () => {
// filter patterns that are supposed to be used in the current template being edited.
return [
@@ -68,7 +100,12 @@ function useStartPatterns( fallbackContent ) {
);
} )
.map( ( pattern ) => {
- return { ...pattern, blocks: parse( pattern.content ) };
+ return {
+ ...pattern,
+ blocks: parse( pattern.content ).map( ( block ) =>
+ injectThemeAttributeInBlockTemplateContent( block )
+ ),
+ };
} ),
];
}, [ fallbackContent, slug, patterns ] );
@@ -162,7 +199,7 @@ export default function StartTemplateOptions() {
shouldOpenModal:
! hasEdits &&
'' === templateRecord.content &&
- 'wp_template' === _postType &&
+ TEMPLATE_POST_TYPE === _postType &&
! select( preferencesStore ).get(
'core/edit-site',
'welcomeGuide'
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index 19518f650c0be3..b178ce501301ef 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -11,6 +11,12 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
*/
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+ NAVIGATION_POST_TYPE,
+ PATTERN_TYPES,
+} from '../../utils/constants';
const { useLocation } = unlock( routerPrivateApis );
@@ -42,16 +48,16 @@ export default function useInitEditedEntityFromURL() {
useEffect( () => {
if ( postType && postId ) {
switch ( postType ) {
- case 'wp_template':
+ case TEMPLATE_POST_TYPE:
setTemplate( postId );
break;
- case 'wp_template_part':
+ case TEMPLATE_PART_POST_TYPE:
setTemplatePart( postId );
break;
- case 'wp_navigation':
+ case NAVIGATION_POST_TYPE:
setNavigationMenu( postId );
break;
- case 'wp_block':
+ case PATTERN_TYPES.user:
setEditedEntity( postType, postId );
break;
default:
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
index 86928c1920a948..5f176dff8198d3 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -9,6 +9,11 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+ PATTERN_TYPES,
+} from '../../utils/constants';
const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -18,9 +23,9 @@ export function getPathFromURL( urlParams ) {
// Compute the navigator path based on the URL params.
if ( urlParams?.postType && urlParams?.postId ) {
switch ( urlParams.postType ) {
- case 'wp_block':
- case 'wp_template':
- case 'wp_template_part':
+ case PATTERN_TYPES.user:
+ case TEMPLATE_POST_TYPE:
+ case TEMPLATE_PART_POST_TYPE:
case 'page':
path = `/${ encodeURIComponent(
urlParams.postType
diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js
index 2084d72ce9f8eb..f48e69245da1fe 100644
--- a/packages/edit-site/src/components/template-actions/index.js
+++ b/packages/edit-site/src/components/template-actions/index.js
@@ -22,6 +22,7 @@ import { store as editSiteStore } from '../../store';
import isTemplateRemovable from '../../utils/is-template-removable';
import isTemplateRevertable from '../../utils/is-template-revertable';
import RenameMenuItem from './rename-menu-item';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
export default function TemplateActions( {
postType,
@@ -68,7 +69,7 @@ export default function TemplateActions( {
);
} catch ( error ) {
const fallbackErrorMessage =
- template.type === 'wp_template'
+ template.type === TEMPLATE_POST_TYPE
? __( 'An error occurred while reverting the template.' )
: __(
'An error occurred while reverting the template part.'
diff --git a/packages/edit-site/src/components/template-actions/rename-menu-item.js b/packages/edit-site/src/components/template-actions/rename-menu-item.js
index 42bec0a37ba857..d098ea13fa58f8 100644
--- a/packages/edit-site/src/components/template-actions/rename-menu-item.js
+++ b/packages/edit-site/src/components/template-actions/rename-menu-item.js
@@ -16,6 +16,11 @@ import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';
import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
export default function RenameMenuItem( { template, onClose } ) {
const title = decodeEntities( template.title.rendered );
const [ editedTitle, setEditedTitle ] = useState( title );
@@ -28,7 +33,7 @@ export default function RenameMenuItem( { template, onClose } ) {
const { createSuccessNotice, createErrorNotice } =
useDispatch( noticesStore );
- if ( template.type === 'wp_template' && ! template.is_custom ) {
+ if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
return null;
}
@@ -57,7 +62,7 @@ export default function RenameMenuItem( { template, onClose } ) {
);
createSuccessNotice(
- template.type === 'wp_template'
+ template.type === TEMPLATE_POST_TYPE
? __( 'Template renamed.' )
: __( 'Template part renamed.' ),
{
@@ -66,7 +71,7 @@ export default function RenameMenuItem( { template, onClose } ) {
);
} catch ( error ) {
const fallbackErrorMessage =
- template.type === 'wp_template'
+ template.type === TEMPLATE_POST_TYPE
? __( 'An error occurred while renaming the template.' )
: __(
'An error occurred while renaming the template part.'
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
index 16d07132ad7c74..f9d50261a12a46 100644
--- a/packages/edit-site/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -3,8 +3,16 @@
*/
import { useMemo } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { trash, backup, help, styles, external, brush } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+ rotateLeft,
+ rotateRight,
+ backup,
+ help,
+ styles,
+ external,
+ brush,
+} from '@wordpress/icons';
import { useCommandLoader, useCommand } from '@wordpress/commands';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -148,8 +156,8 @@ function useGlobalStylesResetCommands() {
return [
{
name: 'core/edit-site/reset-global-styles',
- label: __( 'Reset styles to defaults' ),
- icon: trash,
+ label: __( 'Reset styles' ),
+ icon: isRTL() ? rotateRight : rotateLeft,
callback: ( { close } ) => {
close();
onReset();
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 76c7eea5137439..a10d518d53644b 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -33,6 +33,7 @@ import isTemplateRevertable from '../../utils/is-template-revertable';
import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
const { useHistory } = unlock( routerPrivateApis );
@@ -131,7 +132,7 @@ function useManipulateDocumentCommands() {
if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
const label =
- template.type === 'wp_template'
+ template.type === TEMPLATE_POST_TYPE
? /* translators: %1$s: template title */
sprintf(
'Reset template: %s',
@@ -155,7 +156,7 @@ function useManipulateDocumentCommands() {
if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
const label =
- template.type === 'wp_template'
+ template.type === TEMPLATE_POST_TYPE
? /* translators: %1$s: template title */
sprintf(
'Delete template: %s',
@@ -167,7 +168,7 @@ function useManipulateDocumentCommands() {
decodeEntities( template.title )
);
const path =
- template.type === 'wp_template'
+ template.type === TEMPLATE_POST_TYPE
? '/wp_template'
: '/wp_template_part/all';
commands.push( {
diff --git a/packages/edit-site/src/hooks/navigation-menu-edit.js b/packages/edit-site/src/hooks/navigation-menu-edit.js
index d99ee57e0d953a..4c04b1b2534026 100644
--- a/packages/edit-site/src/hooks/navigation-menu-edit.js
+++ b/packages/edit-site/src/hooks/navigation-menu-edit.js
@@ -15,6 +15,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
*/
import { useLink } from '../components/routes/link';
import { unlock } from '../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../utils/constants';
const { useLocation } = unlock( routerPrivateApis );
@@ -26,7 +27,7 @@ function NavigationMenuEdit( { attributes } ) {
( select ) => {
return select( coreStore ).getEntityRecord(
'postType',
- 'wp_navigation',
+ NAVIGATION_POST_TYPE,
// Ideally this should be an official public API.
ref
);
diff --git a/packages/edit-site/src/hooks/template-part-edit.js b/packages/edit-site/src/hooks/template-part-edit.js
index 07fb717b85af18..66f54967c55e22 100644
--- a/packages/edit-site/src/hooks/template-part-edit.js
+++ b/packages/edit-site/src/hooks/template-part-edit.js
@@ -15,6 +15,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
*/
import { useLink } from '../components/routes/link';
import { unlock } from '../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../utils/constants';
const { useLocation } = unlock( routerPrivateApis );
@@ -25,7 +26,7 @@ function EditTemplatePartMenuItem( { attributes } ) {
( select ) => {
return select( coreStore ).getEntityRecord(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
// Ideally this should be an official public API.
`${ theme }//${ slug }`
);
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 61569482c69dbf..ce698a757f6bb3 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -19,7 +19,11 @@ import { decodeEntities } from '@wordpress/html-entities';
*/
import { STORE_NAME as editSiteStoreName } from './constants';
import isTemplateRevertable from '../utils/is-template-revertable';
-
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+ NAVIGATION_POST_TYPE,
+} from '../utils/constants';
/**
* Dispatches an action that toggles a feature flag.
*
@@ -67,14 +71,18 @@ export const setTemplate =
try {
const template = await registry
.resolveSelect( coreStore )
- .getEntityRecord( 'postType', 'wp_template', templateId );
+ .getEntityRecord(
+ 'postType',
+ TEMPLATE_POST_TYPE,
+ templateId
+ );
templateSlug = template?.slug;
} catch ( error ) {}
}
dispatch( {
type: 'SET_EDITED_POST',
- postType: 'wp_template',
+ postType: TEMPLATE_POST_TYPE,
id: templateId,
context: { templateSlug },
} );
@@ -92,14 +100,14 @@ export const addTemplate =
async ( { dispatch, registry } ) => {
const newTemplate = await registry
.dispatch( coreStore )
- .saveEntityRecord( 'postType', 'wp_template', template );
+ .saveEntityRecord( 'postType', TEMPLATE_POST_TYPE, template );
if ( template.content ) {
registry
.dispatch( coreStore )
.editEntityRecord(
'postType',
- 'wp_template',
+ TEMPLATE_POST_TYPE,
newTemplate.id,
{ blocks: parse( template.content ) },
{ undoIgnore: true }
@@ -108,7 +116,7 @@ export const addTemplate =
dispatch( {
type: 'SET_EDITED_POST',
- postType: 'wp_template',
+ postType: TEMPLATE_POST_TYPE,
id: newTemplate.id,
context: { templateSlug: newTemplate.slug },
} );
@@ -178,7 +186,7 @@ export const removeTemplate =
export function setTemplatePart( templatePartId ) {
return {
type: 'SET_EDITED_POST',
- postType: 'wp_template_part',
+ postType: TEMPLATE_PART_POST_TYPE,
id: templatePartId,
};
}
@@ -193,7 +201,7 @@ export function setTemplatePart( templatePartId ) {
export function setNavigationMenu( navigationMenuId ) {
return {
type: 'SET_EDITED_POST',
- postType: 'wp_navigation',
+ postType: NAVIGATION_POST_TYPE,
id: navigationMenuId,
};
}
@@ -282,7 +290,7 @@ export const setPage =
const currentTemplate = (
await registry
.resolveSelect( coreStore )
- .getEntityRecords( 'postType', 'wp_template', {
+ .getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
per_page: -1,
} )
)?.find( ( { slug } ) => slug === currentTemplateSlug );
@@ -305,7 +313,7 @@ export const setPage =
dispatch( {
type: 'SET_EDITED_POST',
- postType: 'wp_template',
+ postType: TEMPLATE_POST_TYPE,
id: template.id,
context: {
...page.context,
diff --git a/packages/edit-site/src/store/constants.js b/packages/edit-site/src/store/constants.js
index 272f2049a088b2..174341a5cb02ae 100644
--- a/packages/edit-site/src/store/constants.js
+++ b/packages/edit-site/src/store/constants.js
@@ -4,8 +4,3 @@
* @type {string}
*/
export const STORE_NAME = 'core/edit-site';
-
-export const TEMPLATE_PART_AREA_HEADER = 'header';
-export const TEMPLATE_PART_AREA_FOOTER = 'footer';
-export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
-export const TEMPLATE_PART_AREA_GENERAL = 'uncategorized';
diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
index f3dd4c10cec43e..3e2bfe2ee47b24 100644
--- a/packages/edit-site/src/store/private-actions.js
+++ b/packages/edit-site/src/store/private-actions.js
@@ -49,3 +49,22 @@ export const setEditorCanvasContainerView =
view,
} );
};
+
+/**
+ * Sets the type of page content focus. Can be one of:
+ *
+ * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
+ * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
+ *
+ * @param {'disableTemplate'|'hideTemplate'} pageContentFocusType The type of page content focus.
+ *
+ * @return {Object} Action object.
+ */
+export const setPageContentFocusType =
+ ( pageContentFocusType ) =>
+ ( { dispatch } ) => {
+ dispatch( {
+ type: 'SET_PAGE_CONTENT_FOCUS_TYPE',
+ pageContentFocusType,
+ } );
+ };
diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js
index 1f1f6e999fdb29..0d4cf2b3eefdaa 100644
--- a/packages/edit-site/src/store/private-selectors.js
+++ b/packages/edit-site/src/store/private-selectors.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { hasPageContentFocus } from './selectors';
+
/**
* Returns the current canvas mode.
*
@@ -19,3 +24,20 @@ export function getCanvasMode( state ) {
export function getEditorCanvasContainerView( state ) {
return state.editorCanvasContainerView;
}
+
+/**
+ * Returns the type of the current page content focus, or null if there is no
+ * page content focus.
+ *
+ * Possible values are:
+ *
+ * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
+ * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {'disableTemplate'|'hideTemplate'|null} Type of the current page content focus.
+ */
+export function getPageContentFocusType( state ) {
+ return hasPageContentFocus( state ) ? state.pageContentFocusType : null;
+}
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 4b4689e26c561e..e99c6dda1fc1d0 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -177,6 +177,23 @@ export function hasPageContentFocus( state = false, action ) {
return state;
}
+/**
+ * Reducer used to track the type of page content focus.
+ *
+ * @param {string} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function pageContentFocusType( state = 'disableTemplate', action ) {
+ switch ( action.type ) {
+ case 'SET_PAGE_CONTENT_FOCUS_TYPE':
+ return action.pageContentFocusType;
+ }
+
+ return state;
+}
+
export default combineReducers( {
deviceType,
settings,
@@ -187,4 +204,5 @@ export default combineReducers( {
canvasMode,
editorCanvasContainerView,
hasPageContentFocus,
+ pageContentFocusType,
} );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 654b3c321ae93f..3f44ab57ba8072 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -18,7 +18,10 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
* Internal dependencies
*/
import { getFilteredTemplatePartBlocks } from './utils';
-
+import {
+ TEMPLATE_POST_TYPE,
+ TEMPLATE_PART_POST_TYPE,
+} from '../utils/constants';
/**
* @typedef {'template'|'template_type'} TemplateType Template type.
*/
@@ -126,7 +129,7 @@ export const getSettings = createSelector(
__experimentalSetIsInserterOpened: setIsInserterOpen,
__experimentalReusableBlocks: getReusableBlocks( state ),
__experimentalPreferPatternsOnRoot:
- 'wp_template' === getEditedPostType( state ),
+ TEMPLATE_POST_TYPE === getEditedPostType( state ),
};
const canUserCreateMedia = getCanUserCreateMedia( state );
@@ -300,7 +303,7 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
const templateParts = select( coreDataStore ).getEntityRecords(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
{ per_page: -1 }
);
diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js
index d3816f6ac0ac2a..a5e47ec5bbbaf3 100644
--- a/packages/edit-site/src/store/test/reducer.js
+++ b/packages/edit-site/src/store/test/reducer.js
@@ -12,6 +12,7 @@ import {
blockInserterPanel,
listViewPanel,
hasPageContentFocus,
+ pageContentFocusType,
} from '../reducer';
import { setIsInserterOpened } from '../actions';
@@ -191,4 +192,21 @@ describe( 'state', () => {
).toBe( false );
} );
} );
+
+ describe( 'pageContentFocusType', () => {
+ it( 'defaults to disableTemplate', () => {
+ expect( pageContentFocusType( undefined, {} ) ).toBe(
+ 'disableTemplate'
+ );
+ } );
+
+ it( 'can be set', () => {
+ expect(
+ pageContentFocusType( 'disableTemplate', {
+ type: 'SET_PAGE_CONTENT_FOCUS_TYPE',
+ pageContentFocusType: 'enableTemplate',
+ } )
+ ).toBe( 'enableTemplate' );
+ } );
+ } );
} );
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 111696241d0d69..e95cd3571c419f 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -4,6 +4,7 @@
@import "./components/block-editor/style.scss";
@import "./components/canvas-loader/style.scss";
@import "./components/code-editor/style.scss";
+@import "./components/dataviews/style.scss";
@import "./components/global-styles/style.scss";
@import "./components/global-styles/screen-revisions/style.scss";
@import "./components/header-edit-mode/style.scss";
diff --git a/packages/edit-site/src/utils/constants.js b/packages/edit-site/src/utils/constants.js
index d12c7f84cc356c..7d123818043801 100644
--- a/packages/edit-site/src/utils/constants.js
+++ b/packages/edit-site/src/utils/constants.js
@@ -15,12 +15,18 @@ export const NAVIGATION_POST_TYPE = 'wp_navigation';
// Templates.
export const TEMPLATE_POST_TYPE = 'wp_template';
export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
-export const TEMPLATE_CUSTOM_SOURCE = 'custom';
+export const TEMPLATE_ORIGINS = {
+ custom: 'custom',
+ theme: 'theme',
+ plugin: 'plugin',
+};
+export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
// Patterns.
export const {
PATTERN_TYPES,
PATTERN_DEFAULT_CATEGORY,
+ PATTERN_USER_CATEGORY,
PATTERN_CORE_SOURCES,
PATTERN_SYNC_TYPES,
} = unlock( patternPrivateApis );
@@ -32,9 +38,19 @@ export const FOCUSABLE_ENTITIES = [
PATTERN_TYPES.user,
];
+/**
+ * Block types that are considered to be page content. These are the only blocks
+ * editable when hasPageContentFocus() is true.
+ */
+export const PAGE_CONTENT_BLOCK_TYPES = {
+ 'core/post-title': true,
+ 'core/post-featured-image': true,
+ 'core/post-content': true,
+};
+
export const POST_TYPE_LABELS = {
[ TEMPLATE_POST_TYPE ]: __( 'Template' ),
- [ TEMPLATE_PART_POST_TYPE ]: __( 'Template Part' ),
+ [ TEMPLATE_PART_POST_TYPE ]: __( 'Template part' ),
[ PATTERN_TYPES.user ]: __( 'Pattern' ),
[ NAVIGATION_POST_TYPE ]: __( 'Navigation' ),
};
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
index 600e686618bf94..2ee661253cf063 100644
--- a/packages/edit-site/src/utils/get-is-list-page.js
+++ b/packages/edit-site/src/utils/get-is-list-page.js
@@ -14,8 +14,9 @@ export default function getIsListPage(
isMobileViewport
) {
return (
- path === '/wp_template/all' ||
- path === '/wp_template_part/all' ||
+ [ '/wp_template/all', '/wp_template_part/all', '/pages' ].includes(
+ path
+ ) ||
( path === '/patterns' &&
// Don't treat "/patterns" without categoryType and categoryId as a
// list page in mobile because the sidebar covers the whole page.
diff --git a/packages/edit-site/src/utils/is-template-removable.js b/packages/edit-site/src/utils/is-template-removable.js
index 02682e97334e59..9cb1de23daab75 100644
--- a/packages/edit-site/src/utils/is-template-removable.js
+++ b/packages/edit-site/src/utils/is-template-removable.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import { TEMPLATE_CUSTOM_SOURCE } from './constants';
+import { TEMPLATE_ORIGINS } from './constants';
/**
* Check if a template is removable.
@@ -15,6 +15,6 @@ export default function isTemplateRemovable( template ) {
}
return (
- template.source === TEMPLATE_CUSTOM_SOURCE && ! template.has_theme_file
+ template.source === TEMPLATE_ORIGINS.custom && ! template.has_theme_file
);
}
diff --git a/packages/edit-site/src/utils/is-template-revertable.js b/packages/edit-site/src/utils/is-template-revertable.js
index 89d1d8ea552a19..a6274d07ebebb6 100644
--- a/packages/edit-site/src/utils/is-template-revertable.js
+++ b/packages/edit-site/src/utils/is-template-revertable.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import { TEMPLATE_CUSTOM_SOURCE } from './constants';
+import { TEMPLATE_ORIGINS } from './constants';
/**
* Check if a template is revertable to its original theme-provided template file.
@@ -15,7 +15,7 @@ export default function isTemplateRevertable( template ) {
}
/* eslint-disable camelcase */
return (
- template?.source === TEMPLATE_CUSTOM_SOURCE && template?.has_theme_file
+ template?.source === TEMPLATE_ORIGINS.custom && template?.has_theme_file
);
/* eslint-enable camelcase */
}
diff --git a/packages/edit-site/src/utils/template-part-create.js b/packages/edit-site/src/utils/template-part-create.js
index b81a98d15684a7..955519a91a2344 100644
--- a/packages/edit-site/src/utils/template-part-create.js
+++ b/packages/edit-site/src/utils/template-part-create.js
@@ -9,12 +9,17 @@ import { paramCase as kebabCase } from 'change-case';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_POST_TYPE } from './constants';
+
export const useExistingTemplateParts = () => {
return useSelect(
( select ) =>
select( coreStore ).getEntityRecords(
'postType',
- 'wp_template_part',
+ TEMPLATE_PART_POST_TYPE,
{
per_page: -1,
}
diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
index d6f12bff4d5235..0308c2c2171e24 100644
--- a/packages/edit-widgets/src/components/header/index.js
+++ b/packages/edit-widgets/src/components/header/index.js
@@ -27,7 +27,7 @@ import { unlock } from '../../lock-unlock';
const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
-function Header() {
+function Header( { setListViewToggleElement } ) {
const isMediumViewport = useViewportMatch( 'medium' );
const inserterButton = useRef();
const widgetAreaClientId = useLastSelectedWidgetArea();
@@ -140,6 +140,7 @@ function Header() {
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'List View' ) }
onClick={ toggleListView }
+ ref={ setListViewToggleElement }
/>
</>
) }
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 987e3868de1337..2cb1eebcfab73b 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -3,7 +3,7 @@
*/
import { useViewportMatch } from '@wordpress/compose';
import { BlockBreadcrumb } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import {
InterfaceSkeleton,
@@ -68,6 +68,9 @@ function Interface( { blockEditorSettings } ) {
[]
);
+ const [ listViewToggleElement, setListViewToggleElement ] =
+ useState( null );
+
// Inserter and Sidebars are mutually exclusive
useEffect( () => {
if ( hasSidebarEnabled && ! isHugeViewport ) {
@@ -94,8 +97,16 @@ function Interface( { blockEditorSettings } ) {
...interfaceLabels,
secondarySidebar: secondarySidebarLabel,
} }
- header={ <Header /> }
- secondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }
+ header={
+ <Header setListViewToggleElement={ setListViewToggleElement } />
+ }
+ secondarySidebar={
+ hasSecondarySidebar && (
+ <SecondarySidebar
+ listViewToggleElement={ listViewToggleElement }
+ />
+ )
+ }
sidebar={
hasSidebarEnabled && (
<ComplementaryArea.Slot scope="core/edit-widgets" />
diff --git a/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js b/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js
index 4d1675222ef99f..382bc6fa0d8905 100644
--- a/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js
+++ b/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js
@@ -16,7 +16,7 @@ import { store as editWidgetsStore } from '../../store';
* This is a duplicate of the component implemented in the editor package.
* Duplicated here as edit-widgets doesn't depend on editor.
*
- * @return {WPComponent} The component.
+ * @return {Component} The component.
*/
export default function UnsavedChangesWarning() {
const isDirty = useSelect( ( select ) => {
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/index.js b/packages/edit-widgets/src/components/secondary-sidebar/index.js
index 49e240bd147cb2..20488e4478b980 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/index.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/index.js
@@ -13,7 +13,7 @@ import { store as editWidgetsStore } from '../../store';
import InserterSidebar from './inserter-sidebar';
import ListViewSidebar from './list-view-sidebar';
-export default function SecondarySidebar() {
+export default function SecondarySidebar( { listViewToggleElement } ) {
const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
const { isInserterOpened, isListViewOpened } =
select( editWidgetsStore );
@@ -27,7 +27,9 @@ export default function SecondarySidebar() {
return <InserterSidebar />;
}
if ( isListViewOpen ) {
- return <ListViewSidebar />;
+ return (
+ <ListViewSidebar listViewToggleElement={ listViewToggleElement } />
+ );
}
return null;
}
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
index eeff1ea0bf0f3f..5104a587d9e2cf 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -3,13 +3,9 @@
*/
import { __experimentalListView as ListView } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
-import {
- useFocusOnMount,
- useFocusReturn,
- useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
@@ -19,7 +15,7 @@ import { ESCAPE } from '@wordpress/keycodes';
*/
import { store as editWidgetsStore } from '../../store';
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
const { setIsListViewOpened } = useDispatch( editWidgetsStore );
// Use internal state instead of a ref to make sure that the component
@@ -27,15 +23,22 @@ export default function ListViewSidebar() {
const [ dropZoneElement, setDropZoneElement ] = useState( null );
const focusOnMountRef = useFocusOnMount( 'firstElement' );
- const headerFocusReturnRef = useFocusReturn();
- const contentFocusReturnRef = useFocusReturn();
- function closeOnEscape( event ) {
- if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
- event.preventDefault();
- setIsListViewOpened( false );
- }
- }
+ // When closing the list view, focus should return to the toggle button.
+ const closeListView = useCallback( () => {
+ setIsListViewOpened( false );
+ listViewToggleElement?.focus();
+ }, [ listViewToggleElement, setIsListViewOpened ] );
+
+ const closeOnEscape = useCallback(
+ ( event ) => {
+ if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+ event.preventDefault();
+ closeListView();
+ }
+ },
+ [ closeListView ]
+ );
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -43,24 +46,17 @@ export default function ListViewSidebar() {
className="edit-widgets-editor__list-view-panel"
onKeyDown={ closeOnEscape }
>
- <div
- className="edit-widgets-editor__list-view-panel-header"
- ref={ headerFocusReturnRef }
- >
+ <div className="edit-widgets-editor__list-view-panel-header">
<strong>{ __( 'List View' ) }</strong>
<Button
icon={ closeSmall }
label={ __( 'Close' ) }
- onClick={ () => setIsListViewOpened( false ) }
+ onClick={ closeListView }
/>
</div>
<div
className="edit-widgets-editor__list-view-panel-content"
- ref={ useMergeRefs( [
- contentFocusReturnRef,
- focusOnMountRef,
- setDropZoneElement,
- ] ) }
+ ref={ useMergeRefs( [ focusOnMountRef, setDropZoneElement ] ) }
>
<ListView dropZoneElement={ dropZoneElement } />
</div>
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
index f3a7b84d5ded68..d538e37ad1ec8a 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -10,10 +10,7 @@ import {
useResourcePermissions,
} from '@wordpress/core-data';
import { useMemo } from '@wordpress/element';
-import {
- CopyHandler,
- privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
import { store as preferencesStore } from '@wordpress/preferences';
@@ -107,7 +104,7 @@ export default function WidgetAreasBlockEditorProvider( {
useSubRegistry={ false }
{ ...props }
>
- <CopyHandler>{ children }</CopyHandler>
+ { children }
<PatternsMenuItems rootClientId={ widgetAreaId } />
</ExperimentalBlockEditorProvider>
</SlotFillProvider>
diff --git a/packages/editor/README.md b/packages/editor/README.md
index 157136b28d0d66..12cb885db857e8 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -37,8 +37,8 @@ When returned by your block's `edit` implementation, renders a toolbar of icon b
Example:
```js
-( function ( editor, element ) {
- var el = element.createElement,
+( function ( editor, React ) {
+ var el = React.createElement,
BlockControls = editor.BlockControls,
AlignmentToolbar = editor.AlignmentToolbar;
@@ -64,7 +64,7 @@ Example:
),
];
}
-} )( window.wp.editor, window.wp.element );
+} )( window.wp.editor, window.React );
```
Note in this example that we render `AlignmentToolbar` as a child of the `BlockControls` element. This is another pre-configured component you can use to simplify block text alignment.
@@ -95,8 +95,8 @@ The following properties (non-exhaustive list) are made available:
Example:
```js
-( function ( editor, element ) {
- var el = element.createElement,
+( function ( editor, React ) {
+ var el = React.createElement,
RichText = editor.RichText;
function edit( props ) {
@@ -111,7 +111,7 @@ Example:
}
// blocks.registerBlockType( ..., { edit: edit, ... } );
-} )( window.wp.editor, window.wp.element );
+} )( window.wp.editor, window.React );
```
## Contributing to this package
diff --git a/packages/editor/src/components/post-featured-image/README.md b/packages/editor/src/components/post-featured-image/README.md
index 9b1520228703fb..369e4d7ef94399 100644
--- a/packages/editor/src/components/post-featured-image/README.md
+++ b/packages/editor/src/components/post-featured-image/README.md
@@ -13,7 +13,7 @@ Replace the contents of the panel:
```js
function replacePostFeaturedImage() {
return function () {
- return wp.element.createElement(
+ return React.createElement(
'div',
{},
'The replacement contents or components.'
@@ -31,12 +31,12 @@ wp.hooks.addFilter(
Prepend and append to the panel contents:
```js
-var el = wp.element.createElement;
+var el = React.createElement;
function wrapPostFeaturedImage( OriginalComponent ) {
return function ( props ) {
return el(
- wp.element.Fragment,
+ React.Fragment,
{},
'Prepend above',
el( OriginalComponent, props ),
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index ed3115d5a6c54a..9d6cb49d91e8e8 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -30,7 +30,7 @@ import { store as editorStore } from '../../store';
* @param {?boolean} props.forceIsDirty Whether to force the post to be marked
* as dirty.
* @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
- * @return {import('@wordpress/element').WPComponent} The component.
+ * @return {import('react').ComponentType} The component.
*/
export default function PostSavedState( {
forceIsDirty,
diff --git a/packages/editor/src/components/post-sticky/check.js b/packages/editor/src/components/post-sticky/check.js
index bd5e47da7749b1..e31c145b9bbf0f 100644
--- a/packages/editor/src/components/post-sticky/check.js
+++ b/packages/editor/src/components/post-sticky/check.js
@@ -1,28 +1,25 @@
/**
* WordPress dependencies
*/
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
-export function PostStickyCheck( { hasStickyAction, postType, children } ) {
+export default function PostStickyCheck( { children } ) {
+ const { hasStickyAction, postType } = useSelect( ( select ) => {
+ const post = select( editorStore ).getCurrentPost();
+ return {
+ hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
+ postType: select( editorStore ).getCurrentPostType(),
+ };
+ }, [] );
+
if ( postType !== 'post' || ! hasStickyAction ) {
return null;
}
return children;
}
-
-export default compose( [
- withSelect( ( select ) => {
- const post = select( editorStore ).getCurrentPost();
- return {
- hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
- postType: select( editorStore ).getCurrentPostType(),
- };
- } ),
-] )( PostStickyCheck );
diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
index 253b927f0240c1..fe8820243962b6 100644
--- a/packages/editor/src/components/post-sticky/index.js
+++ b/packages/editor/src/components/post-sticky/index.js
@@ -3,8 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
/**
* Internal dependencies
@@ -12,31 +11,22 @@ import { compose } from '@wordpress/compose';
import PostStickyCheck from './check';
import { store as editorStore } from '../../store';
-export function PostSticky( { onUpdateSticky, postSticky = false } ) {
+export default function PostSticky() {
+ const postSticky = useSelect( ( select ) => {
+ return (
+ select( editorStore ).getEditedPostAttribute( 'sticky' ) ?? false
+ );
+ }, [] );
+ const { editPost } = useDispatch( editorStore );
+
return (
<PostStickyCheck>
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Stick to the top of the blog' ) }
checked={ postSticky }
- onChange={ () => onUpdateSticky( ! postSticky ) }
+ onChange={ () => editPost( { sticky: ! postSticky } ) }
/>
</PostStickyCheck>
);
}
-
-export default compose( [
- withSelect( ( select ) => {
- return {
- postSticky:
- select( editorStore ).getEditedPostAttribute( 'sticky' ),
- };
- } ),
- withDispatch( ( dispatch ) => {
- return {
- onUpdateSticky( postSticky ) {
- dispatch( editorStore ).editPost( { sticky: postSticky } );
- },
- };
- } ),
-] )( PostSticky );
diff --git a/packages/editor/src/components/post-sticky/test/index.js b/packages/editor/src/components/post-sticky/test/index.js
index f637ec89e9582e..ff567cfe2598eb 100644
--- a/packages/editor/src/components/post-sticky/test/index.js
+++ b/packages/editor/src/components/post-sticky/test/index.js
@@ -3,40 +3,55 @@
*/
import { render, screen } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
/**
* Internal dependencies
*/
-import { PostStickyCheck } from '../check';
+import PostStickyCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+ // This allows us to tweak the returned value on each test.
+ const mock = jest.fn();
+ return mock;
+} );
+
+function setupUseSelectMock( { hasStickyAction, postType } ) {
+ useSelect.mockImplementation( ( cb ) => {
+ return cb( () => ( {
+ getCurrentPostType: () => postType,
+ getCurrentPost: () => ( {
+ _links: {
+ 'wp:action-sticky': hasStickyAction,
+ },
+ } ),
+ } ) );
+ } );
+}
describe( 'PostSticky', () => {
it( 'should not render anything if the post type is not "post"', () => {
- render(
- <PostStickyCheck postType="page" hasStickyAction={ true }>
- Can Toggle Sticky
- </PostStickyCheck>
- );
+ setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
+ render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
expect(
screen.queryByText( 'Can Toggle Sticky' )
).not.toBeInTheDocument();
} );
it( "should not render anything if post doesn't support stickying", () => {
- render(
- <PostStickyCheck postType="post" hasStickyAction={ false }>
- Can Toggle Sticky
- </PostStickyCheck>
- );
+ setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
+ render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
expect(
screen.queryByText( 'Can Toggle Sticky' )
).not.toBeInTheDocument();
} );
it( 'should render if the post supports stickying', () => {
- render(
- <PostStickyCheck postType="post" hasStickyAction={ true }>
- Can Toggle Sticky
- </PostStickyCheck>
- );
+ setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
+ render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
} );
} );
diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js
index 1fb04931bfce14..590d7722b82299 100644
--- a/packages/editor/src/components/post-switch-to-draft-button/index.js
+++ b/packages/editor/src/components/post-switch-to-draft-button/index.js
@@ -6,8 +6,7 @@ import {
__experimentalConfirmDialog as ConfirmDialog,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
/**
@@ -15,17 +14,21 @@ import { useState } from '@wordpress/element';
*/
import { store as editorStore } from '../../store';
-function PostSwitchToDraftButton( {
- isSaving,
- isPublished,
- isScheduled,
- onClick,
-} ) {
+export default function PostSwitchToDraftButton() {
const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
- if ( ! isPublished && ! isScheduled ) {
- return null;
- }
+ const { editPost, savePost } = useDispatch( editorStore );
+ const { isSaving, isPublished, isScheduled } = useSelect( ( select ) => {
+ const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
+ select( editorStore );
+ return {
+ isSaving: isSavingPost(),
+ isPublished: isCurrentPostPublished(),
+ isScheduled: isCurrentPostScheduled(),
+ };
+ }, [] );
+
+ const isDisabled = isSaving || ( ! isPublished && ! isScheduled );
let alertMessage;
if ( isPublished ) {
@@ -36,7 +39,8 @@ function PostSwitchToDraftButton( {
const handleConfirm = () => {
setShowConfirmDialog( false );
- onClick();
+ editPost( { status: 'draft' } );
+ savePost();
};
return (
@@ -44,9 +48,11 @@ function PostSwitchToDraftButton( {
<Button
className="editor-post-switch-to-draft"
onClick={ () => {
- setShowConfirmDialog( true );
+ if ( ! isDisabled ) {
+ setShowConfirmDialog( true );
+ }
} }
- disabled={ isSaving }
+ aria-disabled={ isDisabled }
variant="secondary"
style={ { flexGrow: '1', justifyContent: 'center' } }
>
@@ -62,24 +68,3 @@ function PostSwitchToDraftButton( {
</>
);
}
-
-export default compose( [
- withSelect( ( select ) => {
- const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
- select( editorStore );
- return {
- isSaving: isSavingPost(),
- isPublished: isCurrentPostPublished(),
- isScheduled: isCurrentPostScheduled(),
- };
- } ),
- withDispatch( ( dispatch ) => {
- const { editPost, savePost } = dispatch( editorStore );
- return {
- onClick: () => {
- editPost( { status: 'draft' } );
- savePost();
- },
- };
- } ),
-] )( PostSwitchToDraftButton );
diff --git a/packages/editor/src/components/post-taxonomies/README.md b/packages/editor/src/components/post-taxonomies/README.md
index 90dcfcf95eb9df..941c28d4639314 100644
--- a/packages/editor/src/components/post-taxonomies/README.md
+++ b/packages/editor/src/components/post-taxonomies/README.md
@@ -19,7 +19,7 @@ For example, to render alternative UI for the taxonomy `product-type`,
we can render custom markup or use the original component as shown below.
```js
-var el = wp.element.createElement;
+var el = React.createElement;
function customizeProductTypeSelector( OriginalComponent ) {
return function ( props ) {
@@ -42,7 +42,7 @@ Or, to use the hierarchical term selector with a non-hierarchical taxonomy `trac
you can set the `HierarchicalTermSelector` component as shown below.
```js
-const el = wp.element.createElement;
+const el = React.createElement;
const HierarchicalTermSelector = wp.editor.PostTaxonomiesHierarchicalTermSelector;
function customizeTrackSelector( OriginalComponent ) {
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index aeed0b4f4b6d9f..c93458ed3cfef2 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -149,7 +149,7 @@ export function getFilterMatcher( filterValue ) {
*
* @param {Object} props Component props.
* @param {string} props.slug Taxonomy slug.
- * @return {WPElement} Hierarchical term selector component.
+ * @return {Element} Hierarchical term selector component.
*/
export function HierarchicalTermSelector( { slug } ) {
const [ adding, setAdding ] = useState( false );
diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js
index 08628689fc1451..e775944b5d69ed 100644
--- a/packages/editor/src/components/post-trash/index.js
+++ b/packages/editor/src/components/post-trash/index.js
@@ -2,8 +2,12 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+ Button,
+ __experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
/**
* Internal dependencies
@@ -20,21 +24,40 @@ export default function PostTrash() {
};
}, [] );
const { trashPost } = useDispatch( editorStore );
+ const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
if ( isNew || ! postId ) {
return null;
}
+ const handleConfirm = () => {
+ setShowConfirmDialog( false );
+ trashPost();
+ };
+
return (
- <Button
- className="editor-post-trash"
- isDestructive
- variant="secondary"
- isBusy={ isDeleting }
- aria-disabled={ isDeleting }
- onClick={ isDeleting ? undefined : () => trashPost() }
- >
- { __( 'Move to trash' ) }
- </Button>
+ <>
+ <Button
+ className="editor-post-trash"
+ isDestructive
+ variant="secondary"
+ isBusy={ isDeleting }
+ aria-disabled={ isDeleting }
+ onClick={
+ isDeleting ? undefined : () => setShowConfirmDialog( true )
+ }
+ >
+ { __( 'Move to trash' ) }
+ </Button>
+ <ConfirmDialog
+ isOpen={ showConfirmDialog }
+ onConfirm={ handleConfirm }
+ onCancel={ () => setShowConfirmDialog( false ) }
+ >
+ { __(
+ 'Are you sure you want to move this post to the trash?'
+ ) }
+ </ConfirmDialog>
+ </>
);
}
diff --git a/packages/editor/src/components/post-type-support-check/README.md b/packages/editor/src/components/post-type-support-check/README.md
index 565882fab758ba..eab70d088999b7 100644
--- a/packages/editor/src/components/post-type-support-check/README.md
+++ b/packages/editor/src/components/post-type-support-check/README.md
@@ -16,7 +16,7 @@ If the post type is not yet known, it will be assumed to be supported.
### `children`
-_Type:_ `WPElement`
+_Type:_ `Element`
Children to be rendered if post type supports.
diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js
index fffabf6ab247c9..c716593f458f17 100644
--- a/packages/editor/src/components/post-type-support-check/index.js
+++ b/packages/editor/src/components/post-type-support-check/index.js
@@ -14,12 +14,12 @@ import { store as editorStore } from '../../store';
* type supports one of the given `supportKeys` prop.
*
* @param {Object} props Props.
- * @param {WPElement} props.children Children to be rendered if post
+ * @param {Element} props.children Children to be rendered if post
* type supports.
* @param {(string|string[])} props.supportKeys String or string array of keys
* to test.
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
function PostTypeSupportCheck( { children, supportKeys } ) {
const postType = useSelect( ( select ) => {
diff --git a/packages/editor/src/components/unsaved-changes-warning/index.js b/packages/editor/src/components/unsaved-changes-warning/index.js
index b5c78644082133..49e2b7edf1f293 100644
--- a/packages/editor/src/components/unsaved-changes-warning/index.js
+++ b/packages/editor/src/components/unsaved-changes-warning/index.js
@@ -10,7 +10,7 @@ import { store as coreStore } from '@wordpress/core-data';
* Warns the user if there are unsaved changes before leaving the editor.
* Compatible with Post Editor and Site Editor.
*
- * @return {WPComponent} The component.
+ * @return {Component} The component.
*/
export default function UnsavedChangesWarning() {
const { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index 7b3e83b2572c96..30ff172259d2e3 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+## Breaking Changes
+
+- Remove the WPElement, WPComponent, and WPSyntheticEvent types.
+
## 5.19.0 (2023-09-20)
## 5.18.0 (2023-08-31)
diff --git a/packages/element/README.md b/packages/element/README.md
index 879aefb5a46f48..96aeeea37a462e 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -1,17 +1,6 @@
# Element
-Element is, quite simply, an abstraction layer atop [React](https://reactjs.org/).
-
-You may find yourself asking, "Why an abstraction layer?". For a few reasons:
-
-- In many applications, especially those extended by a rich plugin ecosystem as is the case with WordPress, it's wise to create interfaces to underlying third-party code. The thinking is that if ever a need arises to change or even replace the underlying implementation, it can be done without catastrophic rippling effects to dependent code, so long as the interface stays the same.
-- It provides a mechanism to shield implementers by omitting features with uncertain futures (`createClass`, `PropTypes`).
-- It helps avoid incompatibilities between versions by ensuring that every plugin operates on a single centralized version of the code.
-
-On the `wp.element` global object, you will find the following, ordered roughly by the likelihood you'll encounter it in your code:
-
-- [`createElement`](https://reactjs.org/docs/react-api.html#createelement)
-- [`render`](https://reactjs.org/docs/react-dom.html#render)
+Element is a package that builds on top of [React](https://reactjs.org/) and provide a set of utilities to work with React components and React elements.
## Installation
@@ -23,39 +12,6 @@ npm install @wordpress/element --save
_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
-## Usage
-
-Let's render a customized greeting into an empty element.
-
-**Note:** `createRoot` was introduced with React 18, which is bundled with WordPress 6.2. Therefore it may be necessary to mount your component depending on which version of WordPress (and therefore React) you are currently using. This is possible by checking for an undefined import and falling back to the React 17 method of mounting an app using `render`.
-
-Assuming the following root element is present in the page:
-
-```html
-<div id="greeting"></div>
-```
-
-We can mount our app:
-
-```js
-import { createRoot, render, createElement } from '@wordpress/element';
-
-function Greeting( props ) {
- return createElement( 'span', null, 'Hello ' + props.toWhom + '!' );
-}
-
-const domElement = document.getElementById( 'greeting' );
-const uiElement = createElement( Greeting, { toWhom: 'World' } );
-
-if ( createRoot ) {
- createRoot( domElement ).render( uiElement );
-} else {
- render( uiElement, domElement );
-}
-```
-
-Refer to the [official React Quick Start guide](https://reactjs.org/docs/hello-world.html) for a more thorough walkthrough, in most cases substituting `React` and `ReactDOM` with `wp.element` in code examples.
-
## Why React?
At the risk of igniting debate surrounding any single "best" front-end framework, the choice to use any tool should be motivated specifically to serve the requirements of the system. In modeling the concept of a [block](https://github.com/WordPress/gutenberg/tree/HEAD/packages/blocks/README.md), we observe the following technical requirements:
@@ -67,27 +23,6 @@ At its most basic, React provides a simple input / output mechanism. **Given a s
The offerings of any framework necessarily become more complex as these requirements increase; many front-end frameworks prescribe ideas around page routing, retrieving and updating data, and managing layout. React is not immune to this, but the introduced complexity is rarely caused by React itself, but instead managing an arrangement of supporting tools. By moving these concerns out of sight to the internals of the system (WordPress core code), we can minimize the responsibilities of plugin authors to a small, clear set of touch points.
-## JSX
-
-While not at all a requirement to use React, [JSX](https://reactjs.org/docs/introducing-jsx.html) is a recommended syntax extension to compose elements more expressively. Through a build process, JSX is converted back to the `createElement` syntax you see earlier in this document.
-
-If you've configured [Babel](http://babeljs.io/) for your project, you can opt in to JSX syntax by specifying the `pragma` option of the [`transform-react-jsx` plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx) in your [`.babelrc` configuration](http://babeljs.io/docs/usage/babelrc/).
-
-```json
-{
- "plugins": [
- [
- "transform-react-jsx",
- {
- "pragma": "createElement"
- }
- ]
- ]
-}
-```
-
-This assumes that you will import the `createElement` function in any file where you use JSX. Alternatively, consider using the [`@wordpress/babel-plugin-import-jsx-pragma` Babel plugin](https://www.npmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma) to automate the import of this function.
-
## API
<!-- START TOKEN(Autogenerated API docs) -->
@@ -102,12 +37,12 @@ Creates a copy of an element with extended props.
_Parameters_
-- _element_ `WPElement`: Element
+- _element_ `Element`: Element
- _props_ `?Object`: Props to apply to cloned element
_Returns_
-- `WPElement`: Cloned element.
+- `Element`: Cloned element.
### Component
@@ -145,11 +80,11 @@ _Parameters_
- _type_ `?(string|Function)`: Tag name or element creator
- _props_ `Object`: Element properties, either attribute set to apply to DOM node or values to pass through to element creator
-- _children_ `...WPElement`: Descendant elements
+- _children_ `...Element`: Descendant elements
_Returns_
-- `WPElement`: Element.
+- `Element`: Element.
### createInterpolateElement
@@ -175,11 +110,11 @@ You would have something like this as the conversionMap value:
_Parameters_
- _interpolatedString_ `string`: The interpolation string to be parsed.
-- _conversionMap_ `Record<string, WPElement>`: The map used to convert the string to a react element.
+- _conversionMap_ `Record<string, Element>`: The map used to convert the string to a react element.
_Returns_
-- `WPElement`: A wp element.
+- `Element`: A wp element.
### createPortal
@@ -191,7 +126,7 @@ _Related_
_Parameters_
-- _child_ `import('./react').WPElement`: Any renderable child, such as an element, string, or fragment.
+- _child_ `import('react').ReactElement`: Any renderable child, such as an element, string, or fragment.
- _container_ `HTMLElement`: DOM node into which element should be rendered.
### createRef
@@ -220,7 +155,7 @@ Finds the dom node of a React component.
_Parameters_
-- _component_ `import('./react').WPComponent`: Component's instance.
+- _component_ `import('react').ComponentType`: Component's instance.
### flushSync
@@ -240,7 +175,7 @@ _Parameters_
_Returns_
-- `WPComponent`: Enhanced component.
+- `Component`: Enhanced component.
### Fragment
@@ -282,7 +217,7 @@ _Returns_
### isValidElement
-Checks if an object is a valid WPElement.
+Checks if an object is a valid React Element.
_Parameters_
@@ -290,7 +225,7 @@ _Parameters_
_Returns_
-- `boolean`: true if objectToTest is a valid WPElement and false otherwise.
+- `boolean`: true if objectToTest is a valid React Element and false otherwise.
### lazy
diff --git a/packages/element/src/create-interpolate-element.js b/packages/element/src/create-interpolate-element.js
index 761a01079f5a14..88f6254dad7d6e 100644
--- a/packages/element/src/create-interpolate-element.js
+++ b/packages/element/src/create-interpolate-element.js
@@ -3,7 +3,11 @@
*/
import { createElement, cloneElement, Fragment, isValidElement } from './react';
-/** @typedef {import('./react').WPElement} WPElement */
+/**
+ * Object containing a React element.
+ *
+ * @typedef {import('react').ReactElement} Element
+ */
let indoc, offset, output, stack;
@@ -29,17 +33,17 @@ const tokenizer = /<(\/)?(\w+)\s*(\/)?>/g;
*
* @typedef Frame
*
- * @property {WPElement} element A parent element which may still have
- * @property {number} tokenStart Offset at which parent element first
- * appears.
- * @property {number} tokenLength Length of string marking start of parent
- * element.
- * @property {number} [prevOffset] Running offset at which parsing should
- * continue.
- * @property {number} [leadingTextStart] Offset at which last closing element
- * finished, used for finding text between
- * elements.
- * @property {WPElement[]} children Children.
+ * @property {Element} element A parent element which may still have
+ * @property {number} tokenStart Offset at which parent element first
+ * appears.
+ * @property {number} tokenLength Length of string marking start of parent
+ * element.
+ * @property {number} [prevOffset] Running offset at which parsing should
+ * continue.
+ * @property {number} [leadingTextStart] Offset at which last closing element
+ * finished, used for finding text between
+ * elements.
+ * @property {Element[]} children Children.
*/
/**
@@ -49,17 +53,17 @@ const tokenizer = /<(\/)?(\w+)\s*(\/)?>/g;
* parsed.
*
* @private
- * @param {WPElement} element A parent element which may still have
- * nested children not yet parsed.
- * @param {number} tokenStart Offset at which parent element first
- * appears.
- * @param {number} tokenLength Length of string marking start of parent
- * element.
- * @param {number} [prevOffset] Running offset at which parsing should
- * continue.
- * @param {number} [leadingTextStart] Offset at which last closing element
- * finished, used for finding text between
- * elements.
+ * @param {Element} element A parent element which may still have
+ * nested children not yet parsed.
+ * @param {number} tokenStart Offset at which parent element first
+ * appears.
+ * @param {number} tokenLength Length of string marking start of parent
+ * element.
+ * @param {number} [prevOffset] Running offset at which parsing should
+ * continue.
+ * @param {number} [leadingTextStart] Offset at which last closing element
+ * finished, used for finding text between
+ * elements.
*
* @return {Frame} The stack frame tracking parse progress.
*/
@@ -101,11 +105,11 @@ function createFrame(
* }
* ```
*
- * @param {string} interpolatedString The interpolation string to be parsed.
- * @param {Record<string, WPElement>} conversionMap The map used to convert the string to
- * a react element.
+ * @param {string} interpolatedString The interpolation string to be parsed.
+ * @param {Record<string, Element>} conversionMap The map used to convert the string to
+ * a react element.
* @throws {TypeError}
- * @return {WPElement} A wp element.
+ * @return {Element} A wp element.
*/
const createInterpolateElement = ( interpolatedString, conversionMap ) => {
indoc = interpolatedString;
@@ -116,7 +120,7 @@ const createInterpolateElement = ( interpolatedString, conversionMap ) => {
if ( ! isValidConversionMap( conversionMap ) ) {
throw new TypeError(
- 'The conversionMap provided is not valid. It must be an object with values that are WPElements'
+ 'The conversionMap provided is not valid. It must be an object with values that are React Elements'
);
}
@@ -130,7 +134,7 @@ const createInterpolateElement = ( interpolatedString, conversionMap ) => {
* Validate conversion map.
*
* A map is considered valid if it's an object and every value in the object
- * is a WPElement
+ * is a React Element
*
* @private
*
diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
index bd444b2828bef7..862b02706876d2 100644
--- a/packages/element/src/react-platform.js
+++ b/packages/element/src/react-platform.js
@@ -16,16 +16,16 @@ import { createRoot, hydrateRoot } from 'react-dom/client';
*
* @see https://github.com/facebook/react/issues/10309#issuecomment-318433235
*
- * @param {import('./react').WPElement} child Any renderable child, such as an element,
- * string, or fragment.
- * @param {HTMLElement} container DOM node into which element should be rendered.
+ * @param {import('react').ReactElement} child Any renderable child, such as an element,
+ * string, or fragment.
+ * @param {HTMLElement} container DOM node into which element should be rendered.
*/
export { createPortal };
/**
* Finds the dom node of a React component.
*
- * @param {import('./react').WPComponent} component Component's instance.
+ * @param {import('react').ComponentType} component Component's instance.
*/
export { findDOMNode };
diff --git a/packages/element/src/react.js b/packages/element/src/react.js
index 1eb49ac6742c2d..6882f9ad3344a5 100644
--- a/packages/element/src/react.js
+++ b/packages/element/src/react.js
@@ -37,19 +37,19 @@ import {
/**
* Object containing a React element.
*
- * @typedef {import('react').ReactElement} WPElement
+ * @typedef {import('react').ReactElement} Element
*/
/**
* Object containing a React component.
*
- * @typedef {import('react').ComponentType} WPComponent
+ * @typedef {import('react').ComponentType} ComponentType
*/
/**
* Object containing a React synthetic event.
*
- * @typedef {import('react').SyntheticEvent} WPSyntheticEvent
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
*/
/**
@@ -67,10 +67,10 @@ export { Children };
/**
* Creates a copy of an element with extended props.
*
- * @param {WPElement} element Element
- * @param {?Object} props Props to apply to cloned element
+ * @param {Element} element Element
+ * @param {?Object} props Props to apply to cloned element
*
- * @return {WPElement} Cloned element.
+ * @return {Element} Cloned element.
*/
export { cloneElement };
@@ -96,9 +96,9 @@ export { createContext };
* @param {Object} props Element properties, either attribute
* set to apply to DOM node or values to
* pass through to element creator
- * @param {...WPElement} children Descendant elements
+ * @param {...Element} children Descendant elements
*
- * @return {WPElement} Element.
+ * @return {Element} Element.
*/
export { createElement };
@@ -120,7 +120,7 @@ export { createRef };
* @param {Function} forwarder Function passed `props` and `ref`, expected to
* return an element.
*
- * @return {WPComponent} Enhanced component.
+ * @return {Component} Enhanced component.
*/
export { forwardRef };
@@ -130,11 +130,11 @@ export { forwardRef };
export { Fragment };
/**
- * Checks if an object is a valid WPElement.
+ * Checks if an object is a valid React Element.
*
* @param {Object} objectToCheck The object to be checked.
*
- * @return {boolean} true if objectToTest is a valid WPElement and false otherwise.
+ * @return {boolean} true if objectToTest is a valid React Element and false otherwise.
*/
export { isValidElement };
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
index d18a6f00fa941f..e047ccad432dc8 100644
--- a/packages/element/src/serialize.js
+++ b/packages/element/src/serialize.js
@@ -46,7 +46,7 @@ import {
import { createContext, Fragment, StrictMode, forwardRef } from './react';
import RawHTML from './raw-html';
-/** @typedef {import('./react').WPElement} WPElement */
+/** @typedef {import('react').ReactElement} ReactElement */
const { Provider, Consumer } = createContext( undefined );
const ForwardRef = forwardRef( () => {
@@ -672,15 +672,15 @@ export function renderNativeComponent(
return '<' + type + attributes + '>' + content + '</' + type + '>';
}
-/** @typedef {import('./react').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
/**
* Serializes a non-native component type to string.
*
- * @param {WPComponent} Component Component type to serialize.
- * @param {Object} props Props object.
- * @param {Object} [context] Context object.
- * @param {Object} [legacyContext] Legacy context object.
+ * @param {ComponentType} Component Component type to serialize.
+ * @param {Object} props Props object.
+ * @param {Object} [context] Context object.
+ * @param {Object} [legacyContext] Legacy context object.
*
* @return {string} Serialized element
*/
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 585337a068c722..97a29a87ef2046 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Breaking Changes
+
+- Change the required major version of Prettier from v2 to v3 ([#54775](https://github.com/WordPress/gutenberg/pull/54775)).
+
## 16.0.0 (2023-09-20)
### Breaking Changes
diff --git a/packages/eslint-plugin/configs/jsdoc.js b/packages/eslint-plugin/configs/jsdoc.js
index 4aaed834363996..62effdb709b39e 100644
--- a/packages/eslint-plugin/configs/jsdoc.js
+++ b/packages/eslint-plugin/configs/jsdoc.js
@@ -21,9 +21,11 @@ const temporaryWordPressInternalTypes = [
'WPBlockTypeIcon',
'WPBlockTypeIconRender',
'WPBlockTypeIconDescriptor',
- 'WPComponent',
- 'WPElement',
'WPIcon',
+
+ // These two should be removed once we use the TS types from "react".
+ 'Component',
+ 'Element',
];
/**
diff --git a/packages/eslint-plugin/docs/rules/dependency-group.md b/packages/eslint-plugin/docs/rules/dependency-group.md
index e3910544aedb71..8d0b53996ce22b 100644
--- a/packages/eslint-plugin/docs/rules/dependency-group.md
+++ b/packages/eslint-plugin/docs/rules/dependency-group.md
@@ -12,7 +12,7 @@ Examples of **incorrect** code for this rule:
```js
import { camelCase } from 'change-case';
-import { Component } from '@wordpress/element';
+import { Component } from 'react';
import edit from './edit';
```
@@ -27,7 +27,7 @@ import { camelCase } from 'change-case';
/*
* WordPress dependencies
*/
-import { Component } from '@wordpress/element';
+import { Component } from 'react';
/*
* Internal dependencies
diff --git a/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md b/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md
index 87dc07bc9e62a2..8e203a2c82ba6d 100644
--- a/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md
+++ b/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md
@@ -19,7 +19,7 @@ class MyComponent extends Component {
}
}
-class MyComponent extends wp.element.Component {
+class MyComponent extends React.Component {
componentDidMount() {
setTimeout( fn );
}
@@ -48,7 +48,7 @@ class MyNotComponent {
}
}
-class MyComponent extends wp.element.Component {
+class MyComponent extends React.Component {
componentDidMount() {
const { setTimeout } = this.props;
setTimeout( fn );
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 2805c9a1e18d28..771b918298df28 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -52,7 +52,7 @@
"peerDependencies": {
"@babel/core": ">=7",
"eslint": ">=8",
- "prettier": ">=2",
+ "prettier": ">=3",
"typescript": ">=4"
},
"peerDependenciesMeta": {
diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
index 50019be4cc958e..1596da055cc402 100644
--- a/packages/format-library/src/link/index.js
+++ b/packages/format-library/src/link/index.js
@@ -130,6 +130,7 @@ export const link = {
url: 'href',
type: 'data-type',
id: 'data-id',
+ _id: 'id',
target: 'target',
rel: 'rel',
},
diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js
index 7a2c2f92ea462c..f71c7766222582 100644
--- a/packages/format-library/src/text-color/inline.js
+++ b/packages/format-library/src/text-color/inline.js
@@ -137,6 +137,11 @@ export default function InlineColorUI( {
onClose,
contentRef,
} ) {
+ const popoverAnchor = useAnchor( {
+ editableContentElement: contentRef.current,
+ settings,
+ } );
+
/*
As you change the text color by typing a HEX value into a field,
the return value of document.getSelection jumps to the field you're editing,
@@ -144,12 +149,8 @@ export default function InlineColorUI( {
it will return null, since it can't find the <mark> element within the HEX input.
This caches the last truthy value of the selection anchor reference.
*/
- const popoverAnchor = useCachedTruthy(
- useAnchor( {
- editableContentElement: contentRef.current,
- settings,
- } )
- );
+ const cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );
+ popoverAnchor.getBoundingClientRect = () => cachedRect;
return (
<Popover
diff --git a/packages/interface/src/components/complementary-area/README.md b/packages/interface/src/components/complementary-area/README.md
index 0013f0b9d4dcc4..bca534b30af970 100644
--- a/packages/interface/src/components/complementary-area/README.md
+++ b/packages/interface/src/components/complementary-area/README.md
@@ -50,7 +50,7 @@ A className passed to the header container.
The icon to render.
-- Type: `Function|WPComponent|null`
+- Type: `Function|Component|null`
- Required: No
- Default: `null`
diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md
index 281ef698526e71..1721279a6e99da 100644
--- a/packages/keyboard-shortcuts/README.md
+++ b/packages/keyboard-shortcuts/README.md
@@ -26,7 +26,7 @@ _Parameters_
_Returns_
-- `import('@wordpress/element').WPElement`: Component.
+- `Element`: Component.
### store
diff --git a/packages/keyboard-shortcuts/src/components/shortcut-provider.js b/packages/keyboard-shortcuts/src/components/shortcut-provider.js
index 9fabf392738f61..485350bb3c0e90 100644
--- a/packages/keyboard-shortcuts/src/components/shortcut-provider.js
+++ b/packages/keyboard-shortcuts/src/components/shortcut-provider.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
/**
* Internal dependencies
@@ -17,15 +17,15 @@ const { Provider } = context;
*
* @param {Object} props Props to pass to `div`.
*
- * @return {import('@wordpress/element').WPElement} Component.
+ * @return {Element} Component.
*/
export function ShortcutProvider( props ) {
- const keyboardShortcuts = useRef( new Set() );
+ const [ keyboardShortcuts ] = useState( () => new Set() );
function onKeyDown( event ) {
if ( props.onKeyDown ) props.onKeyDown( event );
- for ( const keyboardShortcut of keyboardShortcuts.current ) {
+ for ( const keyboardShortcut of keyboardShortcuts ) {
keyboardShortcut( event );
}
}
diff --git a/packages/keyboard-shortcuts/src/store/actions.js b/packages/keyboard-shortcuts/src/store/actions.js
index d45a23a09f21da..2b77b6c1e1fe45 100644
--- a/packages/keyboard-shortcuts/src/store/actions.js
+++ b/packages/keyboard-shortcuts/src/store/actions.js
@@ -29,9 +29,9 @@
* @example
*
*```js
+ * import { useEffect } from 'react';
* import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
* import { useSelect, useDispatch } from '@wordpress/data';
- * import { useEffect } from '@wordpress/element';
* import { __ } from '@wordpress/i18n';
*
* const ExampleComponent = () => {
@@ -91,9 +91,9 @@ export function registerShortcut( {
* @example
*
*```js
+ * import { useEffect } from 'react';
* import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
* import { useSelect, useDispatch } from '@wordpress/data';
- * import { useEffect } from '@wordpress/element';
* import { __ } from '@wordpress/i18n';
*
* const ExampleComponent = () => {
diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js
index 9ba1589e52f39b..1f5e62f9115b36 100644
--- a/packages/list-reusable-blocks/src/components/import-form/index.js
+++ b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -49,8 +49,8 @@ function ImportForm( { instanceId, onUpload } ) {
case 'Invalid JSON file':
uiMessage = __( 'Invalid JSON file' );
break;
- case 'Invalid Pattern JSON file':
- uiMessage = __( 'Invalid Pattern JSON file' );
+ case 'Invalid pattern JSON file':
+ uiMessage = __( 'Invalid pattern JSON file' );
break;
default:
uiMessage = __( 'Unknown error' );
diff --git a/packages/list-reusable-blocks/src/utils/import.js b/packages/list-reusable-blocks/src/utils/import.js
index 465fb080ce8dfe..432948ce6d6dbc 100644
--- a/packages/list-reusable-blocks/src/utils/import.js
+++ b/packages/list-reusable-blocks/src/utils/import.js
@@ -31,7 +31,7 @@ async function importReusableBlock( file ) {
( parsedContent.syncStatus &&
typeof parsedContent.syncStatus !== 'string' )
) {
- throw new Error( 'Invalid Pattern JSON file' );
+ throw new Error( 'Invalid pattern JSON file' );
}
const postType = await apiFetch( { path: `/wp/v2/types/wp_block` } );
const reusableBlock = await apiFetch( {
diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js
index 11c38a9c931ae4..445eed10650b61 100644
--- a/packages/notices/src/store/actions.js
+++ b/packages/notices/src/store/actions.js
@@ -81,7 +81,7 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) {
} = options;
// The supported value shape of content is currently limited to plain text
- // strings. To avoid setting expectation that e.g. a WPElement could be
+ // strings. To avoid setting expectation that e.g. a React Element could be
// supported, cast to a string.
content = String( content );
diff --git a/packages/patterns/src/components/category-selector.js b/packages/patterns/src/components/category-selector.js
index c9305806c7e13f..397d851d3886b9 100644
--- a/packages/patterns/src/components/category-selector.js
+++ b/packages/patterns/src/components/category-selector.js
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { FormTokenField } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { useDebounce } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
@@ -13,13 +13,6 @@ const unescapeString = ( arg ) => {
return decodeEntities( arg );
};
-const unescapeTerm = ( term ) => {
- return {
- ...term,
- name: unescapeString( term.name ),
- };
-};
-
const EMPTY_ARRAY = [];
const MAX_TERMS_SUGGESTIONS = 20;
const DEFAULT_QUERY = {
@@ -27,13 +20,11 @@ const DEFAULT_QUERY = {
_fields: 'id,name',
context: 'view',
};
-const slug = 'wp_pattern_category';
+export const CATEGORY_SLUG = 'wp_pattern_category';
-export default function CategorySelector( { onCategorySelection } ) {
- const [ values, setValues ] = useState( [] );
+export default function CategorySelector( { values, onChange } ) {
const [ search, setSearch ] = useState( '' );
const debouncedSearch = useDebounce( setSearch, 500 );
- const { invalidateResolution } = useDispatch( coreStore );
const { searchResults } = useSelect(
( select ) => {
@@ -41,7 +32,7 @@ export default function CategorySelector( { onCategorySelection } ) {
return {
searchResults: !! search
- ? getEntityRecords( 'taxonomy', slug, {
+ ? getEntityRecords( 'taxonomy', CATEGORY_SLUG, {
...DEFAULT_QUERY,
search,
} )
@@ -57,28 +48,7 @@ export default function CategorySelector( { onCategorySelection } ) {
);
}, [ searchResults ] );
- const { saveEntityRecord } = useDispatch( coreStore );
-
- async function findOrCreateTerm( term ) {
- try {
- const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
- throwOnError: true,
- } );
- invalidateResolution( 'getUserPatternCategories' );
- return unescapeTerm( newTerm );
- } catch ( error ) {
- if ( error.code !== 'term_exists' ) {
- throw error;
- }
-
- return {
- id: error.data.term_id,
- name: term.name,
- };
- }
- }
-
- function onChange( termNames ) {
+ function handleChange( termNames ) {
const uniqueTerms = termNames.reduce( ( terms, newTerm ) => {
if (
! terms.some(
@@ -90,15 +60,7 @@ export default function CategorySelector( { onCategorySelection } ) {
return terms;
}, [] );
- setValues( uniqueTerms );
-
- Promise.all(
- uniqueTerms.map( ( termName ) =>
- findOrCreateTerm( { name: termName } )
- )
- ).then( ( newTerms ) => {
- onCategorySelection( newTerms );
- } );
+ onChange( uniqueTerms );
}
return (
@@ -107,7 +69,7 @@ export default function CategorySelector( { onCategorySelection } ) {
className="patterns-menu-items__convert-modal-categories"
value={ values }
suggestions={ suggestions }
- onChange={ onChange }
+ onChange={ handleChange }
onInputChange={ debouncedSearch }
maxSuggestions={ MAX_TERMS_SUGGESTIONS }
label={ __( 'Categories' ) }
diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
index 189004b6a046b2..531936da5e5c28 100644
--- a/packages/patterns/src/components/create-pattern-modal.js
+++ b/packages/patterns/src/components/create-pattern-modal.js
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
@@ -23,7 +24,7 @@ import { PATTERN_DEFAULT_CATEGORY, PATTERN_SYNC_TYPES } from '../constants';
* Internal dependencies
*/
import { store as patternsStore } from '../store';
-import CategorySelector from './category-selector';
+import CategorySelector, { CATEGORY_SLUG } from './category-selector';
import { unlock } from '../lock-unlock';
export default function CreatePatternModal( {
@@ -34,13 +35,26 @@ export default function CreatePatternModal( {
className = 'patterns-menu-items__convert-modal',
} ) {
const [ syncType, setSyncType ] = useState( PATTERN_SYNC_TYPES.full );
- const [ categories, setCategories ] = useState( [] );
+ const [ categoryTerms, setCategoryTerms ] = useState( [] );
const [ title, setTitle ] = useState( '' );
+ const [ isSaving, setIsSaving ] = useState( false );
const { createPattern } = unlock( useDispatch( patternsStore ) );
-
+ const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
const { createErrorNotice } = useDispatch( noticesStore );
+
async function onCreate( patternTitle, sync ) {
+ if ( ! title || isSaving ) {
+ return;
+ }
+
try {
+ setIsSaving( true );
+ const categories = await Promise.all(
+ categoryTerms.map( ( termName ) =>
+ findOrCreateTerm( termName )
+ )
+ );
+
const newPattern = await createPattern(
patternTitle,
sync,
@@ -57,12 +71,35 @@ export default function CreatePatternModal( {
id: 'convert-to-pattern-error',
} );
onError();
+ } finally {
+ setIsSaving( false );
+ setCategoryTerms( [] );
+ setTitle( '' );
}
}
- const handleCategorySelection = ( selectedCategories ) => {
- setCategories( selectedCategories.map( ( cat ) => cat.id ) );
- };
+ /**
+ * @param {string} term
+ * @return {Promise<number>} The pattern category id.
+ */
+ async function findOrCreateTerm( term ) {
+ try {
+ const newTerm = await saveEntityRecord(
+ 'taxonomy',
+ CATEGORY_SLUG,
+ { name: term },
+ { throwOnError: true }
+ );
+ invalidateResolution( 'getUserPatternCategories' );
+ return newTerm.id;
+ } catch ( error ) {
+ if ( error.code !== 'term_exists' ) {
+ throw error;
+ }
+
+ return error.data.term_id;
+ }
+ }
return (
<Modal
@@ -77,7 +114,6 @@ export default function CreatePatternModal( {
onSubmit={ ( event ) => {
event.preventDefault();
onCreate( title, syncType );
- setTitle( '' );
} }
>
<VStack spacing="5">
@@ -90,7 +126,8 @@ export default function CreatePatternModal( {
className="patterns-create-modal__name-input"
/>
<CategorySelector
- onCategorySelection={ handleCategorySelection }
+ values={ categoryTerms }
+ onChange={ setCategoryTerms }
/>
<ToggleControl
label={ __( 'Synced' ) }
@@ -117,7 +154,12 @@ export default function CreatePatternModal( {
{ __( 'Cancel' ) }
</Button>
- <Button variant="primary" type="submit">
+ <Button
+ variant="primary"
+ type="submit"
+ aria-disabled={ ! title || isSaving }
+ isBusy={ isSaving }
+ >
{ __( 'Create' ) }
</Button>
</HStack>
diff --git a/packages/patterns/src/components/pattern-convert-button.js b/packages/patterns/src/components/pattern-convert-button.js
index 84340091338714..e110be22938df9 100644
--- a/packages/patterns/src/components/pattern-convert-button.js
+++ b/packages/patterns/src/components/pattern-convert-button.js
@@ -21,6 +21,7 @@ import { store as noticesStore } from '@wordpress/notices';
import { store as patternsStore } from '../store';
import CreatePatternModal from './create-pattern-modal';
import { unlock } from '../lock-unlock';
+import { PATTERN_SYNC_TYPES } from '../constants';
/**
* Menu control to convert block(s) to a pattern block.
@@ -28,7 +29,7 @@ import { unlock } from '../lock-unlock';
* @param {Object} props Component props.
* @param {string[]} props.clientIds Client ids of selected blocks.
* @param {string} props.rootClientId ID of the currently selected top-level block.
- * @return {import('@wordpress/element').WPComponent} The menu control or null.
+ * @return {import('react').ComponentType} The menu control or null.
*/
export default function PatternConvertButton( { clientIds, rootClientId } ) {
const { createSuccessNotice } = useDispatch( noticesStore );
@@ -96,23 +97,25 @@ export default function PatternConvertButton( { clientIds, rootClientId } ) {
}
const handleSuccess = ( { pattern } ) => {
- const newBlock = createBlock( 'core/block', {
- ref: pattern.id,
- } );
+ if ( pattern.wp_pattern_sync_status !== PATTERN_SYNC_TYPES.unsynced ) {
+ const newBlock = createBlock( 'core/block', {
+ ref: pattern.id,
+ } );
- replaceBlocks( clientIds, newBlock );
- setEditingPattern( newBlock.clientId, true );
+ replaceBlocks( clientIds, newBlock );
+ setEditingPattern( newBlock.clientId, true );
+ }
createSuccessNotice(
- pattern.wp_pattern_sync_status === 'unsynced'
+ pattern.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced
? sprintf(
// translators: %s: the name the user has given to the pattern.
- __( 'Unsynced Pattern created: %s' ),
+ __( 'Unsynced pattern created: %s' ),
pattern.title.raw
)
: sprintf(
// translators: %s: the name the user has given to the pattern.
- __( 'Synced Pattern created: %s' ),
+ __( 'Synced pattern created: %s' ),
pattern.title.raw
),
{
diff --git a/packages/patterns/src/constants.js b/packages/patterns/src/constants.js
index ecf7c7ddb3740c..005313ea1d3788 100644
--- a/packages/patterns/src/constants.js
+++ b/packages/patterns/src/constants.js
@@ -4,6 +4,7 @@ export const PATTERN_TYPES = {
};
export const PATTERN_DEFAULT_CATEGORY = 'all-patterns';
+export const PATTERN_USER_CATEGORY = 'my-patterns';
export const PATTERN_CORE_SOURCES = [
'core',
'pattern-directory/core',
diff --git a/packages/patterns/src/private-apis.js b/packages/patterns/src/private-apis.js
index 306476efc31212..cdbf1a6ba29408 100644
--- a/packages/patterns/src/private-apis.js
+++ b/packages/patterns/src/private-apis.js
@@ -7,6 +7,7 @@ import PatternsMenuItems from './components';
import {
PATTERN_TYPES,
PATTERN_DEFAULT_CATEGORY,
+ PATTERN_USER_CATEGORY,
PATTERN_CORE_SOURCES,
PATTERN_SYNC_TYPES,
} from './constants';
@@ -17,6 +18,7 @@ lock( privateApis, {
PatternsMenuItems,
PATTERN_TYPES,
PATTERN_DEFAULT_CATEGORY,
+ PATTERN_USER_CATEGORY,
PATTERN_CORE_SOURCES,
PATTERN_SYNC_TYPES,
} );
diff --git a/packages/patterns/src/store/actions.js b/packages/patterns/src/store/actions.js
index 2861e4ce2dac06..dfa0326a709416 100644
--- a/packages/patterns/src/store/actions.js
+++ b/packages/patterns/src/store/actions.js
@@ -69,7 +69,7 @@ export const createPatternFromFile =
( parsedContent.syncStatus &&
typeof parsedContent.syncStatus !== 'string' )
) {
- throw new Error( 'Invalid Pattern JSON file' );
+ throw new Error( 'Invalid pattern JSON file' );
}
const pattern = await dispatch.createPattern(
diff --git a/packages/plugins/README.md b/packages/plugins/README.md
index a0e8441513e5d7..e9e5a704aeca71 100644
--- a/packages/plugins/README.md
+++ b/packages/plugins/README.md
@@ -48,7 +48,7 @@ _Usage_
```js
// Using ES5 syntax
-var el = wp.element.createElement;
+var el = React.createElement;
var PluginArea = wp.plugins.PluginArea;
function Layout() {
@@ -76,7 +76,7 @@ _Parameters_
_Returns_
-- `WPComponent`: The component to be rendered.
+- `Component`: The component to be rendered.
#### registerPlugin
@@ -86,12 +86,12 @@ _Usage_
```js
// Using ES5 syntax
-var el = wp.element.createElement;
+var el = React.createElement;
var Fragment = wp.element.Fragment;
var PluginSidebar = wp.editPost.PluginSidebar;
var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
var registerPlugin = wp.plugins.registerPlugin;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+var moreIcon = React.createElement( 'svg' ); //... svg element.
function Component() {
return el(
@@ -200,7 +200,7 @@ _Parameters_
_Returns_
-- `WPComponent`: Enhanced component with injected context as props.
+- `Component`: Enhanced component with injected context as props.
<!-- END TOKEN(Autogenerated API docs) -->
diff --git a/packages/plugins/src/api/index.ts b/packages/plugins/src/api/index.ts
index a5217e0fe2bdc6..45c8f931634198 100644
--- a/packages/plugins/src/api/index.ts
+++ b/packages/plugins/src/api/index.ts
@@ -1,4 +1,8 @@
/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
/**
* WordPress dependencies
@@ -6,7 +10,6 @@
import { applyFilters, doAction } from '@wordpress/hooks';
import { plugins as pluginsIcon } from '@wordpress/icons';
import type { IconType } from '@wordpress/components';
-import type { WPComponent } from '@wordpress/element';
/**
* Defined behavior of a plugin type.
@@ -27,7 +30,7 @@ export interface WPPlugin {
/**
* A component containing the UI elements to be rendered.
*/
- render: WPComponent;
+ render: ComponentType;
/**
* The optional scope to be used when rendering inside a plugin area.
@@ -53,12 +56,12 @@ const plugins = {} as Record< string, WPPlugin >;
* @example
* ```js
* // Using ES5 syntax
- * var el = wp.element.createElement;
+ * var el = React.createElement;
* var Fragment = wp.element.Fragment;
* var PluginSidebar = wp.editPost.PluginSidebar;
* var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
* var registerPlugin = wp.plugins.registerPlugin;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
*
* function Component() {
* return el(
diff --git a/packages/plugins/src/components/plugin-area/index.tsx b/packages/plugins/src/components/plugin-area/index.tsx
index 9410c9cef4e5ff..231a519b030d01 100644
--- a/packages/plugins/src/components/plugin-area/index.tsx
+++ b/packages/plugins/src/components/plugin-area/index.tsx
@@ -35,7 +35,7 @@ const getPluginContext = memoize(
* @example
* ```js
* // Using ES5 syntax
- * var el = wp.element.createElement;
+ * var el = React.createElement;
* var PluginArea = wp.plugins.PluginArea;
*
* function Layout() {
@@ -61,7 +61,7 @@ const getPluginContext = memoize(
* );
* ```
*
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
*/
function PluginArea( {
scope,
diff --git a/packages/plugins/src/components/plugin-context/index.tsx b/packages/plugins/src/components/plugin-context/index.tsx
index 76fbdabe048293..c2e6f8eaa232d8 100644
--- a/packages/plugins/src/components/plugin-context/index.tsx
+++ b/packages/plugins/src/components/plugin-context/index.tsx
@@ -38,7 +38,7 @@ export function usePluginContext() {
* expected to return object of props to
* merge with the component's own props.
*
- * @return {WPComponent} Enhanced component with injected context as props.
+ * @return {Component} Enhanced component with injected context as props.
*/
export const withPluginContext = (
mapContextToProps: < T >(
diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js
index 42ea556081ae2a..b566b487958870 100644
--- a/packages/plugins/src/components/test/plugin-area.js
+++ b/packages/plugins/src/components/test/plugin-area.js
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
+// eslint-disable-next-line testing-library/no-manual-cleanup
import { act, render, cleanup } from '@testing-library/react';
/**
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index 8ed832c883a7ad..09d60e39ee72b9 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Breaking Change
+
+- Change the required major version of Prettier from v2 to v3 ([#54775](https://github.com/WordPress/gutenberg/pull/54775)).
+
## 2.25.0 (2023-09-20)
## 2.24.0 (2023-08-31)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index e16eb823bb8883..7ea2bca4df2efd 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -28,7 +28,7 @@
"main": "lib/index.js",
"types": "build-types",
"peerDependencies": {
- "prettier": ">=2"
+ "prettier": ">=3"
},
"publishConfig": {
"access": "public"
diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle
index 71cb631a6cbf6d..7647548360ca75 100644
--- a/packages/react-native-aztec/android/build.gradle
+++ b/packages/react-native-aztec/android/build.gradle
@@ -11,7 +11,7 @@ buildscript {
espressoVersion = '3.0.1'
// libs
- aztecVersion = 'v1.6.4'
+ aztecVersion = 'v1.8.0'
wordpressUtilsVersion = '3.3.0'
// main
@@ -49,7 +49,7 @@ List<String> dirs = [
android {
namespace "org.wordpress.mobile.ReactNativeAztec"
- compileSdkVersion 33
+ compileSdkVersion 34
defaultConfig {
minSdkVersion 24
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index 4f1715b9656c5d..87ebdf194696ba 100644
--- a/packages/react-native-aztec/package.json
+++ b/packages/react-native-aztec/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-aztec",
- "version": "1.104.0",
+ "version": "1.105.0",
"description": "Aztec view for react-native.",
"private": true,
"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/android/react-native-bridge/build.gradle b/packages/react-native-bridge/android/react-native-bridge/build.gradle
index 8ea42babee505c..7800be076c842a 100644
--- a/packages/react-native-bridge/android/react-native-bridge/build.gradle
+++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle
@@ -35,7 +35,7 @@ android {
// File reference: `react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml`
namespace "org.wordpress.mobile.ReactNativeGutenbergBridge"
- compileSdkVersion 33
+ compileSdkVersion 34
defaultConfig {
minSdkVersion 24
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
index 87a19066f9d15f..ce427be2ad09b0 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -100,14 +100,14 @@ data class GutenbergProps @JvmOverloads constructor(
private const val PROP_TRANSLATIONS = "translations"
private const val PROP_COLORS = "colors"
private const val PROP_GRADIENTS = "gradients"
- private const val PROP_STYLES = "rawStyles"
- private const val PROP_FEATURES = "rawFeatures"
private const val PROP_IS_FSE_THEME = "isFSETheme"
private const val PROP_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks"
private const val PROP_QUOTE_BLOCK_V2 = "quoteBlockV2"
private const val PROP_LIST_BLOCK_V2 = "listBlockV2"
const val PROP_INITIAL_DATA = "initialData"
+ const val PROP_STYLES = "rawStyles"
+ const val PROP_FEATURES = "rawFeatures"
const val PROP_LOCALE = "locale"
const val PROP_CAPABILITIES = "capabilities"
const val PROP_CAPABILITIES_CONTACT_INFO_BLOCK = "contactInfoBlock"
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index 1beb86e3791fa3..b6de1b5c53fff8 100644
--- a/packages/react-native-bridge/package.json
+++ b/packages/react-native-bridge/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-bridge",
- "version": "1.104.0",
+ "version": "1.105.0",
"description": "Native bridge library used to integrate the block editor into a native App.",
"private": true,
"author": "The WordPress Contributors",
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 1debe8fbaad8e8..9316c4693cfaa6 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,12 @@ For each user feature we should also add a importance categorization label to i
## Unreleased
+## 1.105.0
+- [*] Limit inner blocks nesting depth to avoid call stack size exceeded crash [#54382]
+- [*] Prevent crashes when setting an invalid media URL for Video or Audio blocks [#54834]
+- [**] Fallback to Twitter provider when embedding X URLs [#54876]
+- [*] [internal] Update Ruby version from 2.7.4 to 3.2.2 [#54897]
+
## 1.104.0
- [*] Fix the obscurred "Insert from URL" input for media blocks when using a device in landscape orientation. [#54096]
- [**] RichText - Update logic for the placeholder text color [#54259]
diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js
index 9fb43452dcffca..6f2fbe77e7f68a 100644
--- a/packages/react-native-editor/__device-tests__/helpers/utils.js
+++ b/packages/react-native-editor/__device-tests__/helpers/utils.js
@@ -59,11 +59,12 @@ const getIOSPlatformVersions = () => {
childProcess.execSync( 'xcrun simctl list runtimes --json' ).toString()
);
- return runtimes
- .reverse()
- .filter(
- ( { name, isAvailable } ) => name.startsWith( 'iOS' ) && isAvailable
- );
+ return runtimes.reverse().filter(
+ ( { name, isAvailable, version } ) =>
+ name.startsWith( 'iOS' ) &&
+ /15(\.\d+)+/.test( version ) && // Appium 1 does not support newer iOS versions
+ isAvailable
+ );
};
// Initialises the driver and desired capabilities for appium.
@@ -122,7 +123,7 @@ const setupDriver = async () => {
const iosPlatformVersions = getIOSPlatformVersions();
if ( iosPlatformVersions.length === 0 ) {
throw new Error(
- 'No iOS simulators available! Please verify that you have iOS simulators installed.'
+ 'No compatible iOS simulators available! Please verify that you have iOS 15 simulators installed.'
);
}
// eslint-disable-next-line no-console
@@ -209,6 +210,9 @@ const typeStringIos = async ( driver, element, str, clear ) => {
await clearTextBox( driver, element );
}
await element.type( str );
+
+ // Wait for the list auto-scroll animation to finish
+ await driver.sleep( 3000 );
};
const clearTextBox = async ( driver, element ) => {
@@ -426,6 +430,15 @@ const tapPasteAboveElement = async ( driver, element ) => {
}
};
+const tapStatusBariOS = async ( driver ) => {
+ const action = new wd.TouchAction();
+ action.tap( { x: 20, y: 20 } );
+ await driver.performTouchAction( action );
+
+ // Wait for the scroll animation to finish
+ await driver.sleep( 3000 );
+};
+
const selectTextFromElement = async ( driver, element ) => {
if ( isAndroid() ) {
await longPressMiddleOfElement( driver, element, 0 );
@@ -801,6 +814,7 @@ module.exports = {
tapCopyAboveElement,
tapPasteAboveElement,
tapSelectAllAboveElement,
+ tapStatusBariOS,
timer,
toggleDarkMode,
toggleHtmlMode,
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index 65446ca4b5dda8..c296c561725382 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -23,6 +23,7 @@ const {
waitForVisible,
clickIfClickable,
launchApp,
+ tapStatusBariOS,
} = require( '../helpers/utils' );
const ADD_BLOCK_ID = isAndroid() ? 'Add block' : 'add-block-button';
@@ -53,8 +54,8 @@ class EditorPage {
}
}
- async initializeEditor( { initialData } = {} ) {
- await launchApp( this.driver, { initialData } );
+ async initializeEditor( { initialData, rawStyles, rawFeatures } = {} ) {
+ await launchApp( this.driver, { initialData, rawStyles, rawFeatures } );
// Stores initial values from the editor for different helpers.
const addButton =
@@ -192,7 +193,11 @@ class EditorPage {
: 'post-title';
if ( options.autoscroll ) {
- await swipeDown( this.driver );
+ if ( isAndroid() ) {
+ await swipeDown( this.driver );
+ } else {
+ await tapStatusBariOS( this.driver );
+ }
}
const elements =
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
index a3f7b599db6a14..69985317ddad33 100644
--- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
@@ -167,7 +167,10 @@ private Bundle getAppOptions() {
// Parse initial props from launch arguments
String initialData = null;
+ String rawStyles = null;
+ String rawFeatures = null;
Bundle extrasBundle = getIntent().getExtras();
+
if(extrasBundle != null) {
String initialProps = extrasBundle.getString(EXTRAS_INITIAL_PROPS, "{}");
try {
@@ -175,6 +178,12 @@ private Bundle getAppOptions() {
if (jsonObject.has(GutenbergProps.PROP_INITIAL_DATA)) {
initialData = jsonObject.getString(GutenbergProps.PROP_INITIAL_DATA);
}
+ if (jsonObject.has(GutenbergProps.PROP_STYLES)) {
+ rawStyles = jsonObject.getString(GutenbergProps.PROP_STYLES);
+ }
+ if (jsonObject.has(GutenbergProps.PROP_FEATURES)) {
+ rawFeatures = jsonObject.getString(GutenbergProps.PROP_FEATURES);
+ }
} catch (final JSONException e) {
Log.e("MainActivity", "Json parsing error: " + e.getMessage());
}
@@ -203,6 +212,12 @@ private Bundle getAppOptions() {
if(initialData != null) {
bundle.putString(GutenbergProps.PROP_INITIAL_DATA, initialData);
}
+ if(rawStyles != null) {
+ bundle.putString(GutenbergProps.PROP_STYLES, rawStyles);
+ }
+ if(rawFeatures != null) {
+ bundle.putString(GutenbergProps.PROP_FEATURES, rawFeatures);
+ }
return bundle;
}
diff --git a/packages/react-native-editor/android/build.gradle b/packages/react-native-editor/android/build.gradle
index 4746f9f3077bee..7baee554d330c7 100644
--- a/packages/react-native-editor/android/build.gradle
+++ b/packages/react-native-editor/android/build.gradle
@@ -4,7 +4,7 @@ buildscript {
kotlinVersion = '1.6.10'
buildToolsVersion = "33.0.0"
minSdkVersion = 24
- compileSdkVersion = 33
+ compileSdkVersion = 34
targetSdkVersion = 33
supportLibVersion = '28.0.0'
diff --git a/packages/react-native-editor/babel.config.js b/packages/react-native-editor/babel.config.js
index 62a9959bcf45a2..4f7138636e23ab 100644
--- a/packages/react-native-editor/babel.config.js
+++ b/packages/react-native-editor/babel.config.js
@@ -41,14 +41,14 @@ module.exports = function ( api ) {
/node_modules\/(react-native|@react-native-community|@react-navigation|react-native-reanimated)/,
},
{
- // Auto-add `import { createElement } from '@wordpress/element';` when JSX is found.
+ // Auto-add `import { createElement } from 'react';` when JSX is found.
plugins: [
[
'@wordpress/babel-plugin-import-jsx-pragma',
{
scopeVariable: 'createElement',
scopeVariableFrag: 'Fragment',
- source: '@wordpress/element',
+ source: 'react',
isDefault: false,
},
],
diff --git a/packages/react-native-editor/ios/.ruby-version b/packages/react-native-editor/ios/.ruby-version
index a4dd9dba4fbfc5..be94e6f53db6b3 100644
--- a/packages/react-native-editor/ios/.ruby-version
+++ b/packages/react-native-editor/ios/.ruby-version
@@ -1 +1 @@
-2.7.4
+3.2.2
diff --git a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
index a4e179d3baa742..5cbe46243ff4e4 100644
--- a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
+++ b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
@@ -216,6 +216,7 @@
00E356EB1AD99517003FC87E /* Frameworks */,
00E356EC1AD99517003FC87E /* Resources */,
71C0B5FDA891DD4D469D2DFB /* [CP] Embed Pods Frameworks */,
+ 6C6876BA82C8AB734B9EB348 /* [CP] Copy Pods Resources */,
);
buildRules = (
);
@@ -237,6 +238,7 @@
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
06CE89E9A162D62B604C3B6C /* [CP] Embed Pods Frameworks */,
+ BD87D2B56A91E91E3DFD2CBA /* [CP] Copy Pods Resources */,
);
buildRules = (
);
@@ -333,107 +335,55 @@
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-frameworks.sh",
- "${BUILT_PRODUCTS_DIR}/BVLinearGradient/BVLinearGradient.framework",
- "${BUILT_PRODUCTS_DIR}/DoubleConversion/DoubleConversion.framework",
- "${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework",
- "${BUILT_PRODUCTS_DIR}/RCT-Folly/folly.framework",
- "${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework",
- "${BUILT_PRODUCTS_DIR}/RNCClipboard/RNCClipboard.framework",
- "${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework",
- "${BUILT_PRODUCTS_DIR}/RNFastImage/RNFastImage.framework",
- "${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
- "${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
- "${BUILT_PRODUCTS_DIR}/RNSVG/RNSVG.framework",
- "${BUILT_PRODUCTS_DIR}/RNScreens/RNScreens.framework",
- "${BUILT_PRODUCTS_DIR}/RNTAztecView/RNTAztecView.framework",
- "${BUILT_PRODUCTS_DIR}/React-Codegen/React_Codegen.framework",
- "${BUILT_PRODUCTS_DIR}/React-Core/React.framework",
- "${BUILT_PRODUCTS_DIR}/React-CoreModules/CoreModules.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTAnimation/RCTAnimation.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTAppDelegate/React_RCTAppDelegate.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTBlob/RCTBlob.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTImage/RCTImage.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTLinking/RCTLinking.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTNetwork/RCTNetwork.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTSettings/RCTSettings.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTText/RCTText.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTVibration/RCTVibration.framework",
- "${BUILT_PRODUCTS_DIR}/React-cxxreact/cxxreact.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsc/React_jsc.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsi/jsi.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsiexecutor/jsireact.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsinspector/jsinspector.framework",
- "${BUILT_PRODUCTS_DIR}/React-logger/logger.framework",
- "${BUILT_PRODUCTS_DIR}/React-perflogger/reactperflogger.framework",
- "${BUILT_PRODUCTS_DIR}/ReactCommon/ReactCommon.framework",
- "${BUILT_PRODUCTS_DIR}/SDWebImage/SDWebImage.framework",
- "${BUILT_PRODUCTS_DIR}/SDWebImageWebPCoder/SDWebImageWebPCoder.framework",
- "${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS/Aztec.framework",
- "${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework",
- "${BUILT_PRODUCTS_DIR}/fmt/fmt.framework",
- "${BUILT_PRODUCTS_DIR}/glog/glog.framework",
- "${BUILT_PRODUCTS_DIR}/libwebp/libwebp.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-blur/react_native_blur.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-get-random-values/react_native_get_random_values.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-safe-area/react_native_safe_area.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-safe-area-context/react_native_safe_area_context.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-slider/react_native_slider.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-webview/react_native_webview.framework",
+ "${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/BVLinearGradient.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DoubleConversion.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCClipboard.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNFastImage.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNSVG.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNScreens.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNTAztecView.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React_Codegen.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CoreModules.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTAnimation.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React_RCTAppDelegate.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTBlob.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTImage.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTLinking.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTNetwork.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTSettings.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTText.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTVibration.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/cxxreact.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React_jsc.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsi.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsireact.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsinspector.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/logger.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/reactperflogger.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactCommon.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImage.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImageWebPCoder.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/fmt.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/libwebp.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_blur.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_get_random_values.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area_context.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_slider.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_webview.framework",
+ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
+ 6C6876BA82C8AB734B9EB348 /* [CP] Copy Pods Resources */ = {
+ isa = PBXShellScriptBuildPhase;
+ buildActionMask = 2147483647;
+ files = (
+ );
+ inputPaths = (
+ "${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests-resources.sh",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/content-functions.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/gutenberg-observer.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/inject-css.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/insert-block.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/prevent-autosaves.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/wp-bar-override.css",
+ "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+ "${PODS_CONFIGURATION_BUILD_DIR}/WordPress-Aztec-iOS/WordPress-Aztec-iOS.bundle",
+ );
+ name = "[CP] Copy Pods Resources";
+ outputPaths = (
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/content-functions.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-behavior-overrides.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-style-overrides.css",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/gutenberg-observer.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/inject-css.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/insert-block.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/local-storage-overrides.json",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/prevent-autosaves.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/wp-bar-override.css",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WordPress-Aztec-iOS.bundle",
+ );
+ runOnlyForDeploymentPostprocessing = 0;
+ shellPath = /bin/sh;
+ shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests-resources.sh\"\n";
+ showEnvVarsInLog = 0;
+ };
70B839CE7B6A174DC4DE8FB6 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
@@ -463,101 +413,11 @@
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests-frameworks.sh",
- "${BUILT_PRODUCTS_DIR}/BVLinearGradient/BVLinearGradient.framework",
- "${BUILT_PRODUCTS_DIR}/DoubleConversion/DoubleConversion.framework",
- "${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework",
- "${BUILT_PRODUCTS_DIR}/RCT-Folly/folly.framework",
- "${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework",
- "${BUILT_PRODUCTS_DIR}/RNCClipboard/RNCClipboard.framework",
- "${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework",
- "${BUILT_PRODUCTS_DIR}/RNFastImage/RNFastImage.framework",
- "${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
- "${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
- "${BUILT_PRODUCTS_DIR}/RNSVG/RNSVG.framework",
- "${BUILT_PRODUCTS_DIR}/RNScreens/RNScreens.framework",
- "${BUILT_PRODUCTS_DIR}/RNTAztecView/RNTAztecView.framework",
- "${BUILT_PRODUCTS_DIR}/React-Codegen/React_Codegen.framework",
- "${BUILT_PRODUCTS_DIR}/React-Core/React.framework",
- "${BUILT_PRODUCTS_DIR}/React-CoreModules/CoreModules.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTAnimation/RCTAnimation.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTAppDelegate/React_RCTAppDelegate.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTBlob/RCTBlob.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTImage/RCTImage.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTLinking/RCTLinking.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTNetwork/RCTNetwork.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTSettings/RCTSettings.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTText/RCTText.framework",
- "${BUILT_PRODUCTS_DIR}/React-RCTVibration/RCTVibration.framework",
- "${BUILT_PRODUCTS_DIR}/React-cxxreact/cxxreact.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsc/React_jsc.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsi/jsi.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsiexecutor/jsireact.framework",
- "${BUILT_PRODUCTS_DIR}/React-jsinspector/jsinspector.framework",
- "${BUILT_PRODUCTS_DIR}/React-logger/logger.framework",
- "${BUILT_PRODUCTS_DIR}/React-perflogger/reactperflogger.framework",
- "${BUILT_PRODUCTS_DIR}/ReactCommon/ReactCommon.framework",
- "${BUILT_PRODUCTS_DIR}/SDWebImage/SDWebImage.framework",
- "${BUILT_PRODUCTS_DIR}/SDWebImageWebPCoder/SDWebImageWebPCoder.framework",
- "${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS/Aztec.framework",
- "${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework",
- "${BUILT_PRODUCTS_DIR}/fmt/fmt.framework",
- "${BUILT_PRODUCTS_DIR}/glog/glog.framework",
- "${BUILT_PRODUCTS_DIR}/libwebp/libwebp.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-blur/react_native_blur.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-get-random-values/react_native_get_random_values.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-safe-area/react_native_safe_area.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-safe-area-context/react_native_safe_area_context.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-slider/react_native_slider.framework",
- "${BUILT_PRODUCTS_DIR}/react-native-webview/react_native_webview.framework",
+ "${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/BVLinearGradient.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DoubleConversion.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCClipboard.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNFastImage.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNSVG.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNScreens.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNTAztecView.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React_Codegen.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CoreModules.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTAnimation.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React_RCTAppDelegate.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTBlob.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTImage.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTLinking.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTNetwork.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTSettings.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTText.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTVibration.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/cxxreact.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React_jsc.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsi.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsireact.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsinspector.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/logger.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/reactperflogger.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactCommon.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImage.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImageWebPCoder.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/fmt.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/libwebp.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_blur.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_get_random_values.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area_context.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_slider.framework",
- "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_webview.framework",
+ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
@@ -586,6 +446,44 @@
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
+ BD87D2B56A91E91E3DFD2CBA /* [CP] Copy Pods Resources */ = {
+ isa = PBXShellScriptBuildPhase;
+ buildActionMask = 2147483647;
+ files = (
+ );
+ inputPaths = (
+ "${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-resources.sh",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/content-functions.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/gutenberg-observer.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/inject-css.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/insert-block.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/prevent-autosaves.js",
+ "${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/wp-bar-override.css",
+ "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+ "${PODS_CONFIGURATION_BUILD_DIR}/WordPress-Aztec-iOS/WordPress-Aztec-iOS.bundle",
+ );
+ name = "[CP] Copy Pods Resources";
+ outputPaths = (
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/content-functions.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-behavior-overrides.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-style-overrides.css",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/gutenberg-observer.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/inject-css.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/insert-block.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/local-storage-overrides.json",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/prevent-autosaves.js",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/wp-bar-override.css",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WordPress-Aztec-iOS.bundle",
+ );
+ runOnlyForDeploymentPostprocessing = 0;
+ shellPath = /bin/sh;
+ shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-resources.sh\"\n";
+ showEnvVarsInLog = 0;
+ };
/* End PBXShellScriptBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
@@ -789,7 +687,7 @@
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
- "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+ "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
@@ -833,7 +731,7 @@
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
- "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+ "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index 5983fed0065d95..b269d1feb8ddfe 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -368,6 +368,17 @@ extension GutenbergViewController: GutenbergWebDelegate {
}
extension GutenbergViewController: GutenbergBridgeDataSource {
+ class EditorSettings: GutenbergEditorSettings {
+ var isFSETheme: Bool = true
+ var galleryWithImageBlocks: Bool = true
+ var quoteBlockV2: Bool = true
+ var listBlockV2: Bool = true
+ var rawStyles: String? = nil
+ var rawFeatures: String? = nil
+ var colors: [[String: String]]? = nil
+ var gradients: [[String: String]]? = nil
+ }
+
func gutenbergLocale() -> String? {
return Locale.preferredLanguages.first ?? "en"
}
@@ -419,7 +430,14 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
}
func gutenbergEditorSettings() -> GutenbergEditorSettings? {
- return nil
+ guard isUITesting(), let initialProps = getInitialPropsFromArgs() else {
+ return nil
+ }
+ let settings = EditorSettings()
+ settings.rawStyles = initialProps["rawStyles"]
+ settings.rawFeatures = initialProps["rawFeatures"]
+
+ return settings
}
func gutenbergMediaSources() -> [Gutenberg.MediaSource] {
diff --git a/packages/react-native-editor/ios/Podfile b/packages/react-native-editor/ios/Podfile
index a6100a78272652..cc7cda4894b0bf 100644
--- a/packages/react-native-editor/ios/Podfile
+++ b/packages/react-native-editor/ios/Podfile
@@ -28,7 +28,7 @@ end
target 'GutenbergDemo' do
# Comment the next line if you don't want to use dynamic frameworks
- use_frameworks!
+ use_frameworks! linkage: :static
config = use_native_modules!
@@ -37,7 +37,7 @@ target 'GutenbergDemo' do
# Hermes is now enabled by default. Disable by setting this flag to false.
# Upcoming versions of React Native may rely on get_default_flags(), but
# we make it explicit here to aid in the React Native upgrade process.
- :hermes_enabled => false,
+ :hermes_enabled => true,
:fabric_enabled => false,
# Enables Flipper.
#
@@ -93,16 +93,16 @@ target 'GutenbergDemo' do
end
end
end
- ### End workaround for https://github.com/facebook/react-native/issues/31034
+ ### End workaround for https://github.com/facebook/react-native/issues/31034
- ### Begin workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
- installer.pods_project.targets.each do |target|
- if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
- target.build_configurations.each do |config|
- config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
- end
- end
- end
- ### End workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
+ ### Begin workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
+ installer.pods_project.targets.each do |target|
+ if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
+ target.build_configurations.each do |config|
+ config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+ end
+ end
+ end
+ ### End workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
end
-end
+end
\ No newline at end of file
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 73a7e20c622f9f..26a891a2402519 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,11 +13,15 @@ PODS:
- ReactCommon/turbomodule/core (= 0.71.11)
- fmt (6.2.1)
- glog (0.3.5)
- - Gutenberg (1.104.0):
+ - Gutenberg (1.105.0):
- React-Core (= 0.71.11)
- React-CoreModules (= 0.71.11)
- React-RCTImage (= 0.71.11)
- RNTAztecView
+ - hermes-engine (0.71.11):
+ - hermes-engine/Pre-built (= 0.71.11)
+ - hermes-engine/Pre-built (0.71.11)
+ - libevent (2.1.12)
- libwebp (1.2.3):
- libwebp/demux (= 1.2.3)
- libwebp/mux (= 1.2.3)
@@ -38,6 +42,12 @@ PODS:
- DoubleConversion
- fmt (~> 6.2.1)
- glog
+ - RCT-Folly/Futures (2021.07.22.00):
+ - boost
+ - DoubleConversion
+ - fmt (~> 6.2.1)
+ - glog
+ - libevent
- RCTRequired (0.71.11)
- RCTTypeSafety (0.71.11):
- FBLazyVector (= 0.71.11)
@@ -59,51 +69,55 @@ PODS:
- React-callinvoker (0.71.11)
- React-Codegen (0.71.11):
- FBReactNativeSpec
+ - hermes-engine
- RCT-Folly
- RCTRequired
- RCTTypeSafety
- React-Core
- - React-jsc
- React-jsi
- React-jsiexecutor
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- React-Core (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default (= 0.71.11)
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/CoreModulesHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/Default (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/DevSupport (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default (= 0.71.11)
- React-Core/RCTWebSocket (= 0.71.11)
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-jsinspector (= 0.71.11)
@@ -111,100 +125,110 @@ PODS:
- Yoga
- React-Core/RCTActionSheetHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTAnimationHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTBlobHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTImageHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTLinkingHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTNetworkHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTSettingsHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTTextHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTVibrationHeaders (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
- Yoga
- React-Core/RCTWebSocket (0.71.11):
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Core/Default (= 0.71.11)
- React-cxxreact (= 0.71.11)
- - React-jsc
+ - React-hermes
- React-jsi (= 0.71.11)
- React-jsiexecutor (= 0.71.11)
- React-perflogger (= 0.71.11)
@@ -222,6 +246,7 @@ PODS:
- boost (= 1.76.0)
- DoubleConversion
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-callinvoker (= 0.71.11)
- React-jsi (= 0.71.11)
@@ -229,19 +254,27 @@ PODS:
- React-logger (= 0.71.11)
- React-perflogger (= 0.71.11)
- React-runtimeexecutor (= 0.71.11)
- - React-jsc (0.71.11):
- - React-jsc/Fabric (= 0.71.11)
- - React-jsi (= 0.71.11)
- - React-jsc/Fabric (0.71.11):
- - React-jsi (= 0.71.11)
+ - React-hermes (0.71.11):
+ - DoubleConversion
+ - glog
+ - hermes-engine
+ - RCT-Folly (= 2021.07.22.00)
+ - RCT-Folly/Futures (= 2021.07.22.00)
+ - React-cxxreact (= 0.71.11)
+ - React-jsi
+ - React-jsiexecutor (= 0.71.11)
+ - React-jsinspector (= 0.71.11)
+ - React-perflogger (= 0.71.11)
- React-jsi (0.71.11):
- boost (= 1.76.0)
- DoubleConversion
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-jsiexecutor (0.71.11):
- DoubleConversion
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-cxxreact (= 0.71.11)
- React-jsi (= 0.71.11)
@@ -287,6 +320,7 @@ PODS:
- React-Core
- ReactCommon/turbomodule/core
- React-RCTBlob (0.71.11):
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-Codegen (= 0.71.11)
- React-Core/RCTBlobHeaders (= 0.71.11)
@@ -334,6 +368,7 @@ PODS:
- ReactCommon/turbomodule/bridging (0.71.11):
- DoubleConversion
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-callinvoker (= 0.71.11)
- React-Core (= 0.71.11)
@@ -344,6 +379,7 @@ PODS:
- ReactCommon/turbomodule/core (0.71.11):
- DoubleConversion
- glog
+ - hermes-engine
- RCT-Folly (= 2021.07.22.00)
- React-callinvoker (= 0.71.11)
- React-Core (= 0.71.11)
@@ -375,7 +411,6 @@ PODS:
- React-Core/RCTWebSocket
- React-CoreModules
- React-cxxreact
- - React-jsc
- React-jsi
- React-jsiexecutor
- React-jsinspector
@@ -394,7 +429,7 @@ PODS:
- React-RCTImage
- RNSVG (13.9.0):
- React-Core
- - RNTAztecView (1.104.0):
+ - RNTAztecView (1.105.0):
- React-Core
- WordPress-Aztec-iOS (= 1.19.9)
- SDWebImage (5.11.1):
@@ -414,6 +449,8 @@ DEPENDENCIES:
- FBReactNativeSpec (from `../../../node_modules/react-native/React/FBReactNativeSpec`)
- glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
- Gutenberg (from `../../react-native-bridge`)
+ - hermes-engine (from `../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+ - libevent (~> 2.1.12)
- RCT-Folly (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
- RCTRequired (from `../../../node_modules/react-native/Libraries/RCTRequired`)
- RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
@@ -424,7 +461,7 @@ DEPENDENCIES:
- React-Core/RCTWebSocket (from `../../../node_modules/react-native/`)
- React-CoreModules (from `../../../node_modules/react-native/React/CoreModules`)
- React-cxxreact (from `../../../node_modules/react-native/ReactCommon/cxxreact`)
- - React-jsc (from `../../../node_modules/react-native/ReactCommon/jsc`)
+ - React-hermes (from `../../../node_modules/react-native/ReactCommon/hermes`)
- React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
- React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../../../node_modules/react-native/ReactCommon/jsinspector`)
@@ -462,6 +499,7 @@ DEPENDENCIES:
SPEC REPOS:
trunk:
- fmt
+ - libevent
- libwebp
- SDWebImage
- SDWebImageWebPCoder
@@ -482,6 +520,8 @@ EXTERNAL SOURCES:
:podspec: "../../../node_modules/react-native/third-party-podspecs/glog.podspec"
Gutenberg:
:path: "../../react-native-bridge"
+ hermes-engine:
+ :podspec: "../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
RCT-Folly:
:podspec: "../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
RCTRequired:
@@ -500,8 +540,8 @@ EXTERNAL SOURCES:
:path: "../../../node_modules/react-native/React/CoreModules"
React-cxxreact:
:path: "../../../node_modules/react-native/ReactCommon/cxxreact"
- React-jsc:
- :path: "../../../node_modules/react-native/ReactCommon/jsc"
+ React-hermes:
+ :path: "../../../node_modules/react-native/ReactCommon/hermes"
React-jsi:
:path: "../../../node_modules/react-native/ReactCommon/jsi"
React-jsiexecutor:
@@ -577,20 +617,22 @@ SPEC CHECKSUMS:
FBReactNativeSpec: f07662560742d82a5b73cee116c70b0b49bcc220
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
- Gutenberg: a79dedde03484f2766429558a85f6ff6c90e2513
+ Gutenberg: eb59e13cd7ef341f9ef92857009d960b0831f21a
+ hermes-engine: 34c863b446d0135b85a6536fa5fd89f48196f848
+ libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
RCTRequired: f6187ec763637e6a57f5728dd9a3bdabc6d6b4e0
RCTTypeSafety: a01aca2dd3b27fa422d5239252ad38e54e958750
React: 741b4f5187e7a2137b69c88e65f940ba40600b4b
React-callinvoker: 72ba74b2d5d690c497631191ae6eeca0c043d9cf
- React-Codegen: 6a3870e906e80066a9b707389846c692a02415d9
- React-Core: 9cf97a2d0830a024deffebe873407f6717bbcc19
+ React-Codegen: 8a7cda1633e4940de8a710f6bf5cae5dd673546e
+ React-Core: 72bb19702c465b6451a40501a2879532bec9acee
React-CoreModules: ffd19b082fc36b9b463fedf30955138b5426c053
- React-cxxreact: f88c74ac51e59c294fbf825974d377fcf9641eba
- React-jsc: 75bfda40ea4032b5018875355ab5ee089ac748bf
- React-jsi: 71ae5726d2b0fd6b0aaa0845a9294739cf4c95c6
- React-jsiexecutor: 089cd07c76ecf498960a64ba8ae0f2dddd382f44
+ React-cxxreact: 8b3dd87e3b8ea96dd4ad5c7bac8f31f1cc3da97f
+ React-hermes: be95942c3f47fc032da1387360413f00dae0ea68
+ React-jsi: 9978e2a64c2a4371b40e109f4ef30a33deaa9bcb
+ React-jsiexecutor: 18b5b33c5f2687a784a61bc8176611b73524ae77
React-jsinspector: b6ed4cb3ffa27a041cd440300503dc512b761450
React-logger: 186dd536128ae5924bc38ed70932c00aa740cd5b
react-native-blur: 3e9c8e8e9f7d17fa1b94e1a0ae9fd816675f5382
@@ -603,8 +645,8 @@ SPEC CHECKSUMS:
React-perflogger: e706562ab7eb8eb590aa83a224d26fa13963d7f2
React-RCTActionSheet: 57d4bd98122f557479a3359ad5dad8e109e20c5a
React-RCTAnimation: ccf3ef00101ea74bda73a045d79a658b36728a60
- React-RCTAppDelegate: de78bc79e1a469ffa275fbe3948356cea061c4bb
- React-RCTBlob: 519c8ecb8ef83ce461a5670bdaf2fef882af3393
+ React-RCTAppDelegate: d0c28a35c65e9a0aef287ac0dafe1b71b1ac180c
+ React-RCTBlob: 1700b92ece4357af0a49719c9638185ad2902e95
React-RCTImage: f2e4904566ccccaa4b704170fcc5ae144ca347bf
React-RCTLinking: 52a3740e3651e30aa11dff5a6debed7395dd8169
React-RCTNetwork: ea0976f2b3ffc7877cd7784e351dc460adf87b12
@@ -612,20 +654,20 @@ SPEC CHECKSUMS:
React-RCTText: c9dfc6722621d56332b4f3a19ac38105e7504145
React-RCTVibration: f09f08de63e4122deb32506e20ca4cae6e4e14c1
React-runtimeexecutor: 4817d63dbc9d658f8dc0ec56bd9b83ce531129f0
- ReactCommon: e2d70ebcd90a2eaab343fb0cc23bbdb5ac321f5c
+ ReactCommon: 864169d79e7fb2e846ad1257a2afd7ed846d6375
RNCClipboard: 3f0451a8100393908bea5c5c5b16f96d45f30bfc
RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
RNGestureHandler: f75d81410b40aaa99e71ae8f8bb7a88620c95042
- RNReanimated: df2567658c01135f9ff4709d372675bcb9fd1d83
+ RNReanimated: d4f363f4987ae0ade3e36ff81c94e68261bf4b8d
RNScreens: 68fd1060f57dd1023880bf4c05d74784b5392789
RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
- RNTAztecView: dfbe69cb1448f08b29846616fbb79d79f21968b3
+ RNTAztecView: 4b0ffdbaa58dcbf73b63403a888a2334fc4465dd
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
WordPress-Aztec-iOS: fbebd569c61baa252b3f5058c0a2a9a6ada686bb
Yoga: f7decafdc5e8c125e6fa0da38a687e35238420fa
-PODFILE CHECKSUM: 13786fe1bd037b8f06258137c3f1269a82608b59
+PODFILE CHECKSUM: 0965b30267e411f56545967f14da09df5daa07f4
COCOAPODS: 1.11.3
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 2d5235e41df9fa..0c6ff58c7184d5 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-editor",
- "version": "1.104.0",
+ "version": "1.105.0",
"description": "Mobile WordPress gutenberg editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -69,7 +69,7 @@
"react-native-sass-transformer": "^1.1.1",
"react-native-screens": "3.22.0",
"react-native-svg": "13.9.0",
- "react-native-url-polyfill": "^1.1.2",
+ "react-native-url-polyfill": "1.3.0",
"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-6/react-native-video-5.2.0-wp-6.tgz",
"react-native-webview": "11.26.1"
},
@@ -87,7 +87,9 @@
"prebundle": "npm run i18n-cache:force",
"bundle": "npm run bundle:android && npm run bundle:ios",
"bundle:android": "mkdir -p bundle/android && npm run rn-bundle -- --platform android --dev false --entry-file index.js --assets-dest bundle/android --bundle-output bundle/android/App.text.js --sourcemap-output bundle/android/App.text.js.map && ./../../node_modules/react-native/sdks/hermesc/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/android/App.js bundle/android/App.text.js -output-source-map",
- "bundle:ios": "mkdir -p bundle/ios && npm run rn-bundle -- --platform ios --dev false --entry-file index.js --assets-dest bundle/ios --bundle-output bundle/ios/App.js --sourcemap-output bundle/ios/App.js.map",
+ "bundle:ios": "npm run bundle:ios:text && npm run bundle:ios:bytecode",
+ "bundle:ios:text": "mkdir -p bundle/ios && npm run rn-bundle -- --platform ios --dev false --minify false --entry-file ./index.js --assets-dest bundle/ios --bundle-output ./bundle/ios/App.text.js --sourcemap-output ./bundle/ios/App.text.js.map",
+ "bundle:ios:bytecode": "./../../node_modules/react-native/sdks/hermesc/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/ios/App.js bundle/ios/App.text.js -output-source-map",
"i18n-cache": "node i18n-cache/index.js",
"i18n-cache:force": "cross-env REFRESH_I18N_CACHE=1 node i18n-cache/index.js",
"i18n:extract-used-strings": "node bin/extract-used-strings",
@@ -110,7 +112,7 @@
"test:e2e:bundle:android": "mkdir -p android/app/src/main/assets && npm run rn-bundle -- --reset-cache --platform android --dev false --minify false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"test:e2e:build-app:android": "cd android && ./gradlew clean && ./gradlew assembleDebug",
"test:e2e:android:local": "npm run test:e2e:bundle:android && npm run test:e2e:build-app:android && TEST_RN_PLATFORM=android npm run device-tests:local",
- "test:e2e:bundle:ios": "mkdir -p ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app && npm run rn-bundle -- --reset-cache --platform=ios --dev=false --minify false --entry-file=index.js --bundle-output=./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle --assets-dest=./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app",
+ "test:e2e:bundle:ios": "mkdir -p ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app && npm run bundle:ios && cp bundle/ios/App.js ./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle && cp -r bundle/ios/assets ./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/",
"test:e2e:build-app:ios": "npm run preios && ./bin/build_e2e_ios_app",
"test:e2e:build-wda": "xcodebuild -project ../../node_modules/appium/node_modules/appium-webdriveragent/WebDriverAgent.xcodeproj -scheme WebDriverAgentRunner -destination 'platform=iOS Simulator,name=iPhone 13' -derivedDataPath ios/build/WDA",
"test:e2e:ios:local": "npm run test:e2e:bundle:ios && npm run test:e2e:build-app:ios && npm run test:e2e:build-wda && TEST_RN_PLATFORM=ios npm run device-tests:local",
diff --git a/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap b/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap
index c033e572e8e5e4..e5a7d6f6accc84 100644
--- a/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file index.js should match snapshot 1`] = `
-"/******/ (() => { // webpackBootstrap
+"/******/ (function() { // webpackBootstrap
var __webpack_exports__ = {};
function notMinified() {
// eslint-disable-next-line no-console
@@ -16,7 +16,7 @@ notMinified();
exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file index.min.js should match snapshot 1`] = `"console.log("hello");"`;
exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file view.js should match snapshot 1`] = `
-"/******/ (() => { // webpackBootstrap
+"/******/ (function() { // webpackBootstrap
var __webpack_exports__ = {};
function notMinified() {
// eslint-disable-next-line no-console
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index de29a930e89f18..c9ed4b6502bb60 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -35,7 +35,7 @@ import { unlock } from '../../lock-unlock';
* @param {string[]} props.clientIds Client ids of selected blocks.
* @param {string} props.rootClientId ID of the currently selected top-level block.
* @param {()=>void} props.onClose Callback to close the menu.
- * @return {import('@wordpress/element').WPComponent} The menu control or null.
+ * @return {import('react').ComponentType} The menu control or null.
*/
export default function ReusableBlockConvertButton( {
clientIds,
@@ -115,12 +115,12 @@ export default function ReusableBlockConvertButton( {
! syncType
? sprintf(
// translators: %s: the name the user has given to the pattern.
- __( 'Synced Pattern created: %s' ),
+ __( 'Synced pattern created: %s' ),
reusableBlockTitle
)
: sprintf(
// translators: %s: the name the user has given to the pattern.
- __( 'Unsynced Pattern created: %s' ),
+ __( 'Unsynced pattern created: %s' ),
reusableBlockTitle
),
{
diff --git a/packages/reusable-blocks/src/store/actions.js b/packages/reusable-blocks/src/store/actions.js
index 292a3082146aaa..85fe31138652a4 100644
--- a/packages/reusable-blocks/src/store/actions.js
+++ b/packages/reusable-blocks/src/store/actions.js
@@ -57,7 +57,7 @@ export const __experimentalConvertBlocksToReusable =
: undefined;
const reusableBlock = {
- title: title || __( 'Untitled Pattern block' ),
+ title: title || __( 'Untitled pattern block' ),
content: serialize(
registry
.select( blockEditorStore )
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 77042d83c6fdc4..810148720da1b7 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,16 @@
## Unreleased
+### Internal
+
+- The bundled `@pmmmwh/react-refresh-webpack-plugin` dependency has been updated from requiring `^0.5.2` to requiring `^0.5.11` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+- The bundled `browserslist` dependency has been updated from requiring `^4.21.9` to requiring `^4.21.10` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+- The bundled `react-refresh` dependency has been updated from requiring `^0.10.0` to requiring `^0.14.0` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+- The bundled `webpack` dependency has been updated from requiring `^5.47.1` to requiring `^5.88.2` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+- The bundled `webpack-bundle-analyzer` dependency has been updated from requiring `^4.4.2` to requiring `^4.9.1` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+- The bundled `webpack-cli` dependency has been updated from requiring `^4.9.1` to requiring `^5.1.4` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+- The bundled `webpack-dev-server` dependency has been updated from requiring `^4.4.0` to requiring `^4.15.1` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+
## 26.13.0 (2023-09-20)
### Enhancements
diff --git a/packages/scripts/config/playwright.config.ts b/packages/scripts/config/playwright.config.js
similarity index 94%
rename from packages/scripts/config/playwright.config.ts
rename to packages/scripts/config/playwright.config.js
index 16ee210bdfb86e..6f380017ccdc4f 100644
--- a/packages/scripts/config/playwright.config.ts
+++ b/packages/scripts/config/playwright.config.js
@@ -25,7 +25,7 @@ const config = defineConfig( {
snapshotPathTemplate:
'{testDir}/{testFileDir}/__snapshots__/{arg}-{projectName}{ext}',
globalSetup: fileURLToPath(
- new URL( './playwright/global-setup.ts', 'file:' + __filename ).href
+ new URL( './playwright/global-setup.js', 'file:' + __filename ).href
),
use: {
baseURL: process.env.WP_BASE_URL || 'http://localhost:8889',
@@ -60,4 +60,4 @@ const config = defineConfig( {
],
} );
-export default config;
+module.exports = config;
diff --git a/packages/scripts/config/playwright/global-setup.ts b/packages/scripts/config/playwright/global-setup.js
similarity index 78%
rename from packages/scripts/config/playwright/global-setup.ts
rename to packages/scripts/config/playwright/global-setup.js
index 10f2822fdfe1ae..9a4cbde9b7d241 100644
--- a/packages/scripts/config/playwright/global-setup.ts
+++ b/packages/scripts/config/playwright/global-setup.js
@@ -2,14 +2,18 @@
* External dependencies
*/
import { request } from '@playwright/test';
-import type { FullConfig } from '@playwright/test';
/**
* WordPress dependencies
*/
import { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
-async function globalSetup( config: FullConfig ) {
+/**
+ *
+ * @param {import('@playwright/test').FullConfig} config
+ * @return {Promise<void>}
+ */
+async function globalSetup( config ) {
const { storageState, baseURL } = config.projects[ 0 ].use;
const storageStatePath =
typeof storageState === 'string' ? storageState : undefined;
@@ -28,4 +32,4 @@ async function globalSetup( config: FullConfig ) {
await requestContext.dispose();
}
-export default globalSetup;
+module.exports = globalSetup;
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index e80b68e0a56756..05b57a22f81869 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -33,7 +33,7 @@
},
"dependencies": {
"@babel/core": "^7.16.0",
- "@pmmmwh/react-refresh-webpack-plugin": "^0.5.2",
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
"@svgr/webpack": "^8.0.1",
"@wordpress/babel-preset-default": "file:../babel-preset-default",
"@wordpress/browserslist-config": "file:../browserslist-config",
@@ -48,7 +48,7 @@
"adm-zip": "^0.5.9",
"babel-jest": "^29.6.2",
"babel-loader": "^8.2.3",
- "browserslist": "^4.21.9",
+ "browserslist": "^4.21.10",
"chalk": "^4.0.0",
"check-node-version": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
@@ -75,9 +75,9 @@
"playwright-core": "1.32.0",
"postcss": "^8.4.5",
"postcss-loader": "^6.2.1",
- "prettier": "npm:wp-prettier@3.0.3-beta-3",
+ "prettier": "npm:wp-prettier@3.0.3",
"puppeteer-core": "^13.2.0",
- "react-refresh": "^0.10.0",
+ "react-refresh": "^0.14.0",
"read-pkg-up": "^7.0.1",
"resolve-bin": "^0.4.0",
"sass": "^1.35.2",
@@ -86,10 +86,10 @@
"stylelint": "^14.2.0",
"terser-webpack-plugin": "^5.3.9",
"url-loader": "^4.1.1",
- "webpack": "^5.47.1",
- "webpack-bundle-analyzer": "^4.4.2",
- "webpack-cli": "^4.9.1",
- "webpack-dev-server": "^4.4.0"
+ "webpack": "^5.88.2",
+ "webpack-bundle-analyzer": "^4.9.1",
+ "webpack-cli": "^5.1.4",
+ "webpack-dev-server": "^4.15.1"
},
"peerDependencies": {
"@playwright/test": "^1.32.0",
diff --git a/packages/sync/CODE.md b/packages/sync/CODE.md
new file mode 100644
index 00000000000000..40a4b76d2cfd42
--- /dev/null
+++ b/packages/sync/CODE.md
@@ -0,0 +1,54 @@
+# Status of the sync experiment in Gutenberg
+
+The sync package is part of an ongoing research effort to lay the groundwork of Real-Time Collaboration in Gutenberg.
+
+Relevant docs:
+
+- https://make.wordpress.org/core/2023/07/13/real-time-collaboration-architecture/
+- https://github.com/WordPress/gutenberg/issues/52593
+- https://docs.yjs.dev/
+
+## Enable the experiment
+
+The experiment can be enabled in the "Guteberg > Experiments" page. When it is enabled (search for `gutenberg-sync-collaboration` in the codebase), the client receives two new pieces of data:
+
+- `window.__experimentalEnableSync`: boolean. Used by the `core-data` package to determine whether to bootstrap and use the sync provider offered by the `sync` package.
+- `window.__experimentalCollaborativeEditingSecret`: string. A secret used by the `sync` package to create a secure connection among peers.
+
+## The data flow
+
+The current experiment updates `core-data` to leverage the YJS library for synchronization and merging changes. Each core-data entity record represents a YJS document and updates to the `--edit` record are broadcasted among peers.
+
+These are the specific checkpoints:
+
+1. REGISTER.
+ - See `getSyncProvider().register( ... )` in `registerSyncConfigs`.
+ - Not all entity types are sync-enabled at the moment, look at those that declare a `syncConfig` and `syncObjectType` in `rootEntitiesConfig`.
+2. BOOTSTRAP.
+ - See `getSyncProvider().bootstrap( ... )` in `getEntityRecord`.
+ - The `bootstrap` function fetches the entity and sets up the callback that will dispatch the relevant Redux action when document changes are broadcasted from other peers.
+3. UPDATE.
+ - See `getSyncProvider().update( ... )` in `editEntityRecord`.
+ - Each change done by a peer to the `--edit` entity record (local changes, not persisted ones) is broadcasted to the others.
+ - The data that is shared is the whole block list.
+
+This is the data flow when the peer A makes a local change:
+
+- Peer A makes a local change.
+- Peer A triggers a `getSyncProvider().update( ... )` request (see `editEntityRecord`).
+- All peers (including A) receive the broadcasted change and execute the callback (see `updateHandler` in `createSyncProvider.bootstrap`).
+- All peers (including A) trigger a `EDIT_ENTITY_RECORD` redux action.
+
+## What works and what doesn't
+
+- Undo/redo does not work.
+- Changes can be persisted and the publish/update button should react accordingly for all peers.
+- Offline.
+ - Changes are stored in the browser's local storage (indexedDB) for each user/peer. Users can navigate away from the document and they'll see the changes when they come back.
+ - Offline changes can be deleted via visiting the browser's database in all peers, then reload the document.
+- Documents can get out of sync. For example:
+ - Two peers open the same document.
+ - One of them (A) leaves the document. Then, the remaining user (B) makes changes.
+ - When A comes back to the document, the changes B made are not visible to A.
+- Entities
+ - Not all entities are synced. For example, global styles are not. Look at the `base` entity config for an example (it declares `syncConfig` and `syncObjectType` properties).
diff --git a/patches/react-native-reanimated+2.17.0.patch b/patches/react-native-reanimated+2.17.0.patch
deleted file mode 100644
index 8d4d634ea13747..00000000000000
--- a/patches/react-native-reanimated+2.17.0.patch
+++ /dev/null
@@ -1,14 +0,0 @@
-This patch will be removed when the Gutenberg demo app uses Hermes.
-
-diff --git a/node_modules/react-native-reanimated/RNReanimated.podspec b/node_modules/react-native-reanimated/RNReanimated.podspec
-index 1cbeafc..34f49db 100644
---- a/node_modules/react-native-reanimated/RNReanimated.podspec
-+++ b/node_modules/react-native-reanimated/RNReanimated.podspec
-@@ -80,6 +80,7 @@ Pod::Spec.new do |s|
- s.dependency 'Yoga'
- s.dependency 'DoubleConversion'
- s.dependency 'glog'
-+ s.dependency 'React-jsc'
-
- if config[:react_native_minor_version] == 62
- s.dependency 'ReactCommon/callinvoker'
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index d383de10726d21..56cd6734e4f3ee 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -59,6 +59,9 @@
<exclude-pattern>./vendor/*</exclude-pattern>
<exclude-pattern>./test/php/gutenberg-coding-standards/*</exclude-pattern>
+ <!-- Exclude files maintained in WordPress Core and backported to Gutenberg -->
+ <exclude-pattern>./lib/compat/wordpress-*/html-api/*.php</exclude-pattern>
+
<!-- These special comments are markers for the build process -->
<rule ref="Squiz.Commenting.InlineComment.WrongStyle">
<exclude-pattern>gutenberg.php</exclude-pattern>
@@ -92,8 +95,6 @@
<exclude-pattern>phpunit/*</exclude-pattern>
</rule>
<rule ref="Squiz.Commenting.FunctionCommentThrowTag.Missing">
- <!-- Ignore until squizlabs/PHP_CodeSniffer#3685 is fixed: it thinks that a caught exception escapes the function. -->
- <exclude-pattern>lib/compat/wordpress-6.4/html-api/class-wp-html-processor.php</exclude-pattern>
<exclude-pattern>phpunit/*</exclude-pattern>
</rule>
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
new file mode 100644
index 00000000000000..bdcfc02f551a7f
--- /dev/null
+++ b/phpunit/block-supports/background-test.php
@@ -0,0 +1,187 @@
+<?php
+
+/**
+ * Test the background block support.
+ *
+ * @package Gutenberg
+ */
+class WP_Block_Supports_Background_Test extends WP_UnitTestCase {
+ /**
+ * @var string|null
+ */
+ private $test_block_name;
+
+ /**
+ * Theme root directory.
+ *
+ * @var string
+ */
+ private $theme_root;
+
+ /**
+ * Original theme directory.
+ *
+ * @var string
+ */
+ private $orig_theme_dir;
+
+ public function set_up() {
+ parent::set_up();
+ $this->test_block_name = null;
+ $this->theme_root = realpath( __DIR__ . '/../data/themedir1' );
+ $this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
+
+ // /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+ $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+ add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+ add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+ add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+ // Clear caches.
+ wp_clean_themes_cache();
+ unset( $GLOBALS['wp_themes'] );
+ WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+ }
+
+ public function tear_down() {
+ $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+
+ // Clear up the filters to modify the theme root.
+ remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+ remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+ remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+ wp_clean_themes_cache();
+ unset( $GLOBALS['wp_themes'] );
+ WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+ unregister_block_type( $this->test_block_name );
+ $this->test_block_name = null;
+ parent::tear_down();
+ }
+
+ public function filter_set_theme_root() {
+ return $this->theme_root;
+ }
+
+ /**
+ * Tests that background image block support works as expected.
+ *
+ * @covers ::gutenberg_render_background_support
+ *
+ * @dataProvider data_background_block_support
+ *
+ * @param string $theme_name The theme to switch to.
+ * @param string $block_name The test block name to register.
+ * @param mixed $background_settings The background block support settings.
+ * @param mixed $background_style The background styles within the block attributes.
+ * @param string $expected_wrapper Expected markup for the block wrapper.
+ * @param string $wrapper Existing markup for the block wrapper.
+ */
+ public function test_background_block_support( $theme_name, $block_name, $background_settings, $background_style, $expected_wrapper, $wrapper ) {
+ switch_theme( $theme_name );
+ $this->test_block_name = $block_name;
+
+ register_block_type(
+ $this->test_block_name,
+ array(
+ 'api_version' => 2,
+ 'attributes' => array(
+ 'style' => array(
+ 'type' => 'object',
+ ),
+ ),
+ 'supports' => array(
+ 'background' => $background_settings,
+ ),
+ )
+ );
+
+ $block = array(
+ 'blockName' => $block_name,
+ 'attrs' => array(
+ 'style' => array(
+ 'background' => $background_style,
+ ),
+ ),
+ );
+
+ $actual = gutenberg_render_background_support( $wrapper, $block );
+
+ $this->assertEquals(
+ $expected_wrapper,
+ $actual,
+ 'Background block wrapper markup should be correct'
+ );
+ }
+
+ /**
+ * Data provider.
+ *
+ * @return array
+ */
+ public function data_background_block_support() {
+ return array(
+ 'background image style is applied' => array(
+ 'theme_name' => 'block-theme-child-with-fluid-typography',
+ 'block_name' => 'test/background-rules-are-output',
+ 'background_settings' => array(
+ 'backgroundImage' => true,
+ ),
+ 'background_style' => array(
+ 'backgroundImage' => array(
+ 'url' => 'https://example.com/image.jpg',
+ 'source' => 'file',
+ ),
+ ),
+ 'expected_wrapper' => '<div style="background-image:url('https://example.com/image.jpg');background-size:cover;">Content</div>',
+ 'wrapper' => '<div>Content</div>',
+ ),
+ 'background image style is appended if a style attribute already exists' => array(
+ 'theme_name' => 'block-theme-child-with-fluid-typography',
+ 'block_name' => 'test/background-rules-are-output',
+ 'background_settings' => array(
+ 'backgroundImage' => true,
+ ),
+ 'background_style' => array(
+ 'backgroundImage' => array(
+ 'url' => 'https://example.com/image.jpg',
+ 'source' => 'file',
+ ),
+ ),
+ 'expected_wrapper' => '<div classname="wp-block-test" style="color: red;background-image:url('https://example.com/image.jpg');background-size:cover;">Content</div>',
+ 'wrapper' => '<div classname="wp-block-test" style="color: red">Content</div>',
+ ),
+ 'background image style is appended if a style attribute containing multiple styles already exists' => array(
+ 'theme_name' => 'block-theme-child-with-fluid-typography',
+ 'block_name' => 'test/background-rules-are-output',
+ 'background_settings' => array(
+ 'backgroundImage' => true,
+ ),
+ 'background_style' => array(
+ 'backgroundImage' => array(
+ 'url' => 'https://example.com/image.jpg',
+ 'source' => 'file',
+ ),
+ ),
+ 'expected_wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url('https://example.com/image.jpg');background-size:cover;">Content</div>',
+ 'wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
+ ),
+ 'background image style is not applied if the block does not support background image' => array(
+ 'theme_name' => 'block-theme-child-with-fluid-typography',
+ 'block_name' => 'test/background-rules-are-not-output',
+ 'background_settings' => array(
+ 'backgroundImage' => false,
+ ),
+ 'background_style' => array(
+ 'backgroundImage' => array(
+ 'url' => 'https://example.com/image.jpg',
+ 'source' => 'file',
+ ),
+ ),
+ 'expected_wrapper' => '<div>Content</div>',
+ 'wrapper' => '<div>Content</div>',
+ ),
+ );
+ }
+}
diff --git a/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php b/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php
index 77f95b2385a4ae..1b8e672fa78199 100644
--- a/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php
+++ b/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php
@@ -130,7 +130,7 @@ public static function wpSetupBeforeClass( $factory ) {
),
);
- wp_update_post( $new_styles_post, true, false );
+ wp_update_post( $new_styles_post, true, true );
$new_styles_post = array(
'ID' => self::$global_styles_id,
@@ -160,7 +160,7 @@ public static function wpSetupBeforeClass( $factory ) {
),
);
- wp_update_post( $new_styles_post, true, false );
+ wp_update_post( $new_styles_post, true, true );
$new_styles_post = array(
'ID' => self::$global_styles_id,
@@ -190,7 +190,7 @@ public static function wpSetupBeforeClass( $factory ) {
),
);
- wp_update_post( $new_styles_post, true, false );
+ wp_update_post( $new_styles_post, true, true );
wp_set_current_user( 0 );
}
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 39f308a5791f60..0e212983d9080f 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -2007,29 +2007,37 @@ public function test_process_blocks_custom_css( $input, $expected ) {
*/
public function data_process_blocks_custom_css() {
return array(
- // Simple CSS without any child selectors.
- 'no child selectors' => array(
+ // Simple CSS without any nested selectors.
+ 'no nested selectors' => array(
'input' => array(
'selector' => '.foo',
'css' => 'color: red; margin: auto;',
),
'expected' => '.foo{color: red; margin: auto;}',
),
- // CSS with child selectors.
- 'with children' => array(
+ // CSS with nested selectors.
+ 'with nested selector' => array(
'input' => array(
'selector' => '.foo',
- 'css' => 'color: red; margin: auto; & .bar{color: blue;}',
+ 'css' => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
),
- 'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}',
+ 'expected' => '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}',
),
- // CSS with child selectors and pseudo elements.
- 'with children and pseudo elements' => array(
+ // CSS with pseudo elements.
+ 'with pseudo elements' => array(
'input' => array(
'selector' => '.foo',
- 'css' => 'color: red; margin: auto; & .bar{color: blue;} &::before{color: green;}',
+ 'css' => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;} &.one::before{color: yellow;} & .two::before{color: purple;}',
),
- 'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}.foo::before{color: green;}',
+ 'expected' => '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}',
+ ),
+ // CSS with multiple root selectors.
+ 'with multiple root selectors' => array(
+ 'input' => array(
+ 'selector' => '.foo, .bar',
+ 'css' => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;} &.three::before{color: orange;} & .four::before{color: skyblue;}',
+ ),
+ 'expected' => '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}',
),
);
}
diff --git a/phpunit/experimental/block-editor-settings-mobile-test.php b/phpunit/experimental/block-editor-settings-mobile-test.php
index 224fb4bfcb188b..907b750d8c8638 100644
--- a/phpunit/experimental/block-editor-settings-mobile-test.php
+++ b/phpunit/experimental/block-editor-settings-mobile-test.php
@@ -24,6 +24,7 @@ class Gutenberg_REST_Block_Editor_Settings_Controller_Test extends WP_Test_REST_
public function set_up() {
parent::set_up();
switch_theme( 'block-theme' );
+ remove_action( 'wp_print_styles', 'print_emoji_styles' );
}
/**
diff --git a/phpunit/tests/blocks/renderHookedBlocks.php b/phpunit/tests/blocks/renderHookedBlocks.php
index de256a0ec2be19..5e9abd4d8ba050 100644
--- a/phpunit/tests/blocks/renderHookedBlocks.php
+++ b/phpunit/tests/blocks/renderHookedBlocks.php
@@ -1,7 +1,5 @@
<?php
-use PHP_CodeSniffer\Generators\HTML;
-
/**
* Tests for hooked blocks rendering.
*
@@ -12,6 +10,16 @@
* @group blocks
*/
class Tests_Blocks_RenderHookedBlocks extends WP_UnitTestCase {
+ public function set_up() {
+ parent::set_up();
+ add_filter( 'block_type_metadata_settings', 'gutenberg_add_hooked_blocks', 10, 2 );
+ }
+
+ public function tear_down() {
+ remove_filter( 'block_type_metadata_settings', 'gutenberg_add_hooked_blocks' );
+ parent::tear_down();
+ }
+
/**
* @ticket 59313
*/
diff --git a/phpunit/tests/data/fonts/gilbert-color.otf b/phpunit/tests/data/fonts/gilbert-color.otf
new file mode 100644
index 00000000000000..f21f9a173f2fe0
Binary files /dev/null and b/phpunit/tests/data/fonts/gilbert-color.otf differ
diff --git a/phpunit/tests/fonts/font-library/wpFontCollection/__construct.php b/phpunit/tests/fonts/font-library/wpFontCollection/__construct.php
index 0682425dd6282a..5c2b7b5c02793a 100644
--- a/phpunit/tests/fonts/font-library/wpFontCollection/__construct.php
+++ b/phpunit/tests/fonts/font-library/wpFontCollection/__construct.php
@@ -17,10 +17,10 @@ public function test_should_initialize_data() {
$property->setAccessible( true );
$config = array(
- 'id' => 'my-collection',
- 'name' => 'My Collection',
- 'description' => 'My collection description',
- 'data_json_file' => 'my-collection-data.json',
+ 'id' => 'my-collection',
+ 'name' => 'My Collection',
+ 'description' => 'My collection description',
+ 'src' => 'my-collection-data.json',
);
$font_collection = new WP_Font_Collection( $config );
@@ -51,9 +51,9 @@ public function data_should_throw_exception() {
return array(
'no id' => array(
array(
- 'name' => 'My Collection',
- 'description' => 'My collection description',
- 'data_json_file' => 'my-collection-data.json',
+ 'name' => 'My Collection',
+ 'description' => 'My collection description',
+ 'src' => 'my-collection-data.json',
),
'Font Collection config ID is required as a non-empty string.',
),
@@ -78,13 +78,13 @@ public function data_should_throw_exception() {
'Font Collection config options is required as a non-empty array.',
),
- 'missing data_json_file' => array(
+ 'missing src' => array(
array(
'id' => 'my-collection',
'name' => 'My Collection',
'description' => 'My collection description',
),
- 'Font Collection config "data_json_file" option is required as a non-empty string.',
+ 'Font Collection config "src" option is required as a non-empty string.',
),
);
diff --git a/phpunit/tests/fonts/font-library/wpFontCollection/getData.php b/phpunit/tests/fonts/font-library/wpFontCollection/getData.php
index 55d12ac1c42fd3..4d0b2eb92b595e 100644
--- a/phpunit/tests/fonts/font-library/wpFontCollection/getData.php
+++ b/phpunit/tests/fonts/font-library/wpFontCollection/getData.php
@@ -12,6 +12,40 @@
*/
class Tests_Fonts_WpFontCollection_GetData extends WP_UnitTestCase {
+ public function set_up() {
+ parent::set_up();
+
+ // Mock the wp_remote_request() function.
+ add_filter( 'pre_http_request', array( $this, 'mock_request' ), 10, 3 );
+ }
+
+ public function tear_down() {
+ // Remove the mock to not affect other tests.
+ remove_filter( 'pre_http_request', array( $this, 'mock_request' ) );
+
+ parent::tear_down();
+ }
+
+ public function mock_request( $preempt, $args, $url ) {
+ // if the URL is not the URL you want to mock, return false.
+ if ( 'https://localhost/fonts/mock-font-collection.json' !== $url ) {
+ return false;
+ }
+
+ // Mock the response body.
+ $mock_collection_data = array(
+ 'fontFamilies' => 'mock',
+ 'categories' => 'mock',
+ );
+
+ return array(
+ 'body' => json_encode( $mock_collection_data ),
+ 'response' => array(
+ 'code' => 200,
+ ),
+ );
+ }
+
/**
* @dataProvider data_should_get_data
*
@@ -33,18 +67,35 @@ public function data_should_get_data() {
file_put_contents( $mock_file, '{"this is mock data":true}' );
return array(
- 'with a data_json_file' => array(
+ 'with a file' => array(
'config' => array(
- 'id' => 'my-collection',
- 'name' => 'My Collection',
- 'description' => 'My collection description',
- 'data_json_file' => $mock_file,
+ 'id' => 'my-collection',
+ 'name' => 'My Collection',
+ 'description' => 'My collection description',
+ 'src' => $mock_file,
),
'expected_data' => array(
'id' => 'my-collection',
'name' => 'My Collection',
'description' => 'My collection description',
- 'data' => '{"this is mock data":true}',
+ 'data' => array( 'this is mock data' => true ),
+ ),
+ ),
+ 'with a url' => array(
+ 'config' => array(
+ 'id' => 'my-collection-with-url',
+ 'name' => 'My Collection with URL',
+ 'description' => 'My collection description',
+ 'src' => 'https://localhost/fonts/mock-font-collection.json',
+ ),
+ 'expected_data' => array(
+ 'id' => 'my-collection-with-url',
+ 'name' => 'My Collection with URL',
+ 'description' => 'My collection description',
+ 'data' => array(
+ 'fontFamilies' => 'mock',
+ 'categories' => 'mock',
+ ),
),
),
);
diff --git a/phpunit/tests/fonts/font-library/wpFontFamily/install.php b/phpunit/tests/fonts/font-library/wpFontFamily/install.php
index ddd8c70a979721..79cb6ac3ba2ba4 100644
--- a/phpunit/tests/fonts/font-library/wpFontFamily/install.php
+++ b/phpunit/tests/fonts/font-library/wpFontFamily/install.php
@@ -167,6 +167,8 @@ public function test_should_move_local_fontfaces( $font_data, array $files_data,
copy( __DIR__ . '/../../../data/fonts/cooper-hewitt.woff', $file['tmp_name'] );
} elseif ( 'font/woff2' === $file['type'] ) {
copy( __DIR__ . '/../../../data/fonts/DMSans.woff2', $file['tmp_name'] );
+ } elseif ( 'application/vnd.ms-opentype' === $file['type'] ) {
+ copy( __DIR__ . '/../../../data/fonts/gilbert-color.otf', $file['tmp_name'] );
}
}
@@ -302,6 +304,32 @@ public function data_should_move_local_fontfaces() {
),
'expected' => array( 'dm-sans_regular_500.woff2' ),
),
+ // otf font type.
+ 'otf local font' => array(
+ 'font_data' => array(
+ 'name' => 'Gilbert Color',
+ 'slug' => 'gilbert-color',
+ 'fontFamily' => 'Gilbert Color',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Gilbert Color',
+ 'fontStyle' => 'regular',
+ 'fontWeight' => '500',
+ 'uploadedFile' => 'files0',
+ ),
+ ),
+ ),
+ 'files_data' => array(
+ 'files0' => array(
+ 'name' => 'gilbert-color.otf',
+ 'type' => 'application/vnd.ms-opentype',
+ 'tmp_name' => wp_tempnam( 'Gilbert-' ),
+ 'error' => 0,
+ 'size' => 123,
+ ),
+ ),
+ 'expected' => array( 'gilbert-color_regular_500.otf' ),
+ ),
);
}
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollection.php b/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollection.php
index b3d8d1f10a1efc..bfdb7258fa11aa 100644
--- a/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollection.php
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollection.php
@@ -14,10 +14,10 @@ class Tests_Fonts_WpFontLibrary_GetFontCollection extends WP_UnitTestCase {
public static function set_up_before_class() {
$my_font_collection_config = array(
- 'id' => 'my-font-collection',
- 'name' => 'My Font Collection',
- 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
- 'data_json_file' => path_join( __DIR__, 'my-font-collection-data.json' ),
+ 'id' => 'my-font-collection',
+ 'name' => 'My Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => path_join( __DIR__, 'my-font-collection-data.json' ),
);
wp_register_font_collection( $my_font_collection_config );
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollections.php b/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollections.php
index 4bda590d6e8fd0..97e66e64e87161 100644
--- a/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollections.php
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/getFontCollections.php
@@ -13,33 +13,33 @@
class Tests_Fonts_WpFontLibrary_GetFontCollections extends WP_UnitTestCase {
public static function set_up_before_class() {
+ $font_library = new WP_Font_Library();
+
$my_font_collection_config = array(
- 'id' => 'my-font-collection',
- 'name' => 'My Font Collection',
- 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
- 'data_json_file' => path_join( __DIR__, 'my-font-collection-data.json' ),
+ 'id' => 'my-font-collection',
+ 'name' => 'My Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => path_join( __DIR__, 'my-font-collection-data.json' ),
);
- wp_register_font_collection( $my_font_collection_config );
-
- $another_font_collection_config = array(
- 'id' => 'another-font-collection',
- 'name' => 'Another Font Collection',
- 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
- 'data_json_file' => path_join( __DIR__, 'another-font-collection-data.json' ),
- );
+ $font_library::register_font_collection( $my_font_collection_config );
+ }
- wp_register_font_collection( $another_font_collection_config );
+ public function test_should_get_the_default_font_collection() {
+ $font_collections = WP_Font_Library::get_font_collections();
+ $this->assertArrayHasKey( 'default-font-collection', $font_collections, 'Default Google Fonts collection should be registered' );
+ $this->assertInstanceOf( 'WP_Font_Collection', $font_collections['default-font-collection'], 'The value of the array $font_collections[id] should be an instance of WP_Font_Collection class.' );
}
- public function test_should_get_font_collections() {
+ public function test_should_get_the_right_number_of_collections() {
$font_collections = WP_Font_Library::get_font_collections();
$this->assertNotEmpty( $font_collections, 'Sould return an array of font collections.' );
$this->assertCount( 2, $font_collections, 'Should return an array with one font collection.' );
+ }
+ public function test_should_get_mock_font_collection() {
+ $font_collections = WP_Font_Library::get_font_collections();
$this->assertArrayHasKey( 'my-font-collection', $font_collections, 'The array should have the key of the registered font collection id.' );
$this->assertInstanceOf( 'WP_Font_Collection', $font_collections['my-font-collection'], 'The value of the array $font_collections[id] should be an instance of WP_Font_Collection class.' );
- $this->assertArrayHasKey( 'another-font-collection', $font_collections, 'The array should have the key of the registered font collection id.' );
- $this->assertInstanceOf( 'WP_Font_Collection', $font_collections['another-font-collection'], 'The value of the array $font_collections[id] should be an instance of WP_Font_Collection class.' );
}
}
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php b/phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php
new file mode 100644
index 00000000000000..708134af69e92a
--- /dev/null
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * Test WP_Font_Family_Utils::get_expected_font_mime_types_per_php_version().
+ *
+ * @package WordPress
+ * @subpackage Font Library
+ *
+ * @group fonts
+ * @group font-library
+ *
+ * @covers WP_Font_Family_Utils::get_expected_font_mime_types_per_php_version
+ */
+class Tests_Fonts_WpFontsFamilyUtils_GetMimeTypes extends WP_UnitTestCase {
+
+ /**
+ *
+ * @dataProvider data_should_supply_correct_mime_type_for_php_version
+ *
+ * @param array $php_version_id PHP_VERSION_ID value.
+ * @param array $expected Expected mime types.
+ */
+ public function test_should_supply_correct_mime_type_for_php_version( $php_version_id, $expected ) {
+ $mimes = WP_Font_Library::get_expected_font_mime_types_per_php_version( $php_version_id );
+ $this->assertEquals( $mimes, $expected );
+ }
+
+ /**
+ * Data provider.
+ *
+ * @return array[]
+ */
+ public function data_should_supply_correct_mime_type_for_php_version() {
+ return array(
+ 'version 7.2' => array(
+ 'php_version_id' => 70200,
+ 'expected' => array(
+ 'otf' => 'application/vnd.ms-opentype',
+ 'ttf' => 'application/x-font-ttf',
+ 'woff' => 'application/font-woff',
+ 'woff2' => 'application/font-woff2',
+ ),
+ ),
+ 'version 7.3' => array(
+ 'php_version_id' => 70300,
+ 'expected' => array(
+ 'otf' => 'application/vnd.ms-opentype',
+ 'ttf' => 'application/font-sfnt',
+ 'woff' => 'application/font-woff',
+ 'woff2' => 'application/font-woff2',
+ ),
+ ),
+ 'version 7.4' => array(
+ 'php_version_id' => 70400,
+ 'expected' => array(
+ 'otf' => 'application/vnd.ms-opentype',
+ 'ttf' => 'font/sfnt',
+ 'woff' => 'application/font-woff',
+ 'woff2' => 'application/font-woff2',
+ ),
+ ),
+ 'version 8.0' => array(
+ 'php_version_id' => 80000,
+ 'expected' => array(
+ 'otf' => 'application/vnd.ms-opentype',
+ 'ttf' => 'font/sfnt',
+ 'woff' => 'application/font-woff',
+ 'woff2' => 'application/font-woff2',
+ ),
+ ),
+ 'version 8.1' => array(
+ 'php_version_id' => 80100,
+ 'expected' => array(
+ 'otf' => 'application/vnd.ms-opentype',
+ 'ttf' => 'font/sfnt',
+ 'woff' => 'font/woff',
+ 'woff2' => 'font/woff2',
+ ),
+ ),
+ 'version 8.2' => array(
+ 'php_version_id' => 80200,
+ 'expected' => array(
+ 'otf' => 'application/vnd.ms-opentype',
+ 'ttf' => 'font/sfnt',
+ 'woff' => 'font/woff',
+ 'woff2' => 'font/woff2',
+ ),
+ ),
+ );
+ }
+}
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/registerFontCollection.php b/phpunit/tests/fonts/font-library/wpFontLibrary/registerFontCollection.php
index 61b5eab873d6c5..6bc5fbb8161cee 100644
--- a/phpunit/tests/fonts/font-library/wpFontLibrary/registerFontCollection.php
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/registerFontCollection.php
@@ -14,10 +14,10 @@ class Tests_Fonts_WpFontLibrary_RegisterFontCollection extends WP_UnitTestCase {
public function test_should_register_font_collection() {
$config = array(
- 'id' => 'my-collection',
- 'name' => 'My Collection',
- 'description' => 'My Collection Description',
- 'data_json_file' => 'my-collection-data.json',
+ 'id' => 'my-collection',
+ 'name' => 'My Collection',
+ 'description' => 'My Collection Description',
+ 'src' => 'my-collection-data.json',
);
$collection = WP_Font_Library::register_font_collection( $config );
$this->assertInstanceOf( 'WP_Font_Collection', $collection );
@@ -25,9 +25,9 @@ public function test_should_register_font_collection() {
public function test_should_return_error_if_id_is_missing() {
$config = array(
- 'name' => 'My Collection',
- 'description' => 'My Collection Description',
- 'data_json_file' => 'my-collection-data.json',
+ 'name' => 'My Collection',
+ 'description' => 'My Collection Description',
+ 'src' => 'my-collection-data.json',
);
$this->expectException( 'Exception' );
$this->expectExceptionMessage( 'Font Collection config ID is required as a non-empty string.' );
@@ -36,9 +36,9 @@ public function test_should_return_error_if_id_is_missing() {
public function test_should_return_error_if_name_is_missing() {
$config = array(
- 'id' => 'my-collection',
- 'description' => 'My Collection Description',
- 'data_json_file' => 'my-collection-data.json',
+ 'id' => 'my-collection',
+ 'description' => 'My Collection Description',
+ 'src' => 'my-collection-data.json',
);
$this->expectException( 'Exception' );
$this->expectExceptionMessage( 'Font Collection config name is required as a non-empty string.' );
@@ -54,16 +54,16 @@ public function test_should_return_error_if_config_is_empty() {
public function test_should_return_error_if_id_is_repeated() {
$config1 = array(
- 'id' => 'my-collection-1',
- 'name' => 'My Collection 1',
- 'description' => 'My Collection 1 Description',
- 'data_json_file' => 'my-collection-1-data.json',
+ 'id' => 'my-collection-1',
+ 'name' => 'My Collection 1',
+ 'description' => 'My Collection 1 Description',
+ 'src' => 'my-collection-1-data.json',
);
$config2 = array(
- 'id' => 'my-collection-1',
- 'name' => 'My Collection 2',
- 'description' => 'My Collection 2 Description',
- 'data_json_file' => 'my-collection-2-data.json',
+ 'id' => 'my-collection-1',
+ 'name' => 'My Collection 2',
+ 'description' => 'My Collection 2 Description',
+ 'src' => 'my-collection-2-data.json',
);
// Register first collection.
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php b/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
index be15ecce898816..daa4c84aad9004 100644
--- a/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
@@ -15,14 +15,16 @@ class Tests_Fonts_WpFontLibrary_SetUploadDir extends WP_UnitTestCase {
public function test_should_set_fonts_upload_dir() {
$defaults = array(
'subdir' => '/abc',
- 'basedir' => '/var/www/html/wp-content',
- 'baseurl' => 'http://example.com/wp-content',
+ 'basedir' => '/any/path',
+ 'baseurl' => 'http://example.com/an/arbitrary/url',
+ 'path' => '/any/path/abc',
+ 'url' => 'http://example.com/an/arbitrary/url/abc',
);
$expected = array(
'subdir' => '/fonts',
- 'basedir' => '/var/www/html/wp-content',
+ 'basedir' => WP_CONTENT_DIR,
'baseurl' => content_url(),
- 'path' => '/var/www/html/wp-content/fonts',
+ 'path' => path_join( WP_CONTENT_DIR, 'fonts' ),
'url' => content_url() . '/fonts',
);
$this->assertSame( $expected, WP_Font_Library::set_upload_dir( $defaults ) );
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php
index f1e712bab85b40..a6b02f38a5e817 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php
@@ -7,9 +7,19 @@
*/
abstract class WP_REST_Font_Library_Controller_UnitTestCase extends WP_UnitTestCase {
+ /**
+ * Fonts directory.
+ *
+ * @var string
+ */
+ protected static $fonts_dir;
+
+
public function set_up() {
parent::set_up();
+ static::$fonts_dir = WP_Font_Library::get_fonts_dir();
+
// Create a user with administrator role.
$admin_id = $this->factory->user->create(
array(
@@ -29,6 +39,11 @@ public function tear_down() {
$reflection = new ReflectionClass( 'WP_Font_Library' );
$property = $reflection->getProperty( 'collections' );
$property->setAccessible( true );
- $property->setValue( array() );
+ $property->setValue( null, array() );
+
+ // Clean up the /fonts directory.
+ foreach ( $this->files_in_dir( static::$fonts_dir ) as $file ) {
+ @unlink( $file );
+ }
}
}
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollection.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollection.php
index ca661a1aac6268..f1a0a6a0cd510c 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollection.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollection.php
@@ -14,29 +14,96 @@
class Tests_Fonts_WPRESTFontLibraryController_GetFontCollection extends WP_REST_Font_Library_Controller_UnitTestCase {
/**
- * Register a mock collection.
+ * Register mock collections.
*/
- public static function wpSetupBeforeClass() {
+ public function set_up() {
+ parent::set_up();
// Mock font collection data file.
$mock_file = wp_tempnam( 'one-collection-' );
file_put_contents( $mock_file, '{"this is mock data":true}' );
+ // Mock the wp_remote_request() function.
+ add_filter( 'pre_http_request', array( $this, 'mock_request' ), 10, 3 );
- // Add a font collection.
- $config = array(
- 'id' => 'one-collection',
- 'name' => 'One Font Collection',
- 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
- 'data_json_file' => $mock_file,
+ $config_with_file = array(
+ 'id' => 'one-collection',
+ 'name' => 'One Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => $mock_file,
);
- wp_register_font_collection( $config );
+ wp_register_font_collection( $config_with_file );
+
+ $config_with_url = array(
+ 'id' => 'collection-with-url',
+ 'name' => 'Another Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => 'https://wordpress.org/fonts/mock-font-collection.json',
+ );
+
+ wp_register_font_collection( $config_with_url );
+
+ $config_with_non_existing_file = array(
+ 'id' => 'collection-with-non-existing-file',
+ 'name' => 'Another Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => '/home/non-existing-file.json',
+ );
+
+ wp_register_font_collection( $config_with_non_existing_file );
+
+ $config_with_non_existing_url = array(
+ 'id' => 'collection-with-non-existing-url',
+ 'name' => 'Another Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => 'https://non-existing-url-1234x.com.ar/fake-path/missing-file.json',
+ );
+
+ wp_register_font_collection( $config_with_non_existing_url );
}
- public function test_get_font_collection() {
+ public function mock_request( $preempt, $args, $url ) {
+ // Check if it's the URL you want to mock.
+ if ( 'https://wordpress.org/fonts/mock-font-collection.json' === $url ) {
+
+ // Mock the response body.
+ $mock_collection_data = array(
+ 'fontFamilies' => 'mock',
+ 'categories' => 'mock',
+ );
+
+ return array(
+ 'body' => json_encode( $mock_collection_data ),
+ 'response' => array(
+ 'code' => 200,
+ ),
+ );
+ }
+
+ // For any other URL, return false which ensures the request is made as usual (or you can return other mock data).
+ return false;
+ }
+
+ public function tear_down() {
+ // Remove the mock to not affect other tests.
+ remove_filter( 'pre_http_request', array( $this, 'mock_request' ) );
+
+ parent::tear_down();
+ }
+
+ public function test_get_font_collection_from_file() {
$request = new WP_REST_Request( 'GET', '/wp/v2/fonts/collections/one-collection' );
$response = rest_get_server()->dispatch( $request );
$data = $response->get_data();
$this->assertSame( 200, $response->get_status(), 'The response status is not 200.' );
$this->assertArrayHasKey( 'data', $data, 'The response data does not have the key with the file data.' );
+ $this->assertSame( array( 'this is mock data' => true ), $data['data'], 'The response data does not have the expected file data.' );
+ }
+
+ public function test_get_font_collection_from_url() {
+ $request = new WP_REST_Request( 'GET', '/wp/v2/fonts/collections/collection-with-url' );
+ $response = rest_get_server()->dispatch( $request );
+ $data = $response->get_data();
+ $this->assertSame( 200, $response->get_status(), 'The response status is not 200.' );
+ $this->assertArrayHasKey( 'data', $data, 'The response data does not have the key with the file data.' );
}
public function test_get_non_existing_collection_should_return_404() {
@@ -44,4 +111,16 @@ public function test_get_non_existing_collection_should_return_404() {
$response = rest_get_server()->dispatch( $request );
$this->assertSame( 404, $response->get_status() );
}
+
+ public function test_get_non_existing_file_should_return_500() {
+ $request = new WP_REST_Request( 'GET', '/wp/v2/fonts/collections/collection-with-non-existing-file' );
+ $response = rest_get_server()->dispatch( $request );
+ $this->assertSame( 500, $response->get_status() );
+ }
+
+ public function test_get_non_existing_url_should_return_500() {
+ $request = new WP_REST_Request( 'GET', '/wp/v2/fonts/collections/collection-with-non-existing-url' );
+ $response = rest_get_server()->dispatch( $request );
+ $this->assertSame( 500, $response->get_status() );
+ }
}
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollections.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollections.php
index 52678aa4cb94ae..ad120ee36fce4d 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollections.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/getFontCollections.php
@@ -27,10 +27,10 @@ public function test_get_font_collections() {
// Add a font collection.
$config = array(
- 'id' => 'my-font-collection',
- 'name' => 'My Font Collection',
- 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
- 'data_json_file' => $mock_file,
+ 'id' => 'my-font-collection',
+ 'name' => 'My Font Collection',
+ 'description' => 'Demo about how to a font collection to your WordPress Font Library.',
+ 'src' => $mock_file,
);
wp_register_font_collection( $config );
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php
index e92776b70ed640..01ac1ff8436ed7 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php
@@ -24,18 +24,17 @@ class Tests_Fonts_WPRESTFontLibraryController_InstallFonts extends WP_REST_Font_
public function test_install_fonts( $font_families, $files, $expected_response ) {
$install_request = new WP_REST_Request( 'POST', '/wp/v2/fonts' );
$font_families_json = json_encode( $font_families );
- $install_request->set_param( 'fontFamilies', $font_families_json );
+ $install_request->set_param( 'font_families', $font_families_json );
$install_request->set_file_params( $files );
$response = rest_get_server()->dispatch( $install_request );
$data = $response->get_data();
-
$this->assertSame( 200, $response->get_status(), 'The response status is not 200.' );
- $this->assertCount( count( $expected_response ), $data, 'Not all the font families were installed correctly.' );
+ $this->assertCount( count( $expected_response['successes'] ), $data['successes'], 'Not all the font families were installed correctly.' );
// Checks that the font families were installed correctly.
- for ( $family_index = 0; $family_index < count( $data ); $family_index++ ) {
- $installed_font = $data[ $family_index ];
- $expected_font = $expected_response[ $family_index ];
+ for ( $family_index = 0; $family_index < count( $data['successes'] ); $family_index++ ) {
+ $installed_font = $data['successes'][ $family_index ];
+ $expected_font = $expected_response['successes'][ $family_index ];
if ( isset( $installed_font['fontFace'] ) || isset( $expected_font['fontFace'] ) ) {
for ( $face_index = 0; $face_index < count( $installed_font['fontFace'] ); $face_index++ ) {
@@ -61,9 +60,10 @@ public function test_install_fonts( $font_families, $files, $expected_response )
public function data_install_fonts() {
$temp_file_path1 = wp_tempnam( 'Piazzola1-' );
- file_put_contents( $temp_file_path1, 'Mocking file content' );
+ copy( __DIR__ . '/../../../data/fonts/Merriweather.ttf', $temp_file_path1 );
+
$temp_file_path2 = wp_tempnam( 'Monteserrat-' );
- file_put_contents( $temp_file_path2, 'Mocking file content' );
+ copy( __DIR__ . '/../../../data/fonts/Merriweather.ttf', $temp_file_path2 );
return array(
@@ -100,32 +100,35 @@ public function data_install_fonts() {
),
'files' => array(),
'expected_response' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'slug' => 'piazzolla',
- 'name' => 'Piazzolla',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'normal',
- 'fontWeight' => '400',
- 'src' => '/wp-content/fonts/piazzolla_normal_400.ttf',
+ 'successes' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'slug' => 'piazzolla',
+ 'name' => 'Piazzolla',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '400',
+ 'src' => '/wp-content/fonts/piazzolla_normal_400.ttf',
+ ),
),
),
- ),
- array(
- 'fontFamily' => 'Montserrat',
- 'slug' => 'montserrat',
- 'name' => 'Montserrat',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Montserrat',
- 'fontStyle' => 'normal',
- 'fontWeight' => '100',
- 'src' => '/wp-content/fonts/montserrat_normal_100.ttf',
+ array(
+ 'fontFamily' => 'Montserrat',
+ 'slug' => 'montserrat',
+ 'name' => 'Montserrat',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Montserrat',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '100',
+ 'src' => '/wp-content/fonts/montserrat_normal_100.ttf',
+ ),
),
),
),
+ 'errors' => array(),
),
),
@@ -160,33 +163,36 @@ public function data_install_fonts() {
),
'files' => array(),
'expected_response' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'slug' => 'piazzolla',
- 'name' => 'Piazzolla',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'normal',
- 'fontWeight' => '400',
- 'src' => 'http://fonts.gstatic.com/s/piazzolla/v33/N0b72SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ88Rbvi0_TzOzKcQhZqx3gX9BRy5m5M.ttf',
+ 'successes' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'slug' => 'piazzolla',
+ 'name' => 'Piazzolla',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '400',
+ 'src' => 'http://fonts.gstatic.com/s/piazzolla/v33/N0b72SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ88Rbvi0_TzOzKcQhZqx3gX9BRy5m5M.ttf',
+ ),
),
),
- ),
- array(
- 'fontFamily' => 'Montserrat',
- 'slug' => 'montserrat',
- 'name' => 'Montserrat',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Montserrat',
- 'fontStyle' => 'normal',
- 'fontWeight' => '100',
- 'src' => 'http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Uw-Y3tcoqK5.ttf',
+ array(
+ 'fontFamily' => 'Montserrat',
+ 'slug' => 'montserrat',
+ 'name' => 'Montserrat',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Montserrat',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '100',
+ 'src' => 'http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Uw-Y3tcoqK5.ttf',
+ ),
),
),
),
+ 'errors' => array(),
),
),
@@ -200,11 +206,14 @@ public function data_install_fonts() {
),
'files' => array(),
'expected_response' => array(
- array(
- 'fontFamily' => 'Arial',
- 'slug' => 'arial',
- 'name' => 'Arial',
+ 'successes' => array(
+ array(
+ 'fontFamily' => 'Arial',
+ 'slug' => 'arial',
+ 'name' => 'Arial',
+ ),
),
+ 'errors' => array(),
),
),
@@ -254,32 +263,36 @@ public function data_install_fonts() {
),
),
'expected_response' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'slug' => 'piazzolla',
- 'name' => 'Piazzolla',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Piazzolla',
- 'fontStyle' => 'normal',
- 'fontWeight' => '400',
- 'src' => '/wp-content/fonts/piazzolla_normal_400.ttf',
+ 'successes' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'slug' => 'piazzolla',
+ 'name' => 'Piazzolla',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Piazzolla',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '400',
+ 'src' => '/wp-content/fonts/piazzolla_normal_400.ttf',
+ ),
),
),
- ),
- array(
- 'fontFamily' => 'Montserrat',
- 'slug' => 'montserrat',
- 'name' => 'Montserrat',
- 'fontFace' => array(
- array(
- 'fontFamily' => 'Montserrat',
- 'fontStyle' => 'normal',
- 'fontWeight' => '100',
- 'src' => '/wp-content/fonts/montserrat_normal_100.ttf',
+ array(
+ 'fontFamily' => 'Montserrat',
+ 'slug' => 'montserrat',
+ 'name' => 'Montserrat',
+ 'fontFace' => array(
+ array(
+ 'fontFamily' => 'Montserrat',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '100',
+ 'src' => '/wp-content/fonts/montserrat_normal_100.ttf',
+ ),
),
),
+
),
+ 'errors' => array(),
),
),
);
@@ -296,7 +309,7 @@ public function data_install_fonts() {
public function test_install_with_improper_inputs( $font_families, $files = array() ) {
$install_request = new WP_REST_Request( 'POST', '/wp/v2/fonts' );
$font_families_json = json_encode( $font_families );
- $install_request->set_param( 'fontFamilies', $font_families_json );
+ $install_request->set_param( 'font_families', $font_families_json );
$install_request->set_file_params( $files );
$response = rest_get_server()->dispatch( $install_request );
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php
index 3082bfc87f62ef..a3b613e6f983e0 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php
@@ -53,7 +53,7 @@ public function set_up() {
$install_request = new WP_REST_Request( 'POST', '/wp/v2/fonts' );
$font_families_json = json_encode( $mock_families );
- $install_request->set_param( 'fontFamilies', $font_families_json );
+ $install_request->set_param( 'font_families', $font_families_json );
rest_get_server()->dispatch( $install_request );
}
@@ -68,9 +68,8 @@ public function test_uninstall() {
);
$uninstall_request = new WP_REST_Request( 'DELETE', '/wp/v2/fonts' );
- $uninstall_request->set_param( 'fontFamilies', $font_families_to_uninstall );
+ $uninstall_request->set_param( 'font_families', $font_families_to_uninstall );
$response = rest_get_server()->dispatch( $uninstall_request );
- echo ( print_r( $response->get_data(), true ) );
$this->assertSame( 200, $response->get_status(), 'The response status is not 200.' );
}
@@ -89,9 +88,9 @@ public function test_uninstall_non_existing_fonts() {
),
);
- $uninstall_request->set_param( 'fontFamilies', $non_existing_font_data );
+ $uninstall_request->set_param( 'font_families', $non_existing_font_data );
$response = rest_get_server()->dispatch( $uninstall_request );
- $response->get_data();
- $this->assertSame( 500, $response->get_status(), 'The response status is not 500.' );
+ $data = $response->get_data();
+ $this->assertCount( 2, $data['errors'], 'The response should have 2 errors, one for each font family uninstall failure.' );
}
}
diff --git a/platform-docs/docs/basic-concepts/block-library.md b/platform-docs/docs/basic-concepts/block-library.md
new file mode 100644
index 00000000000000..dba569f34fac13
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/block-library.md
@@ -0,0 +1,112 @@
+---
+sidebar_position: 4
+---
+
+# Block Library
+
+The block editor relies on a registry of block types to render and edit blocks. The `@wordpress/block-library` package provides a set of core blocks that you can register in your application.
+
+## Registring all block types
+
+Registering blocks requires both loading the JavaScript code that makes the block type available for use and including the corresponding stylesheets.
+
+To register all blocks from the block library, you can use the `registerCoreBlocks` function:
+
+```js
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+registerCoreBlocks();
+```
+
+And make sure to also load the stylesheets required for these blocks.
+
+```js
+import "@wordpress/block-library/build-style/common.css";
+import "@wordpress/block-library/build-style/style.css";
+import "@wordpress/block-library/build-style/editor.css";
+```
+
+## Registering individual blocks
+
+That said, by default the block library includes a very big number of blocks and some of them may contain some WordPress-specific logic. For this reason, if you're building a third-party block editor, it's recommended to only register the blocks that you need.
+
+### The paragraph block type
+
+The main block type that almost all block editors need is the paragraph block. You can register it with the following code:
+
+```js
+import '@wordpress/block-library/build-module/paragraph/init';
+import '@wordpress/block-library/build-style/paragraph/style.css';
+import '@wordpress/block-library/build-style/paragraph/editor.css';
+```
+
+Also, the paragraph block is often used as the "default block" in the block editor. The default block has multiple purposes:
+
+ - It's the block that is selected when the user starts typing or hits Enter.
+ - It's the block that is inserted when the user clicks on the "Add block" button.
+ - It's the block where the user can hit `/` to search for alternative block types.
+
+You can mark the paragraph block as the default block with the following code:
+
+```js
+import { setDefaultBlockName } from '@wordpress/blocks';
+
+setDefaultBlockName( 'core/paragraph' );
+```
+
+### The HTML block type
+
+Another important block type that most block editors would want to use is the HTML block. This block allows users to insert arbitrary HTML code in the block editor and is often used to insert embeds or external content.
+
+It is also used by the block editor to render blocks that are not registered in the block editor or as a fallback block type for random HTML content that can't be properly parsed into blocks.
+
+You can register the HTML block with the following code:
+
+```js
+import '@wordpress/block-library/build-module/html/init';
+import '@wordpress/block-library/build-style/html/editor.css';
+```
+
+And mark it as the fallback block type with the following code:
+
+```js
+import {
+ setFreeformContentHandlerName,
+ setUnregisteredTypeHandlerName
+} from '@wordpress/blocks';
+
+setFreeformContentHandlerName( 'core/html' );
+setUnregisteredTypeHandlerName( 'core/html' );
+```
+
+### Extra blocks
+
+In addition to these two default blocks, here's a non-exhaustive list of blocks that can be registered and used by any block editor:
+
+ - **Heading block**: `heading`
+ - **List block**: `list` and `list-item`
+ - **Quote block**: `quote`
+ - **Image block**: `image`
+ - **Gallery block**: `gallery`
+ - **Video block**: `video`
+ - **Audio block**: `audio`
+ - **Cover block**: `cover`
+ - **File block**: `file`
+ - **Code block**: `code`
+ - **Preformatted block**: `preformatted`
+ - **Pullquote block**: `pullquote`
+ - **Table block**: `table`
+ - **Verse block**: `verse`
+ - **Separator block**: `separator`
+ - **Spacer block**: `spacer`
+ - **Columns block**: `columns` and `column`
+ - **Group block**: `group`
+ - **Button block**: `buttons` and `button`
+ - **Social links block**: `social-links` and `social-link`
+
+For each block, you'll need to load the JavaScript code and stylesheets. Some blocks have two stylesheets (`style.css` and `editor.css`). For example, to register the heading block, you can use the following code:
+
+```js
+import '@wordpress/block-library/build-module/heading/init';
+import '@wordpress/block-library/build-style/heading/editor.css';
+```
diff --git a/platform-docs/docs/basic-concepts/internationalization.md b/platform-docs/docs/basic-concepts/internationalization.md
index 3b808bd71e61b1..c15a1e2e68145f 100644
--- a/platform-docs/docs/basic-concepts/internationalization.md
+++ b/platform-docs/docs/basic-concepts/internationalization.md
@@ -1,5 +1,7 @@
---
-sidebar_position: 6
+sidebar_position: 7
---
# Internationalization
+
+# RTL Support
diff --git a/platform-docs/docs/basic-concepts/rendering.md b/platform-docs/docs/basic-concepts/rendering.md
index f5458df2e81e77..9c823f4931aaa1 100644
--- a/platform-docs/docs/basic-concepts/rendering.md
+++ b/platform-docs/docs/basic-concepts/rendering.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 7
+sidebar_position: 8
---
# Rendering blocks
diff --git a/platform-docs/docs/basic-concepts/rich-text.md b/platform-docs/docs/basic-concepts/rich-text.md
index e3517bc93203e8..bfd8119f02ce41 100644
--- a/platform-docs/docs/basic-concepts/rich-text.md
+++ b/platform-docs/docs/basic-concepts/rich-text.md
@@ -3,3 +3,18 @@ sidebar_position: 5
---
# RichText and Format Library
+
+Several block types (like paragraph, heading, and more) allow users to type and manipulate rich text content. In order to do so, they use the `RichText` component and the `@wordpress/rich-text` package.
+
+The `RichText` component is a wrapper around the `@wordpress/rich-text` package that provides a React-friendly API to manipulate rich text content. It allows the user to add and apply formats to the text content.
+
+By default, no format is available. You need to register formats in order to make them available to the user. The `@wordpress/format-library` provides a set of default formats to include in your application. It includes:
+
+- bold, italic, superscript, subscript, strikethrough, links, inline code, inline image, text color, keyboard input (kbd), language (bdo).
+
+In order to register all formats from the format library, add the `@wordpress/format-library` as a dependency of your app and you can use the following code.
+
+```js
+import '@wordpress/format-library';
+import '@wordpress/format-library/build-style/style.css';
+```
diff --git a/platform-docs/docs/basic-concepts/settings.md b/platform-docs/docs/basic-concepts/settings.md
index 66d0691aef5f75..a2d376e71a29dd 100644
--- a/platform-docs/docs/basic-concepts/settings.md
+++ b/platform-docs/docs/basic-concepts/settings.md
@@ -1,5 +1,163 @@
---
-sidebar_position: 4
+sidebar_position: 3
---
# Block Editor Settings
+
+You can customize the block editor by providing a `settings` prop to the `BlockEditorProvider` component. This prop accepts an object with the following properties:
+
+## styles
+
+The styles setting is an array of editor styles to enqueue in the iframe/canvas of the block editor. Each style is an object with a `css` property. Example:
+
+```jsx
+import { BlockEditorProvider, BlockCanvas } from '@wordpress/block-editor';
+
+export const editorStyles = [
+ {
+ css: `
+ body {
+ font-family: Arial;
+ font-size: 16px;
+ }
+
+ p {
+ font-size: inherit;
+ line-height: inherit;
+ }
+
+ ul {
+ list-style-type: disc;
+ }
+
+ ol {
+ list-style-type: decimal;
+ }
+ `,
+ },
+];
+
+export default function App() {
+ return (
+ <BlockEditorProvider settings={ { styles: editorStyles } }>
+ <BlockCanvas />
+ </BlockEditorProvider>
+ );
+}
+```
+
+## mediaUpload
+
+Some core blocks, like the image or video blocks, allow users to render media within the block editor. By default, you can use external URLs but if you want to allow users to upload media from their computer, you need to provide a `mediaUpload` function. Here's a quick example of such function:
+
+```jsx
+async function mediaUpload( {
+ additionalData = {},
+ filesList,
+ onError = noop,
+ onFileChange,
+} ) {
+ const uploadedMedia = [];
+ for ( const file of filesList ) {
+ try {
+ const data = await someApiCallToUploadTheFile( file );
+ const mediaObject = {
+ alt: data.alt,
+ caption: data.caption,
+ title: data.title,
+ url: data.url,
+ };
+ uploadedMedia.push( mediaObject );
+ } catch ( error ) {
+ onError( {
+ code: 'SOME_ERROR_CODE',
+ message:
+ mediaFile.name +
+ ' : Sorry, an error happened while uploading this file.',
+ file: mediaFile,
+ } );
+ }
+ if ( uploadedMedia.length ) {
+ onFileChange( uploadedMedia );
+ }
+ }
+}
+```
+
+Providing a `mediaUpload` function also enables drag and dropping files into the editor to upload them.
+
+## inserterMediaCategories
+
+The inserter media categories setting is an array of media categories to display in the inserter. Each category is an object with `name` and `labels` values, a `fetch` function and a few extra keys. Example:
+
+```jsx
+{
+ name: 'openverse',
+ labels: {
+ name: 'Openverse',
+ search_items: 'Search Openverse',
+ },
+ mediaType: 'image',
+ async fetch( query = {} ) {
+ const defaultArgs = {
+ mature: false,
+ excluded_source: 'flickr,inaturalist,wikimedia',
+ license: 'pdm,cc0',
+ };
+ const finalQuery = { ...query, ...defaultArgs };
+ // Sometimes you might need to map the supported request params according to the `InserterMediaRequest`
+ // interface. In this example the `search` query param is named `q`.
+ const mapFromInserterMediaRequest = {
+ per_page: 'page_size',
+ search: 'q',
+ };
+ const url = new URL( 'https://api.openverse.engineering/v1/images/' );
+ Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+ const queryKey = mapFromInserterMediaRequest[ key ] || key;
+ url.searchParams.set( queryKey, value );
+ } );
+ const response = await window.fetch( url, {
+ headers: {
+ 'User-Agent': 'WordPress/inserter-media-fetch',
+ },
+ } );
+ const jsonResponse = await response.json();
+ const results = jsonResponse.results;
+ return results.map( ( result ) => ( {
+ ...result,
+ // If your response result includes an `id` prop that you want to access later, it should
+ // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
+ // a report URL getter.
+ // Additionally you should always clear the `id` value of your response results because
+ // it is used to identify WordPress media items.
+ sourceId: result.id,
+ id: undefined,
+ caption: result.caption,
+ previewUrl: result.thumbnail,
+ } ) );
+ },
+ getReportUrl: ( { sourceId } ) =>
+ `https://wordpress.org/openverse/image/${ sourceId }/report/`,
+ isExternalResource: true,
+}
+```
+
+## hasFixedToolbar
+
+Whether the `BlockTools` component renders the toolbar in a fixed position or if follows the position of the selected block. Defaults to `false`.
+
+## focusMode
+
+The focus mode is a special mode where any block that is not selected is shown with a reduced opacity, giving more prominence to the selected block. Defaults to `false`.
+
+## keepCaretInsideBlock
+
+By default, arrow keys can be used to navigate across blocks. You can turn off that behavior and keep the caret inside the currently selected block using this setting. Defaults to `false`.
+
+## codeEditingEnabled
+
+Allows the user to edit the currently selected block using an HTML code editor. Note that using the code editor is not supported by all blocks and that it has the potential to create invalid blocks depending on the markup the user provides. Defaults to `true`.
+
+## canLockBlocks
+
+Whether the user can lock blocks. Defaults to `true`.
diff --git a/platform-docs/docs/basic-concepts/undo-redo.md b/platform-docs/docs/basic-concepts/undo-redo.md
index 26981e6e0f5c16..d3041a21eebe9b 100644
--- a/platform-docs/docs/basic-concepts/undo-redo.md
+++ b/platform-docs/docs/basic-concepts/undo-redo.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 3
+sidebar_position: 6
---
# Undo Redo
@@ -14,7 +14,8 @@ First, make sure you add the `@wordpress/compose` package to your dependencies,
```jsx
import { useStateWithHistory } from '@wordpress/compose';
-import { createRoot, createElement, useState } from "@wordpress/element";
+import { createElement, useState } from "react";
+import { createRoot } from 'react-dom/client';
import {
BlockEditorProvider,
BlockCanvas,
diff --git a/platform-docs/docs/intro.md b/platform-docs/docs/intro.md
index 41732843164e2b..79a142731891e5 100644
--- a/platform-docs/docs/intro.md
+++ b/platform-docs/docs/intro.md
@@ -23,49 +23,12 @@ Once done, you can navigate to your application folder and run it locally using
To build a block editor, you need to install the following dependencies:
- `@wordpress/block-editor`
- - `@wordpress/element`
- `@wordpress/block-library`
- `@wordpress/components`
-## Setup vite to use JSX and @wordpress/element as a pragma
+## JSX
-We're going to be using JSX to write our UI and components. So one of the first steps we need to do is to configure our build tooling.
-
-If you're using vite, you can create a `vite.config.js` file at the root of your application and paste the following content:
-
-```js
-// vite.config.js
-import { defineConfig } from 'vite'
-
-export default defineConfig({
- esbuild: {
- jsxFactory: 'createElement',
- jsxFragment: 'Fragment',
- },
- define: {
- // This is not necessary to make JSX work
- // but it's a requirement for some @wordpress packages.
- 'process.env': {}
- },
-})
-```
-
-With the config above, you should be able to write JSX in your `*.jsx` files, just make sure you import createElement and Fragment at the top of each of your files: `import { createElement, Fragment } from '@wordpress/element';`
-
-We can now check that everything is working as expected:
-
- - Remove the default content created by vite: `main.js` and `counter.js` files.
- - Create an `index.jsx` file at the root of your application containing some JSX, example:
-```jsx
-import { createRoot, createElement } from '@wordpress/element';
-
-// Render your React component instead
-const root = createRoot(document.getElementById('app'));
-root.render(<h1>Hello, world</h1>);
-```
- - Update the script file in your `index.html` to `index.jsx` instead of `main.js`.
-
-After restarting your local build (aka `npm run dev`), you should see the **"Hello, world"** heading appearing in your browser.
+We're going to be using JSX to write our UI and components. So one of the first steps we need to do is to configure our build tooling, By default vite supports JSX and and outputs the result as a React pragma. The Block editor uses React so there's no need to configure anything here but if you're using a different bundler/build tool, make sure the JSX transpilation is setup properly.
## Bootstrap your block editor
@@ -73,7 +36,8 @@ It's time to render our first block editor.
- Update your `index.jsx` file with the following code:
```jsx
-import { createRoot, createElement, useState } from "@wordpress/element";
+import { createElement, useState } from "react";
+import { createRoot } from 'react-dom/client';
import {
BlockEditorProvider,
BlockCanvas,
diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts
index 742ca54f4f2ace..cbbfbac3be4159 100644
--- a/test/e2e/playwright.config.ts
+++ b/test/e2e/playwright.config.ts
@@ -11,7 +11,7 @@ import { defineConfig, devices } from '@playwright/test';
const baseConfig = require( '@wordpress/scripts/config/playwright.config' );
const config = defineConfig( {
- ...baseConfig.default,
+ ...baseConfig,
reporter: process.env.CI
? [ [ 'github' ], [ './config/flaky-tests-reporter.ts' ] ]
: 'list',
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index 39d6e76eaf6689..04cd358729a113 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -162,6 +162,99 @@ test.describe( 'Buttons', () => {
);
} );
+ test( 'can toggle button link settings', async ( {
+ editor,
+ page,
+ pageUtils,
+ } ) => {
+ await editor.insertBlock( { name: 'core/buttons' } );
+ await page.keyboard.type( 'WordPress' );
+ await pageUtils.pressKeys( 'primary+k' );
+ await page.keyboard.type( 'https://www.wordpress.org/' );
+ await page.keyboard.press( 'Enter' );
+
+ // Edit link.
+ await page.getByRole( 'button', { name: 'Edit' } ).click();
+
+ // Open Advanced settings panel.
+ await page
+ .getByRole( 'region', {
+ name: 'Editor content',
+ } )
+ .getByRole( 'button', {
+ name: 'Advanced',
+ } )
+ .click();
+
+ const newTabCheckbox = page.getByLabel( 'Open in new tab' );
+ const noFollowCheckbox = page.getByLabel( 'nofollow' );
+
+ // Navigate to and toggle the "Open in new tab" checkbox.
+ await newTabCheckbox.click();
+
+ // Toggle should still have focus and be checked.
+ await expect( newTabCheckbox ).toBeChecked();
+ await expect( newTabCheckbox ).toBeFocused();
+
+ await page
+ //TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
+ .locator( '.block-editor-link-control' )
+ .getByRole( 'button', { name: 'Save' } )
+ .click();
+
+ // The link should have been inserted.
+ await expect.poll( editor.getBlocks ).toMatchObject( [
+ {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ attributes: {
+ text: 'WordPress',
+ url: 'https://www.wordpress.org/',
+ rel: 'noreferrer noopener',
+ linkTarget: '_blank',
+ },
+ },
+ ],
+ },
+ ] );
+
+ // Edit link again.
+ await page.getByRole( 'button', { name: 'Edit' } ).click();
+
+ // Navigate to and toggle the "nofollow" checkbox.
+ await noFollowCheckbox.click();
+
+ // expect settings for `Open in new tab` and `No follow`
+ await expect( newTabCheckbox ).toBeChecked();
+ await expect( noFollowCheckbox ).toBeChecked();
+
+ await page
+ //TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
+ .locator( '.block-editor-link-control' )
+ .getByRole( 'button', { name: 'Save' } )
+ .click();
+
+ // Check the content again.
+ await expect.poll( editor.getBlocks ).toMatchObject( [
+ {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ attributes: {
+ text: 'WordPress',
+ url: 'https://www.wordpress.org/',
+ rel: 'noreferrer noopener nofollow',
+ linkTarget: '_blank',
+ },
+ },
+ ],
+ },
+ ] );
+ } );
+
test( 'can resize width', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index 23443059c15224..bcb23c9a240991 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -143,7 +143,7 @@ test.describe( 'Columns', () => {
} );
await editor.selectBlocks(
- editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+ editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
);
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'Enter' );
@@ -200,7 +200,7 @@ test.describe( 'Columns', () => {
await editor.selectBlocks(
editor.canvas.locator(
- 'role=document[name="Paragraph block"i] >> text="1"'
+ 'role=document[name="Block: Paragraph"i] >> text="1"'
)
);
await page.keyboard.press( 'ArrowRight' );
diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js
index 98be7b85304090..fa5103ebaa4eeb 100644
--- a/test/e2e/specs/editor/blocks/cover.spec.js
+++ b/test/e2e/specs/editor/blocks/cover.spec.js
@@ -26,7 +26,6 @@ test.describe( 'Cover', () => {
test( 'can set overlay color using color picker on block placeholder', async ( {
editor,
- coverBlockUtils,
} ) => {
await editor.insertBlock( { name: 'core/cover' } );
const coverBlock = editor.canvas.getByRole( 'document', {
@@ -39,18 +38,14 @@ test.describe( 'Cover', () => {
} );
await expect( blackColorSwatch ).toBeVisible();
- // Get the RGB value of Black.
- const [ blackRGB ] =
- await coverBlockUtils.getBackgroundColorAndOpacity( coverBlock );
-
// Create the block by clicking selected color button.
await blackColorSwatch.click();
- // Get the RGB value of the background dim.
- const [ actualRGB ] =
- await coverBlockUtils.getBackgroundColorAndOpacity( coverBlock );
-
- expect( blackRGB ).toEqual( actualRGB );
+ // Assert that after clicking black, the background color is black.
+ await expect( coverBlock ).toHaveCSS(
+ 'background-color',
+ 'rgb(0, 0, 0)'
+ );
} );
test( 'can set background image using image upload on block placeholder', async ( {
@@ -76,7 +71,7 @@ test.describe( 'Cover', () => {
} ).toPass();
} );
- test( 'dims background image down by 50% by default', async ( {
+ test( 'dims background image down by 50% with the average image color when an image is uploaded', async ( {
editor,
coverBlockUtils,
} ) => {
@@ -89,15 +84,14 @@ test.describe( 'Cover', () => {
coverBlock.getByTestId( 'form-file-upload-input' )
);
- // The hidden span must be used as the target for opacity and color value.
- // Using the Cover block to calculate the opacity results in an incorrect value of 1.
- // The hidden span value returns the correct opacity at 0.5.
- const [ backgroundDimColor, backgroundDimOpacity ] =
- await coverBlockUtils.getBackgroundColorAndOpacity(
- coverBlock.locator( 'span[aria-hidden="true"]' )
- );
- expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
- expect( backgroundDimOpacity ).toBe( '0.5' );
+ // The overlay is a separate aria-hidden span before the image.
+ const overlay = coverBlock.locator( '.wp-block-cover__background' );
+
+ await expect( overlay ).toHaveCSS(
+ 'background-color',
+ 'rgb(179, 179, 179)'
+ );
+ await expect( overlay ).toHaveCSS( 'opacity', '0.5' );
} );
test( 'can have the title edited', async ( { editor } ) => {
@@ -119,7 +113,7 @@ test.describe( 'Cover', () => {
// Activate the paragraph block inside the Cover block.
// The name of the block differs depending on whether text has been entered or not.
const coverBlockParagraph = coverBlock.getByRole( 'document', {
- name: /Paragraph block|Empty block; start writing or type forward slash to choose a block/,
+ name: /Block: Paragraph|Empty block; start writing or type forward slash to choose a block/,
} );
await expect( coverBlockParagraph ).toBeEditable();
@@ -200,7 +194,7 @@ test.describe( 'Cover', () => {
expect( newCoverBlockBox.height ).toBe( coverBlockBox.height + 100 );
} );
- test( 'dims the background image down by 50% when transformed from the Image block', async ( {
+ test( 'dims the background image down by 50% black when transformed from the Image block', async ( {
editor,
coverBlockUtils,
} ) => {
@@ -226,19 +220,11 @@ test.describe( 'Cover', () => {
name: 'Block: Cover',
} );
- // The hidden span must be used as the target for opacity and color value.
- // Using the Cover block to calculate the opacity results in an incorrect value of 1.
- // The hidden span value returns the correct opacity at 0.5.
- const [ backgroundDimColor, backgroundDimOpacity ] =
- await coverBlockUtils.getBackgroundColorAndOpacity(
- coverBlock.locator( 'span[aria-hidden="true"]' )
- );
-
- // The hidden span must be used as the target for opacity and color value.
- // Using the Cover block to calculate the opacity results in an incorrect value of 1.
- // The hidden span value returns the correct opacity at 0.5.
- expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
- expect( backgroundDimOpacity ).toBe( '0.5' );
+ // The overlay is a separate aria-hidden span before the image.
+ const overlay = coverBlock.locator( '.wp-block-cover__background' );
+
+ await expect( overlay ).toHaveCSS( 'background-color', 'rgb(0, 0, 0)' );
+ await expect( overlay ).toHaveCSS( 'opacity', '0.5' );
} );
} );
@@ -269,11 +255,4 @@ class CoverBlockUtils {
return filename;
}
-
- async getBackgroundColorAndOpacity( locator ) {
- return await locator.evaluate( ( el ) => {
- const computedStyle = window.getComputedStyle( el );
- return [ computedStyle.backgroundColor, computedStyle.opacity ];
- } );
- }
}
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
index 9fe0ce101c5e97..f4396982bb997f 100644
--- a/test/e2e/specs/editor/blocks/list.spec.js
+++ b/test/e2e/specs/editor/blocks/list.spec.js
@@ -1345,7 +1345,9 @@ test.describe( 'List (@firefox)', () => {
<p>2</p>
<!-- /wp:paragraph -->` );
- await page.getByRole( 'button', { name: 'Paragraph' } ).click();
+ await page
+ .getByRole( 'button', { name: 'Multiple blocks selected' } )
+ .click();
await page.getByRole( 'menuitem', { name: 'List' } ).click();
expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
index 1fd8bd39f520a0..42ecb29aa6650f 100644
--- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
@@ -413,6 +413,10 @@ class ColorControl {
.getByRole( 'button', { name: 'Open menu' } )
.click();
+ // Move the mouse to avoid accidentally triggering hover
+ // state on the links once the overlay opens.
+ await this.page.mouse.move( 1000, 1000 );
+
const overlay = this.editor.canvas
.locator( '.wp-block-navigation__responsive-container' )
.filter( { hasText: 'Submenu Link' } );
diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
index 185297178323f3..fd7113fe170959 100644
--- a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -195,8 +195,8 @@ test.describe( 'Navigation block - List view editing', () => {
await expect( blockResultOptions.nth( 1 ) ).toHaveText( 'Custom Link' );
// Select the Page Link option.
- const pageLinkResult = blockResultOptions.nth( 0 );
- await pageLinkResult.click();
+ const customLinkResult = blockResultOptions.nth( 1 );
+ await customLinkResult.click();
// Expect to see the Link creation UI be focused.
const linkUIInput = linkControl.getSearchInput();
@@ -209,7 +209,26 @@ test.describe( 'Navigation block - List view editing', () => {
await expect( linkUIInput ).toBeFocused();
await expect( linkUIInput ).toBeEmpty();
+ // Provides test coverage for feature whereby Custom Link type
+ // should default to `Pages` when displaying the "initial suggestions"
+ // in the Link UI.
+ // See https://github.com/WordPress/gutenberg/pull/54622.
const firstResult = await linkControl.getNthSearchResult( 0 );
+ const secondResult = await linkControl.getNthSearchResult( 1 );
+ const thirdResult = await linkControl.getNthSearchResult( 2 );
+
+ const firstResultType =
+ await linkControl.getSearchResultType( firstResult );
+
+ const secondResultType =
+ await linkControl.getSearchResultType( secondResult );
+
+ const thirdResultType =
+ await linkControl.getSearchResultType( thirdResult );
+
+ expect( firstResultType ).toBe( 'Page' );
+ expect( secondResultType ).toBe( 'Page' );
+ expect( thirdResultType ).toBe( 'Page' );
// Grab the text from the first result so we can check (later on) that it was inserted.
const firstResultText =
@@ -570,9 +589,15 @@ class LinkControl {
await expect( result ).toBeVisible();
return result
- .locator(
- '.components-menu-item__info-wrapper .components-menu-item__item'
- ) // this is the only way to get the label text without the URL.
+ .locator( '.components-menu-item__item' ) // this is the only way to get the label text without the URL.
+ .innerText();
+ }
+
+ async getSearchResultType( result ) {
+ await expect( result ).toBeVisible();
+
+ return result
+ .locator( '.components-menu-item__shortcut' ) // this is the only way to get the type text.
.innerText();
}
}
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 44645005ff05e2..13b7ee341ede72 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -110,7 +110,7 @@ test.describe( 'Quote', () => {
await page.keyboard.type( 'two' );
await page.keyboard.down( 'Shift' );
await editor.canvas.click(
- 'role=document[name="Paragraph block"i] >> text=one'
+ 'role=document[name="Block: Paragraph"i] >> text=one'
);
await page.keyboard.up( 'Shift' );
await editor.transformBlockTo( 'core/quote' );
diff --git a/test/e2e/specs/editor/blocks/search.spec.js b/test/e2e/specs/editor/blocks/search.spec.js
new file mode 100644
index 00000000000000..d11efd7328afeb
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/search.spec.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Search', () => {
+ test.beforeEach( async ( { admin, requestUtils } ) => {
+ await requestUtils.deleteAllMenus();
+ await admin.createNewPost();
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllMenus();
+ } );
+
+ test.afterEach( async ( { requestUtils } ) => {
+ await Promise.all( [
+ requestUtils.deleteAllPosts(),
+ requestUtils.deleteAllMenus(),
+ ] );
+ } );
+
+ test( 'should auto-configure itself to sensible defaults when inserted into a Navigation block', async ( {
+ page,
+ editor,
+ requestUtils,
+ } ) => {
+ const createdMenu = await requestUtils.createNavigationMenu( {
+ title: 'Test Menu',
+ content: `<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->`,
+ } );
+
+ await editor.insertBlock( {
+ name: 'core/navigation',
+ attributes: {
+ ref: createdMenu?.id,
+ },
+ } );
+
+ const navBlockInserter = editor.canvas.getByRole( 'button', {
+ name: 'Add block',
+ } );
+ await navBlockInserter.click();
+
+ // Expect to see the block inserter.
+ await expect(
+ page.getByRole( 'searchbox', {
+ name: 'Search for blocks and patterns',
+ } )
+ ).toBeFocused();
+
+ // Search for the Search block.
+ await page.keyboard.type( 'Search' );
+
+ const blockResults = page.getByRole( 'listbox', {
+ name: 'Blocks',
+ } );
+
+ await expect( blockResults ).toBeVisible();
+
+ const searchBlockResult = blockResults.getByRole( 'option', {
+ name: 'Search',
+ } );
+
+ // Select the Search block.
+ await searchBlockResult.click();
+
+ // Expect to see the Search block.
+ const searchBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Search',
+ } );
+
+ await expect( searchBlock ).toBeVisible();
+
+ // The only way to access the inner controlled blocks of the Navigation block
+ // is to access the edited entity record for the associated Navigation Menu record.
+ const editedMenuRecord = await page.evaluate( ( menuId ) => {
+ return window.wp.data
+ .select( 'core' )
+ .getEditedEntityRecord( 'postType', 'wp_navigation', menuId );
+ }, createdMenu?.id );
+
+ // The 2nd block in the Navigation block is the Search block.
+ const searchBlockAttributes = editedMenuRecord.blocks[ 1 ].attributes;
+
+ expect( searchBlockAttributes ).toMatchObject( {
+ showLabel: false,
+ buttonUseIcon: true,
+ buttonPosition: 'button-inside',
+ } );
+ } );
+} );
diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js
index 302bac732023c5..0b445aee451c66 100644
--- a/test/e2e/specs/editor/plugins/block-variations.spec.js
+++ b/test/e2e/specs/editor/plugins/block-variations.spec.js
@@ -89,7 +89,7 @@ test.describe( 'Block variations', () => {
await page.keyboard.press( 'Enter' );
await expect(
- editor.canvas.getByRole( 'document', { name: 'Paragraph block' } )
+ editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
).toHaveText( 'This is a success message!' );
} );
diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js
index 9af8e6570eef32..b3b5ed68f66f11 100644
--- a/test/e2e/specs/editor/plugins/hooks-api.spec.js
+++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js
@@ -41,7 +41,7 @@ test.describe( 'Using Hooks API', () => {
await page.keyboard.type( 'First paragraph' );
const paragraphBlock = editor.canvas.locator(
- 'role=document[name="Paragraph block"i]'
+ 'role=document[name="Block: Paragraph"i]'
);
await expect( paragraphBlock ).toHaveText( 'First paragraph' );
await page.click(
diff --git a/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js
new file mode 100644
index 00000000000000..b4f502b2c9d0ba
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed block editor settings styles', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activatePlugin(
+ 'gutenberg-test-iframed-enqueue-block-editor-settings'
+ );
+ } );
+
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deactivatePlugin(
+ 'gutenberg-test-iframed-enqueue-block-editor-settings'
+ );
+ } );
+
+ test( 'should load styles added through block editor settings', async ( {
+ editor,
+ page,
+ } ) => {
+ const defaultBlock = editor.canvas.getByRole( 'button', {
+ name: 'Add default block',
+ } );
+
+ // Expect a red border (added in PHP).
+ await expect( defaultBlock ).toHaveCSS(
+ 'border-color',
+ 'rgb(255, 0, 0)'
+ );
+
+ await page.evaluate( () => {
+ const settings = window.wp.data
+ .select( 'core/editor' )
+ .getEditorSettings();
+ window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+ ...settings,
+ styles: [
+ ...settings.styles,
+ {
+ css: 'p { border-width: 2px; }',
+ __unstableType: 'plugin',
+ },
+ ],
+ } );
+ } );
+
+ // Expect a 2px border (added in JS).
+ await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' );
+ } );
+
+ test( 'should load theme styles added through block editor settings', async ( {
+ editor,
+ page,
+ } ) => {
+ const defaultBlock = editor.canvas.getByRole( 'button', {
+ name: 'Add default block',
+ } );
+
+ await page.evaluate( () => {
+ // Make sure that theme styles are added even if the theme styles
+ // preference is off.
+ window.wp.data
+ .dispatch( 'core/edit-post' )
+ .toggleFeature( 'themeStyles' );
+ const settings = window.wp.data
+ .select( 'core/editor' )
+ .getEditorSettings();
+ window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+ ...settings,
+ styles: [
+ ...settings.styles,
+ {
+ css: 'p { border-width: 2px; }',
+ __unstableType: 'theme',
+ },
+ ],
+ } );
+ } );
+
+ // Expect a 1px border because theme styles are disabled.
+ await expect( defaultBlock ).toHaveCSS( 'border-width', '1px' );
+
+ await page.evaluate( () => {
+ // Now enable theme styles.
+ window.wp.data
+ .dispatch( 'core/edit-post' )
+ .toggleFeature( 'themeStyles' );
+ } );
+
+ // Expect a 2px border because theme styles are enabled.
+ await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' );
+ } );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js b/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js
index 391e1fdc17ec72..a523ba1f8e9e3d 100644
--- a/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js
+++ b/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js
@@ -3,7 +3,7 @@
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-test.describe( 'iframed inline styles', () => {
+test.describe( 'iframed enqueue block assets', () => {
test.beforeAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.activateTheme( 'emptytheme' ),
diff --git a/test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js b/test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js
new file mode 100644
index 00000000000000..8fa4cbffa9df8c
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed inline styles', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activatePlugin(
+ 'gutenberg-test-iframed-inline-styles'
+ );
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deactivatePlugin(
+ 'gutenberg-test-iframed-inline-styles'
+ );
+ } );
+
+ test( 'should load inline styles in iframe', async ( {
+ admin,
+ editor,
+ page,
+ } ) => {
+ let hasWarning;
+ page.on( 'console', ( msg ) => {
+ if ( msg.type() === 'warning' ) {
+ hasWarning = true;
+ }
+ } );
+
+ await admin.createNewPost( { postType: 'page' } );
+ await editor.insertBlock( { name: 'test/iframed-inline-styles' } );
+
+ const block = editor.canvas.getByRole( 'document', {
+ name: 'Block: Iframed Inline Styles',
+ } );
+ await expect( block ).toBeVisible();
+
+ // Inline styles of properly enqueued stylesheet should load.
+ await expect( block ).toHaveCSS( 'padding', '20px' );
+
+ // Inline styles of stylesheet loaded with the compatibility layer should load.
+ await expect( block ).toHaveCSS( 'border-width', '2px' );
+ expect( hasWarning ).toBe( true );
+ } );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js b/test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js
new file mode 100644
index 00000000000000..edc6b0a68cd4ab
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed masonry block', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activatePlugin(
+ 'gutenberg-test-iframed-masonry-block'
+ );
+ } );
+
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deactivatePlugin(
+ 'gutenberg-test-iframed-masonry-block'
+ );
+ } );
+
+ test( 'should load script and dependencies in iframe', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( { name: 'test/iframed-masonry-block' } );
+
+ const masonry = editor.canvas.getByRole( 'document', {
+ name: 'Block: Iframed Masonry Block',
+ } );
+ await expect( masonry ).toBeVisible();
+
+ const masonryBox = await masonry.boundingBox();
+
+ // Expect Masonry to set a non-zero height.
+ expect( masonryBox.height ).toBeGreaterThan( 0 );
+
+ // Expect Masonry to absolute position items.
+ await expect( masonry.locator( '.grid-item' ).first() ).toHaveCSS(
+ 'position',
+ 'absolute'
+ );
+ } );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js b/test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js
new file mode 100644
index 00000000000000..2e6f5b6b0cb6a0
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed multiple block stylesheets', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activatePlugin(
+ 'gutenberg-test-iframed-multiple-stylesheets'
+ );
+ } );
+
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost( { postType: 'page' } );
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deactivatePlugin(
+ 'gutenberg-test-iframed-multiple-stylesheets'
+ );
+ } );
+
+ test( 'should load multiple block stylesheets in iframe', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'test/iframed-multiple-stylesheets',
+ } );
+ const block = editor.canvas.getByRole( 'document', {
+ name: 'Block: Iframed Multiple Stylesheets',
+ } );
+
+ await expect( block ).toBeVisible();
+
+ // Style loaded from the main stylesheet.
+ await expect( block ).toHaveCSS( 'border-style', 'dashed' );
+ // Style loaded from the additional stylesheet.
+ await expect( block ).toHaveCSS( 'border-color', 'rgb(255, 0, 0)' );
+ // Style loaded from the a stylesheet using path instead of handle.
+ await expect( block ).toHaveCSS( 'border-color', 'rgb(255, 0, 0)' );
+ } );
+} );
diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
index 13720de509e3c8..c5eafdafe918db 100644
--- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
+++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
@@ -20,31 +20,26 @@ test.describe( 'WP Editor Meta Boxes', () => {
await admin.createNewPost();
// Add title to enable valid non-empty post save.
- await editor.canvas.type(
- 'role=textbox[name="Add title"i]',
- 'Hello Meta'
- );
+ await editor.canvas
+ .locator( 'role=textbox[name="Add title"i]' )
+ .type( 'Hello Meta' );
- // Type something.
- await page.click( 'role=button[name="Text"i]' );
- await page.click( '#test_tinymce_id' );
- await page.keyboard.type( 'Typing in a metabox' );
- await page.type( '#test_tinymce_id-html', 'Typing in a metabox' );
- await page.click( 'role=button[name="Visual"i]' );
+ // Switch tinymce to Text mode, first waiting for it to initialize
+ // because otherwise it will flip back to Visual mode once initialized.
+ await page.locator( '#test_tinymce_id_ifr' ).waitFor();
+ await page.locator( 'role=button[name="Text"i]' ).click();
- await editor.publishPost();
+ // Type something in the tinymce Text mode textarea.
+ const metaBoxField = page.locator( '#test_tinymce_id' );
+ await metaBoxField.type( 'Typing in a metabox' );
- // Close the publish panel so that it won't cover the tinymce editor.
- await page.click(
- 'role=region[name="Editor publish"i] >> role=button[name="Close panel"i]'
- );
+ // Switch tinymce back to Visual mode.
+ await page.locator( 'role=button[name="Visual"i]' ).click();
- await expect( page.locator( '.edit-post-layout' ) ).toBeVisible();
-
- await page.click( 'role=button[name="Text"i]' );
+ await editor.publishPost();
+ await page.reload();
- // Expect the typed text on the tinymce editor
- const content = page.locator( '#test_tinymce_id' );
- await expect( content ).toHaveValue( 'Typing in a metabox' );
+ // Expect the typed text in the tinymce Text mode textarea.
+ await expect( metaBoxField ).toHaveValue( 'Typing in a metabox' );
} );
} );
diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js
index 084cd008cdc44c..9346412c46bcb2 100644
--- a/test/e2e/specs/editor/various/block-deletion.spec.js
+++ b/test/e2e/specs/editor/various/block-deletion.spec.js
@@ -30,7 +30,7 @@ test.describe( 'Block deletion', () => {
await expect(
editor.canvas
.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} )
.last()
).toBeFocused();
@@ -78,7 +78,7 @@ test.describe( 'Block deletion', () => {
// Select the paragraph.
const paragraph = editor.canvas.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} );
await editor.selectBlocks( paragraph );
@@ -128,7 +128,7 @@ test.describe( 'Block deletion', () => {
await expect(
editor.canvas
.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} )
.last()
).toBeFocused();
@@ -307,7 +307,7 @@ test.describe( 'Block deletion', () => {
} );
await expect(
editor.canvas.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} )
).toBeFocused();
diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js
index 481c476ac065bd..67a7f0357bc2a7 100644
--- a/test/e2e/specs/editor/various/block-locking.spec.js
+++ b/test/e2e/specs/editor/various/block-locking.spec.js
@@ -104,7 +104,7 @@ test.describe( 'Block Locking', () => {
} );
const paragraph = editor.canvas.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} );
await paragraph.click();
diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js
index 8568258aaa4fda..1c8a958b23fd41 100644
--- a/test/e2e/specs/editor/various/block-renaming.spec.js
+++ b/test/e2e/specs/editor/various/block-renaming.spec.js
@@ -58,12 +58,16 @@ test.describe( 'Block Renaming', () => {
name: 'Rename',
} );
- // Check focus is transferred into modal.
- await expect( renameModal ).toBeFocused();
-
// Check the Modal is perceivable.
await expect( renameModal ).toBeVisible();
+ const nameInput = renameModal.getByRole( 'textbox', {
+ name: 'Block name',
+ } );
+
+ // Check focus is transferred into the input within the Modal.
+ await expect( nameInput ).toBeFocused();
+
const saveButton = renameModal.getByRole( 'button', {
name: 'Save',
type: 'submit',
@@ -71,8 +75,6 @@ test.describe( 'Block Renaming', () => {
await expect( saveButton ).toBeDisabled();
- const nameInput = renameModal.getByLabel( 'Block name' );
-
await expect( nameInput ).toHaveAttribute( 'placeholder', 'Group' );
await nameInput.fill( 'My new name' );
diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js
index d6ea152d65f3ff..03282357a72b65 100644
--- a/test/e2e/specs/editor/various/content-only-lock.spec.js
+++ b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -25,8 +25,53 @@ test.describe( 'Content-only lock', () => {
await pageUtils.pressKeys( 'secondary+M' );
await page.waitForSelector( 'iframe[name="editor-canvas"]' );
- await editor.canvas.click( 'role=document[name="Paragraph block"i]' );
+ await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
await page.keyboard.type( ' World' );
expect( await editor.getEditedPostContent() ).toMatchSnapshot();
} );
+
+ // See: https://github.com/WordPress/gutenberg/pull/54618
+ test( 'should be able to edit the content of deeply nested blocks', async ( {
+ editor,
+ page,
+ pageUtils,
+ } ) => {
+ // Add content only locked block in the code editor
+ await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+ await page.getByPlaceholder( 'Start writing with text or HTML' )
+ .fill( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Hello</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->` );
+
+ await pageUtils.pressKeys( 'secondary+M' );
+ await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+ await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
+ await page.keyboard.type( ' WP' );
+ await expect.poll( editor.getBlocks ).toMatchObject( [
+ {
+ name: 'core/group',
+ attributes: {
+ layout: { type: 'constrained' },
+ templateLock: 'contentOnly',
+ },
+ innerBlocks: [
+ {
+ name: 'core/group',
+ attributes: { layout: { type: 'constrained' } },
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ attributes: { content: 'Hello WP' },
+ },
+ ],
+ },
+ ],
+ },
+ ] );
+ } );
} );
diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js
index cd5fa12fca6f4d..2d95e3bdefe975 100644
--- a/test/e2e/specs/editor/various/draggable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js
@@ -43,7 +43,7 @@ test.describe( 'Draggable block', () => {
<!-- /wp:paragraph -->` );
await editor.canvas.focus(
- 'role=document[name="Paragraph block"i] >> text=2'
+ 'role=document[name="Block: Paragraph"i] >> text=2'
);
await editor.showBlockToolbar();
@@ -57,7 +57,7 @@ test.describe( 'Draggable block', () => {
// Move to and hover on the upper half of the paragraph block to trigger the indicator.
const firstParagraph = editor.canvas.locator(
- 'role=document[name="Paragraph block"i] >> text=1'
+ 'role=document[name="Block: Paragraph"i] >> text=1'
);
const firstParagraphBound = await firstParagraph.boundingBox();
// Call the move function twice to make sure the `dragOver` event is sent.
@@ -115,7 +115,7 @@ test.describe( 'Draggable block', () => {
<!-- /wp:paragraph -->` );
await editor.canvas.focus(
- 'role=document[name="Paragraph block"i] >> text=1'
+ 'role=document[name="Block: Paragraph"i] >> text=1'
);
await editor.showBlockToolbar();
@@ -129,7 +129,7 @@ test.describe( 'Draggable block', () => {
// Move to and hover on the bottom half of the paragraph block to trigger the indicator.
const secondParagraph = editor.canvas.locator(
- 'role=document[name="Paragraph block"i] >> text=2'
+ 'role=document[name="Block: Paragraph"i] >> text=2'
);
const secondParagraphBound = await secondParagraph.boundingBox();
// Call the move function twice to make sure the `dragOver` event is sent.
@@ -198,7 +198,7 @@ test.describe( 'Draggable block', () => {
} );
await editor.canvas.focus(
- 'role=document[name="Paragraph block"i] >> text=2'
+ 'role=document[name="Block: Paragraph"i] >> text=2'
);
await editor.showBlockToolbar();
@@ -212,7 +212,7 @@ test.describe( 'Draggable block', () => {
// Move to and hover on the left half of the paragraph block to trigger the indicator.
const firstParagraph = editor.canvas.locator(
- 'role=document[name="Paragraph block"i] >> text=1'
+ 'role=document[name="Block: Paragraph"i] >> text=1'
);
const firstParagraphBound = await firstParagraph.boundingBox();
// Call the move function twice to make sure the `dragOver` event is sent.
@@ -279,7 +279,7 @@ test.describe( 'Draggable block', () => {
} );
await editor.canvas.focus(
- 'role=document[name="Paragraph block"i] >> text=1'
+ 'role=document[name="Block: Paragraph"i] >> text=1'
);
await editor.showBlockToolbar();
@@ -293,7 +293,7 @@ test.describe( 'Draggable block', () => {
// Move to and hover on the right half of the paragraph block to trigger the indicator.
const secondParagraph = editor.canvas.locator(
- 'role=document[name="Paragraph block"i] >> text=2'
+ 'role=document[name="Block: Paragraph"i] >> text=2'
);
const secondParagraphBound = await secondParagraph.boundingBox();
// Call the move function twice to make sure the `dragOver` event is sent.
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
index e024964831dfe7..e3aa17c5a101cb 100644
--- a/test/e2e/specs/editor/various/footnotes.spec.js
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -348,6 +348,7 @@ test.describe( 'Footnotes', () => {
await previewPage.close();
await editorPage.bringToFront();
+ await editor.canvas.click( 'p:text("first paragraph")' );
// Open revisions.
await editor.openDocumentSettingsSidebar();
@@ -391,9 +392,10 @@ test.describe( 'Footnotes', () => {
await page.keyboard.type( '1' );
- // Publish post.
- await editor.publishPost();
+ // Publish post with the footnote set to "1".
+ const postId = await editor.publishPost();
+ // Test previewing changes to meta.
await editor.canvas.click( 'ol.wp-block-footnotes li span' );
await page.keyboard.press( 'End' );
await page.keyboard.type( '2' );
@@ -408,8 +410,7 @@ test.describe( 'Footnotes', () => {
await previewPage.close();
await editorPage.bringToFront();
- // Test again, this time with an existing revision (different code
- // path).
+ // Test again, this time with an existing revision (different code path).
await editor.canvas.click( 'ol.wp-block-footnotes li span' );
await page.keyboard.press( 'End' );
// Test slashing.
@@ -421,5 +422,22 @@ test.describe( 'Footnotes', () => {
await expect(
previewPage2.locator( 'ol.wp-block-footnotes li' )
).toHaveText( '123″ ↩︎' );
+
+ // Verify that the published post is unchanged after previewing changes to meta.
+ await previewPage2.close();
+ await editorPage.bringToFront();
+ await editor.openDocumentSettingsSidebar();
+ await page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .getByRole( 'button', { name: 'Post' } )
+ .click();
+
+ // Visit the published post.
+ await page.goto( `/?p=${ postId }` );
+
+ // Verify that the published post footnote still says "1".
+ await expect( page.locator( 'ol.wp-block-footnotes li' ) ).toHaveText(
+ '1 ↩︎'
+ );
} );
} );
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
index 3a75c1842834c5..8d1f37187fee18 100644
--- a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
+++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
@@ -54,7 +54,7 @@ test.describe( 'Keep styles on block transforms', () => {
await pageUtils.pressKeys( 'shift+ArrowUp' );
await pageUtils.pressKeys( 'shift+ArrowUp' );
await page.click( 'role=radio[name="Large"i]' );
- await page.click( 'role=button[name="Paragraph"i]' );
+ await page.click( 'role=button[name="Multiple blocks selected"i]' );
await page.click( 'role=menuitem[name="Heading"i]' );
await expect.poll( editor.getBlocks ).toMatchObject( [
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
new file mode 100644
index 00000000000000..080abe011206a7
--- /dev/null
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -0,0 +1,276 @@
+/* eslint-disable playwright/expect-expect */
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+ KeyboardNavigableBlocks: async ( { editor, page, pageUtils }, use ) => {
+ await use( new KeyboardNavigableBlocks( { editor, page, pageUtils } ) );
+ },
+} );
+
+test.describe( 'Order of block keyboard navigation', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test( 'permits tabbing through paragraph blocks in the expected order', async ( {
+ editor,
+ KeyboardNavigableBlocks,
+ page,
+ } ) => {
+ const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
+
+ // Create 3 paragraphs blocks with some content.
+ for ( const paragraphBlock of paragraphBlocks ) {
+ await editor.insertBlock( { name: 'core/paragraph' } );
+ await page.keyboard.type( paragraphBlock );
+ }
+
+ // Select the middle block.
+ await page.keyboard.press( 'ArrowUp' );
+ await editor.showBlockToolbar();
+ await KeyboardNavigableBlocks.navigateToContentEditorTop();
+ await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
+
+ // Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
+ // This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
+ await KeyboardNavigableBlocks.navigateToContentEditorTop();
+ await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
+ } );
+
+ test( 'allows tabbing in navigation mode if no block is selected', async ( {
+ editor,
+ KeyboardNavigableBlocks,
+ page,
+ } ) => {
+ const paragraphBlocks = [ '0', '1' ];
+
+ // Create 2 paragraphs blocks with some content.
+ for ( const paragraphBlock of paragraphBlocks ) {
+ await editor.insertBlock( { name: 'core/paragraph' } );
+ await page.keyboard.type( paragraphBlock );
+ }
+
+ // Clear the selected block.
+ const paragraph = editor.canvas
+ .locator( '[data-type="core/paragraph"]' )
+ .getByText( '1' );
+ const box = await paragraph.boundingBox();
+ await page.mouse.click( box.x - 1, box.y );
+
+ await page.keyboard.press( 'Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
+
+ await page.keyboard.press( 'Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Paragraph Block. Row 1. 0'
+ );
+
+ await page.keyboard.press( 'Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Paragraph Block. Row 2. 1'
+ );
+
+ await page.keyboard.press( 'Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Post (selected)'
+ );
+ } );
+
+ test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
+ editor,
+ KeyboardNavigableBlocks,
+ page,
+ pageUtils,
+ } ) => {
+ const paragraphBlocks = [ '0', '1' ];
+
+ // Create 2 paragraphs blocks with some content.
+ for ( const paragraphBlock of paragraphBlocks ) {
+ await editor.insertBlock( { name: 'core/paragraph' } );
+ await page.keyboard.type( paragraphBlock );
+ }
+
+ // Clear the selected block.
+ const paragraph = editor.canvas
+ .locator( '[data-type="core/paragraph"]' )
+ .getByText( '1' );
+ const box = await paragraph.boundingBox();
+ await page.mouse.click( box.x - 1, box.y );
+
+ // Put focus behind the block list.
+ await page.evaluate( () => {
+ document
+ .querySelector( '.interface-interface-skeleton__sidebar' )
+ .focus();
+ } );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add block' );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Add default block'
+ );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Paragraph Block. Row 2. 1'
+ );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Paragraph Block. Row 1. 0'
+ );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
+ } );
+
+ test( 'should navigate correctly with multi selection', async ( {
+ editor,
+ KeyboardNavigableBlocks,
+ page,
+ pageUtils,
+ } ) => {
+ const paragraphBlocks = [ '0', '1', '2', '3' ];
+
+ // Create 4 paragraphs blocks with some content.
+ for ( const paragraphBlock of paragraphBlocks ) {
+ await editor.insertBlock( { name: 'core/paragraph' } );
+ await page.keyboard.type( paragraphBlock );
+ }
+ await page.keyboard.press( 'ArrowUp' );
+ await pageUtils.pressKeys( 'shift+ArrowUp' );
+
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Multiple selected blocks'
+ );
+
+ await page.keyboard.press( 'Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+ 'Multiple selected blocks'
+ );
+
+ await pageUtils.pressKeys( 'shift+Tab' );
+ await page.keyboard.press( 'ArrowRight' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Move up' );
+ } );
+
+ test( 'allows the first element within a block to receive focus', async ( {
+ editor,
+ KeyboardNavigableBlocks,
+ page,
+ } ) => {
+ // Insert a image block.
+ await editor.insertBlock( { name: 'core/image' } );
+
+ // Make sure the upload button has focus.
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Upload' );
+
+ // Try to focus the image block wrapper.
+ await page.keyboard.press( 'ArrowUp' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block: Image' );
+ } );
+
+ test( 'allows the block wrapper to gain focus for a group block instead of the first element', async ( {
+ editor,
+ KeyboardNavigableBlocks,
+ } ) => {
+ // Insert a group block.
+ await editor.insertBlock( { name: 'core/group' } );
+ // Select the default, selected Group layout from the variation picker.
+ const groupButton = editor.canvas.locator(
+ 'button[aria-label="Group: Gather blocks in a container."]'
+ );
+
+ await groupButton.click();
+
+ // If active label matches, that means focus did not change from group block wrapper.
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block: Group' );
+ } );
+} );
+
+class KeyboardNavigableBlocks {
+ constructor( { editor, page, pageUtils } ) {
+ this.editor = editor;
+ this.page = page;
+ this.pageUtils = pageUtils;
+ }
+
+ async expectLabelToHaveFocus( label ) {
+ const ariaLabel = await this.page.evaluate( () => {
+ const { activeElement } =
+ document.activeElement.contentDocument ?? document;
+ return (
+ activeElement.getAttribute( 'aria-label' ) ||
+ activeElement.innerText
+ );
+ } );
+
+ expect( ariaLabel ).toBe( label );
+ }
+
+ async navigateToContentEditorTop() {
+ // Use 'Ctrl+`' to return to the top of the editor.
+ await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
+ }
+
+ async tabThroughParagraphBlock( paragraphText ) {
+ await this.tabThroughBlockToolbar();
+
+ await this.page.keyboard.press( 'Tab' );
+ await this.expectLabelToHaveFocus( 'Block: Paragraph' );
+
+ const activeElement = this.editor.canvas.locator( ':focus' );
+
+ await expect( activeElement ).toHaveText( paragraphText );
+
+ await this.page.keyboard.press( 'Tab' );
+ await this.expectLabelToHaveFocus( 'Post' );
+
+ // Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
+ await this.pageUtils.pressKeys( 'shift+Tab' );
+ await this.expectLabelToHaveFocus( 'Block: Paragraph' );
+ }
+
+ async tabThroughBlockToolbar() {
+ await this.page.keyboard.press( 'Tab' );
+ await this.expectLabelToHaveFocus( 'Paragraph' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Move up' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Move down' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Align text' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Bold' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Italic' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Link' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'More' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Options' );
+
+ await this.page.keyboard.press( 'ArrowRight' );
+ await this.expectLabelToHaveFocus( 'Paragraph' );
+ }
+}
+
+/* eslint-enable playwright/expect-expect */
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
index 37dc300c2e39b4..7fd21085deae2a 100644
--- a/test/e2e/specs/editor/various/list-view.spec.js
+++ b/test/e2e/specs/editor/various/list-view.spec.js
@@ -275,7 +275,7 @@ test.describe( 'List View', () => {
} );
await expect(
editor.canvas.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} )
).toBeFocused();
@@ -322,12 +322,9 @@ test.describe( 'List View', () => {
// the sidebar.
await pageUtils.pressKeys( 'access+o' );
- // Focus should now be on the paragraph block since that is
- // where we opened the list view sidebar. This is not a perfect
- // solution, but current functionality prevents a better way at
- // the moment.
+ // Focus should now be on the list view toggle button.
await expect(
- editor.canvas.getByRole( 'document', { name: 'Paragraph block' } )
+ page.getByRole( 'button', { name: 'Document Overview' } )
).toBeFocused();
// List View should be closed.
diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
index 3f2c0e38d7b954..3374a13b98eb79 100644
--- a/test/e2e/specs/editor/various/multi-block-selection.spec.js
+++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -162,7 +162,7 @@ test.describe( 'Multi-block selection', () => {
} );
}
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '3' } )
.click();
@@ -262,7 +262,7 @@ test.describe( 'Multi-block selection', () => {
await page.keyboard.type( '2' );
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '1' } )
.click( { modifiers: [ 'Shift' ] } );
@@ -279,11 +279,11 @@ test.describe( 'Multi-block selection', () => {
.getByRole( 'button', { name: 'Group' } )
.click();
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '1' } )
.click();
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '2' } )
.click( { modifiers: [ 'Shift' ] } );
@@ -327,7 +327,7 @@ test.describe( 'Multi-block selection', () => {
} );
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.click( { modifiers: [ 'Shift' ] } );
await pageUtils.pressKeys( 'primary+a' );
await page.keyboard.type( 'new content' );
@@ -360,12 +360,12 @@ test.describe( 'Multi-block selection', () => {
} );
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: 'group' } )
.nth( 1 )
.click();
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: 'first' } )
.click( { modifiers: [ 'Shift' ] } );
@@ -389,7 +389,7 @@ test.describe( 'Multi-block selection', () => {
} );
const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} );
const { height } = await paragraphBlock.boundingBox();
await paragraphBlock.click( { position: { x: 0, y: height / 2 } } );
@@ -429,7 +429,7 @@ test.describe( 'Multi-block selection', () => {
await page.keyboard.press( 'ArrowDown' );
const [ paragraph1, paragraph2 ] = await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.all();
await paragraph1.hover();
@@ -466,7 +466,7 @@ test.describe( 'Multi-block selection', () => {
await page.keyboard.press( 'ArrowDown' );
const [ paragraph1, paragraph2 ] = await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.all();
await paragraph1.hover();
@@ -644,7 +644,7 @@ test.describe( 'Multi-block selection', () => {
}
const [ , paragraph2, paragraph3 ] = await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.all();
// Focus the last paragraph block and hide the block toolbar.
@@ -700,7 +700,7 @@ test.describe( 'Multi-block selection', () => {
const paragraph1 = editor.canvas
.getByRole( 'document', {
- name: 'Paragraph block',
+ name: 'Block: Paragraph',
} )
.filter( { hasText: '1' } );
await paragraph1.click( {
@@ -803,7 +803,7 @@ test.describe( 'Multi-block selection', () => {
} );
// Focus the last paragraph block.
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.nth( 1 )
.click();
@@ -1162,7 +1162,7 @@ test.describe( 'Multi-block selection', () => {
// Focus and move the caret to the right of the first paragraph.
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: 'a' } )
.click();
@@ -1200,7 +1200,7 @@ test.describe( 'Multi-block selection', () => {
} );
// Focus and move the caret to the end.
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: ']2' } )
.click();
@@ -1211,7 +1211,7 @@ test.describe( 'Multi-block selection', () => {
const strongBox = await strongText.boundingBox();
// Focus and move the caret to the end.
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.filter( { hasText: '1[' } )
.click( {
// Ensure clicking on the right half of the element.
@@ -1296,7 +1296,7 @@ test.describe( 'Multi-block selection', () => {
await page.keyboard.press( 'ArrowUp' );
await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
+ .getByRole( 'document', { name: 'Block: Paragraph' } )
.hover();
await page.mouse.down();
await editor.canvas
diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js
new file mode 100644
index 00000000000000..941ae7e910a9b2
--- /dev/null
+++ b/test/e2e/specs/editor/various/patterns.spec.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Unsynced pattern', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllBlocks();
+ await requestUtils.deleteAllPatternCategories();
+ } );
+
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test.afterEach( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllBlocks();
+ await requestUtils.deleteAllPatternCategories();
+ } );
+
+ test( 'create a new unsynced pattern via the block options menu', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: { content: 'A useful paragraph to reuse' },
+ } );
+ const before = await editor.getBlocks();
+
+ // Create an unsynced pattern from the paragraph block.
+ await editor.showBlockToolbar();
+ await page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', { name: 'Options' } )
+ .click();
+ await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
+
+ const createPatternDialog = page.getByRole( 'dialog', {
+ name: 'Create pattern',
+ } );
+ await createPatternDialog
+ .getByRole( 'textbox', { name: 'Name' } )
+ .fill( 'My unsynced pattern' );
+ const newCategory = 'Contact details';
+ await createPatternDialog
+ .getByRole( 'combobox', { name: 'Categories' } )
+ .fill( newCategory );
+ await createPatternDialog
+ .getByRole( 'checkbox', { name: 'Synced' } )
+ .setChecked( false );
+
+ await page.keyboard.press( 'Enter' );
+
+ // Check that the block content is still the same. If the pattern was added as synced
+ // the content would be wrapped by a pattern block.
+ await expect
+ .poll(
+ editor.getBlocks,
+ 'The block content should be the same after converting to an unsynced pattern'
+ )
+ .toEqual( before );
+
+ // Check that the new pattern is available in the inserter and that it gets inserted as
+ // a plain paragraph block.
+ await page.getByLabel( 'Toggle block inserter' ).click();
+ await page
+ .getByRole( 'tab', {
+ name: 'Patterns',
+ } )
+ .click();
+ await page
+ .getByRole( 'button', {
+ name: newCategory,
+ } )
+ .click();
+ await page.getByLabel( 'My unsynced pattern' ).click();
+
+ await expect
+ .poll( editor.getBlocks )
+ .toEqual( [ ...before, ...before ] );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
index d17cef9215f4ae..23186dfff2de96 100644
--- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -14,6 +14,10 @@ test.describe( 'Toolbar roving tabindex', () => {
await admin.createNewPost();
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'First block' );
+
+ // Ensure the fixed toolbar option is off.
+ // See: https://github.com/WordPress/gutenberg/pull/54785.
+ await editor.setIsFixedToolbar( false );
} );
test( 'ensures base block toolbars use roving tabindex', async ( {
@@ -26,14 +30,14 @@ test.describe( 'Toolbar roving tabindex', () => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Paragraph' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
- 'Paragraph block',
+ 'Block: Paragraph',
'Paragraph'
);
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
'Paragraph'
);
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
- 'Paragraph block',
+ 'Block: Paragraph',
'Paragraph'
);
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 44ffb33e7a00cf..81bbcbbc758b93 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -385,7 +385,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
// Should navigate to the next block.
await page.keyboard.press( 'ArrowDown' );
await expect(
- editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+ editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
).toHaveClass( /is-selected/ );
} );
@@ -805,7 +805,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
await page.keyboard.press( 'ArrowUp' );
const paragraphBlock = editor.canvas
- .locator( 'role=document[name="Paragraph block"i]' )
+ .locator( 'role=document[name="Block: Paragraph"i]' )
.first();
const paragraphRect = await paragraphBlock.boundingBox();
const x = paragraphRect.x + ( 2 * paragraphRect.width ) / 3;
@@ -870,7 +870,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
<!-- /wp:image -->` );
const paragraphBlock = editor.canvas.locator(
- 'role=document[name="Paragraph block"i]'
+ 'role=document[name="Block: Paragraph"i]'
);
// Find a point outside the paragraph between the blocks where it's
@@ -975,7 +975,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
await page.mouse.up();
await expect(
- editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+ editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
).toHaveClass( /is-selected/ );
} );
@@ -1037,7 +1037,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
// Expect the "." to be added at the start of the paragraph
await expect(
- editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+ editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
).toHaveText( /^\.a+$/ );
} );
@@ -1071,7 +1071,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
// Expect the "." to be added at the start of the paragraph
await expect(
- editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+ editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
).toHaveText( /^a+\.a$/ );
} );
@@ -1107,7 +1107,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
// Expect the "." to be added at the start of the paragraph
await expect(
editor.canvas.locator(
- 'role=document[name="Paragraph block"i] >> nth = 0'
+ 'role=document[name="Block: Paragraph"i] >> nth = 0'
)
).toHaveText( /^.a+$/ );
} );
diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
new file mode 100644
index 00000000000000..02717f1b194327
--- /dev/null
+++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Global styles sidebar', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme( 'emptytheme' );
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme( 'twentytwentyone' );
+ } );
+
+ test.beforeEach( async ( { admin, editor } ) => {
+ await admin.visitSiteEditor( {
+ postId: 'emptytheme//index',
+ postType: 'wp_template',
+ } );
+ await editor.canvas.click( 'body' );
+ } );
+
+ test( 'should filter blocks list results', async ( { page } ) => {
+ // Navigate to Styles -> Blocks.
+ await page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', { name: 'Styles' } )
+ .click();
+ await page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .getByRole( 'button', { name: 'Blocks styles' } )
+ .click();
+
+ await page
+ .getByRole( 'searchbox', { name: 'Search for blocks' } )
+ .fill( 'heading' );
+
+ // Matches both Heading and Table of Contents blocks.
+ // The latter contains "heading" in its description.
+ await expect(
+ page.getByRole( 'button', { name: 'Heading block styles' } )
+ ).toBeVisible();
+ await expect(
+ page.getByRole( 'button', {
+ name: 'Table of Contents block styles',
+ } )
+ ).toBeVisible();
+ } );
+} );
diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js
index 94bac47d0ecf58..3057feaf7772b0 100644
--- a/test/e2e/specs/site-editor/list-view.spec.js
+++ b/test/e2e/specs/site-editor/list-view.spec.js
@@ -107,11 +107,10 @@ test.describe( 'Site Editor List View', () => {
await pageUtils.pressKeys( 'access+o' );
await expect( listView ).not.toBeVisible();
- // Focus should now be on the Open Navigation button since that is
- // where we opened the list view sidebar. This is not a perfect
- // solution, but current functionality prevents a better way at
- // the moment.
- await expect( openNavigationButton ).toBeFocused();
+ // Focus should now be on the list view toggle button.
+ await expect(
+ page.getByRole( 'button', { name: 'List View' } )
+ ).toBeFocused();
// Open List View.
await pageUtils.pressKeys( 'access+o' );
@@ -131,6 +130,8 @@ test.describe( 'Site Editor List View', () => {
).toBeFocused();
await pageUtils.pressKeys( 'access+o' );
await expect( listView ).not.toBeVisible();
- await expect( openNavigationButton ).toBeFocused();
+ await expect(
+ page.getByRole( 'button', { name: 'List View' } )
+ ).toBeFocused();
} );
} );
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
index e6a0b7f266cbf4..d1f32b9f209d75 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -190,7 +190,7 @@ test.describe( 'Pages', () => {
await templateOptionsButton.click();
const resetButton = page
.getByRole( 'menu', { name: 'Template options' } )
- .getByText( 'Reset' );
+ .getByText( 'Use default template' );
await expect( resetButton ).toBeVisible();
await resetButton.click();
await expect( templateOptionsButton ).toHaveText( 'Single Entries' );
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
new file mode 100644
index 00000000000000..79bd8b782ecc41
--- /dev/null
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -0,0 +1,255 @@
+/**
+ * WordPress dependencies
+ */
+const {
+ test: base,
+ expect,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @type {ReturnType<typeof base.extend<{patterns: Patterns}>>} */
+const test = base.extend( {
+ patterns: async ( { page }, use ) => {
+ await use( new Patterns( { page } ) );
+ },
+} );
+
+test.describe( 'Patterns', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme( 'emptytheme' );
+ await requestUtils.deleteAllBlocks();
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme( 'twentytwentyone' );
+ } );
+
+ test.afterEach( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllBlocks();
+ } );
+
+ test( 'create a new pattern', async ( {
+ page,
+ editor,
+ admin,
+ patterns,
+ } ) => {
+ await admin.visitSiteEditor();
+
+ await patterns.navigation
+ .getByRole( 'button', { name: 'Patterns' } )
+ .click();
+
+ await expect(
+ patterns.navigation.getByRole( 'heading', {
+ name: 'Patterns',
+ level: 1,
+ } )
+ ).toBeVisible();
+ await expect( patterns.content ).toContainText( 'No patterns found.' );
+
+ await patterns.navigation
+ .getByRole( 'button', { name: 'Create pattern' } )
+ .click();
+
+ const createPatternMenu = page.getByRole( 'menu', {
+ name: 'Create pattern',
+ } );
+ await expect(
+ createPatternMenu.getByRole( 'menuitem', {
+ name: 'Create pattern',
+ } )
+ ).toBeFocused();
+ await createPatternMenu
+ .getByRole( 'menuitem', { name: 'Create pattern' } )
+ .click();
+
+ const createPatternDialog = page.getByRole( 'dialog', {
+ name: 'Create pattern',
+ } );
+ await createPatternDialog
+ .getByRole( 'textbox', { name: 'Name' } )
+ .fill( 'My pattern' );
+ await page.keyboard.press( 'Enter' );
+ await expect(
+ createPatternDialog.getByRole( 'button', { name: 'Create' } )
+ ).toBeDisabled();
+
+ await expect( page ).toHaveTitle( /^My pattern/ );
+ await expect(
+ page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'heading', { name: 'My pattern', level: 1 } )
+ ).toBeVisible();
+
+ await editor.canvas
+ .getByRole( 'button', { name: 'Add default block' } )
+ .click();
+ await page.keyboard.type( 'My pattern' );
+
+ await page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', { name: 'Save' } )
+ .click();
+ await page
+ .getByRole( 'region', { name: 'Save panel' } )
+ .getByRole( 'button', { name: 'Save' } )
+ .click();
+ await expect(
+ page.getByRole( 'button', { name: 'Dismiss this notice' } )
+ ).toContainText( 'Site updated' );
+
+ await page.getByRole( 'button', { name: 'Open navigation' } ).click();
+ await patterns.navigation
+ .getByRole( 'button', { name: 'Back' } )
+ .click();
+ // TODO: await expect( page ).toHaveTitle( /^Patterns/ );
+
+ await expect(
+ patterns.navigation.getByRole( 'button', {
+ name: 'All patterns',
+ } )
+ ).toContainText( '1' );
+ await expect(
+ patterns.navigation.getByRole( 'button', {
+ name: 'My patterns',
+ } )
+ ).toContainText( '1' );
+ await expect(
+ patterns.navigation.getByRole( 'button', {
+ name: 'Uncategorized',
+ } )
+ ).toContainText( '1' );
+
+ await expect(
+ patterns.content.getByRole( 'heading', {
+ name: 'All patterns',
+ level: 2,
+ } )
+ ).toBeVisible();
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 1 );
+ await expect(
+ patterns.list
+ .getByRole( 'heading', { name: 'My pattern' } )
+ .getByRole( 'button', { name: 'My pattern', exact: true } )
+ ).toBeVisible();
+ } );
+
+ test( 'search and filter patterns', async ( {
+ admin,
+ requestUtils,
+ patterns,
+ } ) => {
+ await Promise.all( [
+ requestUtils.createBlock( {
+ title: 'Unsynced header',
+ meta: { wp_pattern_sync_status: 'unsynced' },
+ status: 'publish',
+ content: `<!-- wp:heading -->\n<h2>Unsynced header</h2>\n<!-- /wp:heading -->`,
+ wp_pattern_category: [],
+ } ),
+ requestUtils.createBlock( {
+ title: 'Unsynced footer',
+ meta: { wp_pattern_sync_status: 'unsynced' },
+ status: 'publish',
+ content: `<!-- wp:paragraph -->\n<p>Unsynced footer</p>\n<!-- /wp:paragraph -->`,
+ wp_pattern_category: [],
+ } ),
+ requestUtils.createBlock( {
+ title: 'Synced footer',
+ status: 'publish',
+ content: `<!-- wp:paragraph -->\n<p>Synced footer</p>\n<!-- /wp:paragraph -->`,
+ wp_pattern_category: [],
+ } ),
+ ] );
+
+ await admin.visitSiteEditor( { path: '/patterns' } );
+
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 3 );
+
+ await patterns.content
+ .getByRole( 'searchbox', { name: 'Search patterns' } )
+ .fill( 'footer' );
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 2 );
+ expect(
+ await patterns.list
+ .getByRole( 'listitem' )
+ .getByRole( 'heading' )
+ .allInnerTexts()
+ ).toEqual(
+ expect.arrayContaining( [ 'Unsynced footer', 'Synced footer' ] )
+ );
+
+ const searchBox = patterns.content.getByRole( 'searchbox', {
+ name: 'Search patterns',
+ } );
+
+ await searchBox.fill( 'no match' );
+ await expect( patterns.content ).toContainText( 'No patterns found.' );
+
+ await patterns.content
+ .getByRole( 'button', { name: 'Reset search' } )
+ .click();
+ await expect( searchBox ).toHaveValue( '' );
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 3 );
+
+ const syncFilter = patterns.content.getByRole( 'radiogroup', {
+ name: 'Filter by sync status',
+ } );
+ await expect(
+ syncFilter.getByRole( 'radio', { name: 'All' } )
+ ).toBeChecked();
+
+ await syncFilter
+ .getByRole( 'radio', { name: 'Synced', exact: true } )
+ .click();
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 1 );
+ await expect( patterns.list.getByRole( 'listitem' ) ).toContainText(
+ 'Synced footer'
+ );
+
+ await syncFilter.getByRole( 'radio', { name: 'Not synced' } ).click();
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 2 );
+ expect(
+ await patterns.list
+ .getByRole( 'listitem' )
+ .getByRole( 'heading' )
+ .allInnerTexts()
+ ).toEqual(
+ expect.arrayContaining( [ 'Unsynced header', 'Unsynced footer' ] )
+ );
+
+ await searchBox.fill( 'footer' );
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 1 );
+ await expect( patterns.list.getByRole( 'listitem' ) ).toContainText(
+ 'Unsynced footer'
+ );
+
+ await syncFilter.getByRole( 'radio', { name: 'All' } ).click();
+ await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 2 );
+ expect(
+ await patterns.list
+ .getByRole( 'listitem' )
+ .getByRole( 'heading' )
+ .allInnerTexts()
+ ).toEqual(
+ expect.arrayContaining( [ 'Unsynced footer', 'Synced footer' ] )
+ );
+ } );
+} );
+
+class Patterns {
+ /** @type {import('@playwright/test').Page} */
+ #page;
+
+ constructor( { page } ) {
+ this.#page = page;
+
+ this.content = this.#page.getByRole( 'region', {
+ name: 'Patterns content',
+ } );
+ this.navigation = this.#page.getByRole( 'region', {
+ name: 'Navigation',
+ } );
+ this.list = this.content.getByRole( 'list' );
+ }
+}
diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js
index d9c63a1da1ddc5..f9681a5ea2d46f 100644
--- a/test/e2e/specs/site-editor/writing-flow.spec.js
+++ b/test/e2e/specs/site-editor/writing-flow.spec.js
@@ -66,7 +66,7 @@ test.describe( 'Site editor writing flow', () => {
// Tab to the inspector, tabbing three times to go past the two resize handles.
await pageUtils.pressKeys( 'Tab', { times: 3 } );
const inspectorTemplateTab = page.locator(
- 'role=region[name="Editor settings"i] >> role=button[name="Template"i]'
+ 'role=region[name="Editor settings"i] >> role=button[name="Template part"i]'
);
await expect( inspectorTemplateTab ).toBeFocused();
} );
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index d51d5cffbebb2b..e771c92fc24eef 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -147,7 +147,7 @@ test.describe( 'Widgets Customizer', () => {
// Go back to the widgets editor.
await backButton.click();
await expect( widgetsFooter1Heading ).toBeVisible();
- await expect( inspectorHeading ).not.toBeVisible();
+ await expect( inspectorHeading ).toBeHidden();
await editor.clickBlockToolbarButton( 'Options' );
await showMoreSettingsButton.click();
@@ -161,7 +161,7 @@ test.describe( 'Widgets Customizer', () => {
// Go back to the widgets editor.
await expect( widgetsFooter1Heading ).toBeVisible();
- await expect( inspectorHeading ).not.toBeVisible();
+ await expect( inspectorHeading ).toBeHidden();
} );
test( 'should handle the inserter outer section', async ( {
@@ -207,11 +207,11 @@ test.describe( 'Widgets Customizer', () => {
await expect( publishSettings ).toBeVisible();
// Expect the inserter outer section to be closed.
- await expect( inserterHeading ).not.toBeVisible();
+ await expect( inserterHeading ).toBeHidden();
// Focus the block and start typing to hide the block toolbar.
// Shouldn't be needed if we automatically hide the toolbar on blur.
- await page.focus( 'role=document[name="Paragraph block"i]' );
+ await page.focus( 'role=document[name="Block: Paragraph"i]' );
await page.keyboard.type( ' ' );
// Open the inserter outer section.
@@ -226,7 +226,7 @@ test.describe( 'Widgets Customizer', () => {
await page.click( 'role=button[name=/Back$/] >> visible=true' );
// Expect the inserter outer section to be closed.
- await expect( inserterHeading ).not.toBeVisible();
+ await expect( inserterHeading ).toBeHidden();
} );
test( 'should move focus to the block', async ( {
@@ -262,7 +262,7 @@ test.describe( 'Widgets Customizer', () => {
await editParagraphWidget.click();
const firstParagraphBlock = page.locator(
- 'role=document[name="Paragraph block"i] >> text="First Paragraph"'
+ 'role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
);
await expect( firstParagraphBlock ).toBeFocused();
@@ -315,7 +315,7 @@ test.describe( 'Widgets Customizer', () => {
await page.click(
'role=heading[name="Customizing ▸ Widgets Footer #1"i][level=3]'
);
- await expect( blockToolbar ).not.toBeVisible();
+ await expect( blockToolbar ).toBeHidden();
await paragraphBlock.focus();
await editor.showBlockToolbar();
@@ -324,7 +324,7 @@ test.describe( 'Widgets Customizer', () => {
// Expect clicking on the preview iframe should clear the selection.
{
await page.click( '#customize-preview' );
- await expect( blockToolbar ).not.toBeVisible();
+ await expect( blockToolbar ).toBeHidden();
await paragraphBlock.focus();
await editor.showBlockToolbar();
@@ -339,7 +339,7 @@ test.describe( 'Widgets Customizer', () => {
const { x, y, width, height } = await editorContainer.boundingBox();
// Simulate Clicking on the empty space at the end of the editor.
await page.mouse.click( x + width / 2, y + height + 10 );
- await expect( blockToolbar ).not.toBeVisible();
+ await expect( blockToolbar ).toBeHidden();
}
} );
@@ -460,7 +460,7 @@ test.describe( 'Widgets Customizer', () => {
// Expect pressing the Escape key to close the dropdown,
// but not close the editor.
await page.keyboard.press( 'Escape' );
- await expect( optionsMenu ).not.toBeVisible();
+ await expect( optionsMenu ).toBeHidden();
await expect( paragraphBlock ).toBeVisible();
await paragraphBlock.focus();
@@ -496,7 +496,7 @@ test.describe( 'Widgets Customizer', () => {
// Refocus the paragraph block.
await page.focus(
- '*role=document[name="Paragraph block"i] >> text="First Paragraph"'
+ '*role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
);
await editor.clickBlockToolbarButton( 'Move to widget area' );
@@ -511,7 +511,7 @@ test.describe( 'Widgets Customizer', () => {
// The paragraph block should be moved to the new sidebar and have focus.
const movedParagraphBlock = page.locator(
- '*role=document[name="Paragraph block"i] >> text="First Paragraph"'
+ '*role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
);
await expect( movedParagraphBlock ).toBeVisible();
await expect( movedParagraphBlock ).toBeFocused();
@@ -528,7 +528,7 @@ test.describe( 'Widgets Customizer', () => {
// integrate the G sidebar inside the customizer.
await expect(
page.locator( 'role=heading[name=/Block Settings/][level=3]' )
- ).not.toBeVisible();
+ ).toBeHidden();
} );
test( 'should stay in block settings after making a change in that area', async ( {
@@ -554,7 +554,7 @@ test.describe( 'Widgets Customizer', () => {
).toBeDisabled();
// Select the paragraph block
- await page.focus( 'role=document[name="Paragraph block"i]' );
+ await page.focus( 'role=document[name="Block: Paragraph"i]' );
// Click the three dots button, then click "Show More Settings".
await editor.clickBlockToolbarButton( 'Options' );
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
index 178a57b8755535..121382d942f268 100644
--- a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
+++ b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -68,7 +68,7 @@ exports[`Blocks raw handling pasteHandler should strip windows data 1`] = `
<!-- /wp:paragraph -->"
`;
-exports[`Blocks raw handling pasteHandler slack-paragraphs 1`] = `"test with <a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a><br>a new linea new paragraph<br>another new lineanother paragraph"`;
+exports[`Blocks raw handling pasteHandler slack-paragraphs 1`] = `"test with <a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a><br>a new line<br><br>a new paragraph<br>another new line<br><br>another paragraph"`;
exports[`Blocks raw handling pasteHandler slack-quote 1`] = `"Test with <a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a>."`;
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.html b/test/integration/fixtures/blocks/core__cover__deprecated-12.html
new file mode 100644
index 00000000000000..1ae933aed80105
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"customOverlayColor":"#3615d9","layout":{"type":"constrained"}} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#3615d9"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+ <p class="has-text-align-center has-large-font-size"></p>
+ <!-- /wp:paragraph --></div></div>
+ <!-- /wp:cover -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.json b/test/integration/fixtures/blocks/core__cover__deprecated-12.json
new file mode 100644
index 00000000000000..5991bbfd165bfb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.json
@@ -0,0 +1,35 @@
+[
+ {
+ "name": "core/cover",
+ "isValid": true,
+ "attributes": {
+ "alt": "",
+ "hasParallax": false,
+ "isRepeated": false,
+ "dimRatio": 50,
+ "customOverlayColor": "#3615d9",
+ "backgroundType": "image",
+ "isDark": true,
+ "useFeaturedImage": true,
+ "tagName": "div",
+ "layout": {
+ "type": "constrained"
+ },
+ "isUserOverlayColor": true
+ },
+ "innerBlocks": [
+ {
+ "name": "core/paragraph",
+ "isValid": true,
+ "attributes": {
+ "align": "center",
+ "content": "",
+ "dropCap": false,
+ "placeholder": "Write title…",
+ "fontSize": "large"
+ },
+ "innerBlocks": []
+ }
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.parsed.json b/test/integration/fixtures/blocks/core__cover__deprecated-12.parsed.json
new file mode 100644
index 00000000000000..f4e2e302cf52e7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.parsed.json
@@ -0,0 +1,34 @@
+[
+ {
+ "blockName": "core/cover",
+ "attrs": {
+ "useFeaturedImage": true,
+ "dimRatio": 50,
+ "customOverlayColor": "#3615d9",
+ "layout": {
+ "type": "constrained"
+ }
+ },
+ "innerBlocks": [
+ {
+ "blockName": "core/paragraph",
+ "attrs": {
+ "align": "center",
+ "placeholder": "Write title…",
+ "fontSize": "large"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\t<p class=\"has-text-align-center has-large-font-size\"></p>\n\t",
+ "innerContent": [
+ "\n\t<p class=\"has-text-align-center has-large-font-size\"></p>\n\t"
+ ]
+ }
+ ],
+ "innerHTML": "\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#3615d9\"></span><div class=\"wp-block-cover__inner-container\"></div></div>\n\t",
+ "innerContent": [
+ "\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#3615d9\"></span><div class=\"wp-block-cover__inner-container\">",
+ null,
+ "</div></div>\n\t"
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-12.serialized.html
new file mode 100644
index 00000000000000..d51734e18a5418
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"customOverlayColor":"#3615d9","isUserOverlayColor":true,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#3615d9"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__solid-color.json b/test/integration/fixtures/blocks/core__cover__solid-color.json
index 8ddbe7fdbdc7ed..4d06b3e616e164 100644
--- a/test/integration/fixtures/blocks/core__cover__solid-color.json
+++ b/test/integration/fixtures/blocks/core__cover__solid-color.json
@@ -3,7 +3,6 @@
"name": "core/cover",
"isValid": true,
"attributes": {
- "useFeaturedImage": false,
"alt": "",
"hasParallax": false,
"isRepeated": false,
@@ -11,7 +10,9 @@
"overlayColor": "primary",
"backgroundType": "image",
"isDark": true,
- "tagName": "div"
+ "useFeaturedImage": false,
+ "tagName": "div",
+ "isUserOverlayColor": true
},
"innerBlocks": [
{
diff --git a/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html b/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html
index 4ac6a07e4769d0..333fb817b7283f 100644
--- a/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"overlayColor":"primary"} -->
+<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.json b/test/integration/fixtures/blocks/core__cover__video-overlay.json
index 7adcdedd68754b..7916e3f7a20b6e 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.json
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.json
@@ -4,7 +4,6 @@
"isValid": true,
"attributes": {
"url": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
- "useFeaturedImage": false,
"alt": "",
"hasParallax": false,
"isRepeated": false,
@@ -12,7 +11,9 @@
"customOverlayColor": "#3615d9",
"backgroundType": "video",
"isDark": true,
- "tagName": "div"
+ "useFeaturedImage": false,
+ "tagName": "div",
+ "isUserOverlayColor": true
},
"innerBlocks": [
{
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html b/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html
index cf13928cd9d204..3cbf472fe84c4a 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":10,"customOverlayColor":"#3615d9","backgroundType":"video"} -->
+<!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":10,"customOverlayColor":"#3615d9","isUserOverlayColor":true,"backgroundType":"video"} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim" style="background-color:#3615d9"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">
Guten Berg!
diff --git a/test/integration/fixtures/blocks/core__social-link-x.html b/test/integration/fixtures/blocks/core__social-link-x.html
new file mode 100644
index 00000000000000..a587f2d0962f6a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.html
@@ -0,0 +1 @@
+<!-- wp:social-link-x {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-x.json b/test/integration/fixtures/blocks/core__social-link-x.json
new file mode 100644
index 00000000000000..d0cf492d2aa03e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.json
@@ -0,0 +1,11 @@
+[
+ {
+ "name": "core/social-link",
+ "isValid": true,
+ "attributes": {
+ "url": "https://example.com/",
+ "service": "x"
+ },
+ "innerBlocks": []
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-x.parsed.json b/test/integration/fixtures/blocks/core__social-link-x.parsed.json
new file mode 100644
index 00000000000000..2119720f5db0f5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.parsed.json
@@ -0,0 +1,11 @@
+[
+ {
+ "blockName": "core/social-link-x",
+ "attrs": {
+ "url": "https://example.com/"
+ },
+ "innerBlocks": [],
+ "innerHTML": "",
+ "innerContent": []
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-x.serialized.html b/test/integration/fixtures/blocks/core__social-link-x.serialized.html
new file mode 100644
index 00000000000000..be00807af4c9ea
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"x"} /-->
diff --git a/test/performance/fixtures/index.js b/test/performance/fixtures/index.js
new file mode 100644
index 00000000000000..0f68fc5637f5ab
--- /dev/null
+++ b/test/performance/fixtures/index.js
@@ -0,0 +1 @@
+export { PerfUtils } from './perf-utils';
diff --git a/test/performance/fixtures/perf-utils.ts b/test/performance/fixtures/perf-utils.ts
new file mode 100644
index 00000000000000..a61af86684e6bb
--- /dev/null
+++ b/test/performance/fixtures/perf-utils.ts
@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import { expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+import type { Locator, Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { readFile } from '../utils.js';
+
+type PerfUtilsConstructorProps = {
+ page: Page;
+};
+
+export class PerfUtils {
+ page: Page;
+
+ constructor( { page }: PerfUtilsConstructorProps ) {
+ this.page = page;
+ }
+
+ /**
+ * Returns the locator for the editor canvas element. This supports both the
+ * legacy and the iframed canvas.
+ *
+ * @return Locator for the editor canvas element.
+ */
+ async getCanvas() {
+ return await Promise.any( [
+ ( async () => {
+ const legacyCanvasLocator = this.page.locator(
+ '.wp-block-post-content'
+ );
+ await legacyCanvasLocator.waitFor( {
+ timeout: 120_000,
+ } );
+ return legacyCanvasLocator;
+ } )(),
+ ( async () => {
+ const iframedCanvasLocator = this.page.frameLocator(
+ '[name=editor-canvas]'
+ );
+ await iframedCanvasLocator
+ .locator( 'body' )
+ .waitFor( { timeout: 120_000 } );
+ return iframedCanvasLocator;
+ } )(),
+ ] );
+ }
+
+ /**
+ * Saves the post as a draft and returns its URL.
+ *
+ * @return URL of the saved draft.
+ */
+ async saveDraft() {
+ await this.page
+ .getByRole( 'button', { name: 'Save draft' } )
+ .click( { timeout: 60_000 } );
+ await expect(
+ this.page.getByRole( 'button', { name: 'Saved' } )
+ ).toBeDisabled();
+
+ return this.page.url();
+ }
+
+ /**
+ * Disables the editor autosave function.
+ */
+ async disableAutosave() {
+ await this.page.evaluate( () => {
+ return window.wp.data
+ .dispatch( 'core/editor' )
+ .updateEditorSettings( {
+ autosaveInterval: 100000000000,
+ localAutosaveInterval: 100000000000,
+ } );
+ } );
+
+ const { autosaveInterval } = await this.page.evaluate( () => {
+ return window.wp.data.select( 'core/editor' ).getEditorSettings();
+ } );
+
+ expect( autosaveInterval ).toBe( 100000000000 );
+ }
+
+ /**
+ * Enters the Site Editor's edit mode.
+ *
+ * @return Locator for the editor canvas element.
+ */
+ async enterSiteEditorEditMode() {
+ const canvas = await this.getCanvas();
+
+ await canvas.locator( 'body' ).click();
+ await canvas
+ .getByRole( 'document', { name: /Block:( Post)? Content/ } )
+ .click();
+
+ return canvas;
+ }
+
+ /**
+ * Loads blocks from the small post with containers fixture into the editor
+ * canvas.
+ */
+ async loadBlocksForSmallPostWithContainers() {
+ return await this.loadBlocksFromHtml(
+ path.join(
+ process.env.ASSETS_PATH!,
+ 'small-post-with-containers.html'
+ )
+ );
+ }
+
+ /**
+ * Loads blocks from the large post fixture into the editor canvas.
+ */
+ async loadBlocksForLargePost() {
+ return await this.loadBlocksFromHtml(
+ path.join( process.env.ASSETS_PATH!, 'large-post.html' )
+ );
+ }
+
+ /**
+ * Loads blocks from an HTML fixture with given path into the editor canvas.
+ *
+ * @param filepath Path to the HTML fixture.
+ */
+ async loadBlocksFromHtml( filepath: string ) {
+ if ( ! fs.existsSync( filepath ) ) {
+ throw new Error( `File not found: ${ filepath }` );
+ }
+
+ return await this.page.evaluate( ( html: string ) => {
+ const { parse } = window.wp.blocks;
+ const { dispatch } = window.wp.data;
+ const blocks = parse( html );
+
+ blocks.forEach( ( block: any ) => {
+ if ( block.name === 'core/image' ) {
+ delete block.attributes.id;
+ delete block.attributes.url;
+ }
+ } );
+
+ dispatch( 'core/block-editor' ).resetBlocks( blocks );
+ }, readFile( filepath ) );
+ }
+
+ /**
+ * Generates and loads a 1000 empty paragraphs into the editor canvas.
+ */
+ async load1000Paragraphs() {
+ await this.page.evaluate( () => {
+ const { createBlock } = window.wp.blocks;
+ const { dispatch } = window.wp.data;
+ const blocks = Array.from( { length: 1000 } ).map( () =>
+ createBlock( 'core/paragraph' )
+ );
+ dispatch( 'core/block-editor' ).resetBlocks( blocks );
+ } );
+ }
+
+ async expectExpandedState( locator: Locator, state: 'true' | 'false' ) {
+ return await Promise.any( [
+ // eslint-disable-next-line playwright/missing-playwright-await
+ expect( locator ).toHaveAttribute( 'aria-expanded', state ),
+ // Legacy selector.
+ // eslint-disable-next-line playwright/missing-playwright-await
+ expect( locator ).toHaveAttribute( 'aria-pressed', state ),
+ ] );
+ }
+}
diff --git a/test/performance/playwright.config.ts b/test/performance/playwright.config.ts
index 0918b79d3144d2..a8208342ac2d81 100644
--- a/test/performance/playwright.config.ts
+++ b/test/performance/playwright.config.ts
@@ -13,7 +13,7 @@ const baseConfig = require( '@wordpress/scripts/config/playwright.config' );
process.env.ASSETS_PATH = path.join( __dirname, 'assets' );
const config = defineConfig( {
- ...baseConfig.default,
+ ...baseConfig,
reporter: process.env.CI
? './config/performance-reporter.ts'
: [ [ 'list' ], [ './config/performance-reporter.ts' ] ],
@@ -26,7 +26,7 @@ const config = defineConfig( {
new URL( './config/global-setup.ts', 'file:' + __filename ).href
),
use: {
- ...baseConfig.default.use,
+ ...baseConfig.use,
video: 'off',
},
} );
diff --git a/test/performance/specs/front-end-block-theme.spec.js b/test/performance/specs/front-end-block-theme.spec.js
index 5cd05b79495ac7..ca48535a21a467 100644
--- a/test/performance/specs/front-end-block-theme.spec.js
+++ b/test/performance/specs/front-end-block-theme.spec.js
@@ -1,7 +1,9 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
/**
* WordPress dependencies
*/
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
const results = {
timeToFirstByte: [],
@@ -10,7 +12,12 @@ const results = {
};
test.describe( 'Front End Performance', () => {
- test.use( { storageState: {} } ); // User will be logged out.
+ test.use( {
+ storageState: {}, // User will be logged out.
+ metrics: async ( { page }, use ) => {
+ await use( new Metrics( { page } ) );
+ },
+ } );
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'twentytwentythree' );
@@ -26,25 +33,22 @@ test.describe( 'Front End Performance', () => {
const samples = 16;
const throwaway = 0;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- test( `Measure TTFB, LCP, and LCP-TTFB (${
- i + 1
- } of ${ rounds })`, async ( { page, metrics } ) => {
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ iterations })`, async ( {
+ page,
+ metrics,
+ } ) => {
// Go to the base URL.
// eslint-disable-next-line playwright/no-networkidle
await page.goto( '/', { waitUntil: 'networkidle' } );
// Take the measurements.
- const lcp = await metrics.getLargestContentfulPaint();
const ttfb = await metrics.getTimeToFirstByte();
-
- // Ensure the numbers are valid.
- expect( lcp ).toBeGreaterThan( 0 );
- expect( ttfb ).toBeGreaterThan( 0 );
+ const lcp = await metrics.getLargestContentfulPaint();
// Save the results.
- if ( i >= throwaway ) {
+ if ( i > throwaway ) {
results.largestContentfulPaint.push( lcp );
results.timeToFirstByte.push( ttfb );
results.lcpMinusTtfb.push( lcp - ttfb );
@@ -52,3 +56,5 @@ test.describe( 'Front End Performance', () => {
} );
}
} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/front-end-classic-theme.spec.js b/test/performance/specs/front-end-classic-theme.spec.js
index 68e833fe3f999f..0b6c3ec22c0465 100644
--- a/test/performance/specs/front-end-classic-theme.spec.js
+++ b/test/performance/specs/front-end-classic-theme.spec.js
@@ -1,7 +1,9 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
/**
* WordPress dependencies
*/
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
const results = {
timeToFirstByte: [],
@@ -10,7 +12,12 @@ const results = {
};
test.describe( 'Front End Performance', () => {
- test.use( { storageState: {} } ); // User will be logged out.
+ test.use( {
+ storageState: {}, // User will be logged out.
+ metrics: async ( { page }, use ) => {
+ await use( new Metrics( { page } ) );
+ },
+ } );
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'twentytwentyone' );
@@ -25,9 +32,9 @@ test.describe( 'Front End Performance', () => {
const samples = 16;
const throwaway = 0;
- const rounds = samples + throwaway;
- for ( let i = 1; i <= rounds; i++ ) {
- test( `Report TTFB, LCP, and LCP-TTFB (${ i } of ${ rounds })`, async ( {
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ iterations })`, async ( {
page,
metrics,
} ) => {
@@ -36,15 +43,11 @@ test.describe( 'Front End Performance', () => {
await page.goto( '/', { waitUntil: 'networkidle' } );
// Take the measurements.
- const lcp = await metrics.getLargestContentfulPaint();
const ttfb = await metrics.getTimeToFirstByte();
-
- // Ensure the numbers are valid.
- expect( lcp ).toBeGreaterThan( 0 );
- expect( ttfb ).toBeGreaterThan( 0 );
+ const lcp = await metrics.getLargestContentfulPaint();
// Save the results.
- if ( i >= throwaway ) {
+ if ( i > throwaway ) {
results.largestContentfulPaint.push( lcp );
results.timeToFirstByte.push( ttfb );
results.lcpMinusTtfb.push( lcp - ttfb );
@@ -52,3 +55,5 @@ test.describe( 'Front End Performance', () => {
} );
}
} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index 7b02ddd7f846b9..7f590330465278 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -1,26 +1,15 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
/**
- * External dependencies
+ * WordPress dependencies
*/
-const path = require( 'path' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
/**
* Internal dependencies
*/
-const {
- getTypingEventDurations,
- getClickEventDurations,
- getHoverEventDurations,
- getSelectionEventDurations,
- getLoadingDurations,
- loadBlocksFromHtml,
- load1000Paragraphs,
- sum,
-} = require( '../utils' );
+import { PerfUtils } from '../fixtures';
+import { sum } from '../utils.js';
// See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
const BROWSER_IDLE_WAIT = 1000;
@@ -42,6 +31,15 @@ const results = {
};
test.describe( 'Post Editor Performance', () => {
+ test.use( {
+ perfUtils: async ( { page }, use ) => {
+ await use( new PerfUtils( { page } ) );
+ },
+ metrics: async ( { page }, use ) => {
+ await use( new Metrics( { page } ) );
+ },
+ } );
+
test.afterAll( async ( {}, testInfo ) => {
await testInfo.attach( 'results', {
body: JSON.stringify( results, null, 2 ),
@@ -49,356 +47,434 @@ test.describe( 'Post Editor Performance', () => {
} );
} );
- test.beforeEach( async ( { admin, page } ) => {
- await admin.createNewPost();
- // Disable auto-save to avoid impacting the metrics.
- await page.evaluate( () => {
- window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
- autosaveInterval: 100000000000,
- localAutosaveInterval: 100000000000,
- } );
+ test.describe( 'Loading', () => {
+ let draftURL = null;
+
+ test( 'Setup the test post', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.loadBlocksForLargePost();
+ draftURL = await perfUtils.saveDraft();
} );
- } );
- test( 'Loading', async ( { browser, page } ) => {
- // Turn the large post HTML into blocks and insert.
- await loadBlocksFromHtml(
- page,
- path.join( process.env.ASSETS_PATH, 'large-post.html' )
- );
-
- // Save the draft.
- await page
- .getByRole( 'button', { name: 'Save draft' } )
- .click( { timeout: 60_000 } );
- await expect(
- page.getByRole( 'button', { name: 'Saved' } )
- ).toBeDisabled();
-
- // Get the URL that we will be testing against.
- const draftURL = page.url();
-
- // Start the measurements.
const samples = 10;
const throwaway = 1;
- const rounds = throwaway + samples;
- for ( let i = 0; i < rounds; i++ ) {
- // Open a fresh page in a new context to prevent caching.
- const testPage = await browser.newPage();
-
- // Go to the test page URL.
- await testPage.goto( draftURL );
-
- // Get canvas (handles both legacy and iframed canvas).
- const canvas = await Promise.any( [
- ( async () => {
- const legacyCanvasLocator = testPage.locator(
- '.wp-block-post-content'
- );
- await legacyCanvasLocator.waitFor( { timeout: 120_000 } );
- return legacyCanvasLocator;
- } )(),
- ( async () => {
- const iframedCanvasLocator = testPage.frameLocator(
- '[name=editor-canvas]'
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ test( `Run the test (${ i } of ${ iterations })`, async ( {
+ page,
+ perfUtils,
+ metrics,
+ } ) => {
+ // Open the test draft.
+ await page.goto( draftURL );
+ const canvas = await perfUtils.getCanvas();
+
+ // Wait for the first block.
+ await canvas.locator( '.wp-block' ).first().waitFor( {
+ timeout: 120_000,
+ } );
+
+ // Get the durations.
+ const loadingDurations = await metrics.getLoadingDurations();
+
+ // Save the results.
+ if ( i > throwaway ) {
+ Object.entries( loadingDurations ).forEach(
+ ( [ metric, duration ] ) => {
+ if ( metric === 'timeSinceResponseEnd' ) {
+ results.firstBlock.push( duration );
+ } else {
+ results[ metric ].push( duration );
+ }
+ }
);
- await iframedCanvasLocator
- .locator( 'body' )
- .waitFor( { timeout: 120_000 } );
- return iframedCanvasLocator;
- } )(),
- ] );
-
- await canvas.locator( '.wp-block' ).first().waitFor( {
- timeout: 120_000,
+ }
} );
+ }
+ } );
+
+ test.describe( 'Typing', () => {
+ let draftURL = null;
+
+ test( 'Setup the test post', async ( { admin, perfUtils, editor } ) => {
+ await admin.createNewPost();
+ await perfUtils.loadBlocksForLargePost();
+ await editor.insertBlock( { name: 'core/paragraph' } );
+ draftURL = await perfUtils.saveDraft();
+ } );
+
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+ const canvas = await perfUtils.getCanvas();
+
+ const paragraph = canvas.getByRole( 'document', {
+ name: /Empty block/i,
+ } );
+
+ // The first character typed triggers a longer time (isTyping change).
+ // It can impact the stability of the metric, so we exclude it. It
+ // probably deserves a dedicated metric itself, though.
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+
+ // Start tracing.
+ await metrics.startTracing();
+
+ // Type the testing sequence into the empty paragraph.
+ await paragraph.type( 'x'.repeat( iterations ), {
+ delay: BROWSER_IDLE_WAIT,
+ // The extended timeout is needed because the typing is very slow
+ // and the `delay` value itself does not extend it.
+ timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+ } );
+
+ // Stop tracing.
+ await metrics.stopTracing();
+
+ // Get the durations.
+ const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+ metrics.getTypingEventDurations();
// Save the results.
- if ( i >= throwaway ) {
- const loadingDurations = await getLoadingDurations( testPage );
- Object.entries( loadingDurations ).forEach(
- ( [ metric, duration ] ) => {
- results[ metric ].push( duration );
- }
+ for ( let i = throwaway; i < iterations; i++ ) {
+ results.type.push(
+ keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
);
}
-
- await testPage.close();
- }
+ } );
} );
- test( 'Typing', async ( { browser, page, editor } ) => {
- // Load the large post fixture.
- await loadBlocksFromHtml(
- page,
- path.join( process.env.ASSETS_PATH, 'large-post.html' )
- );
-
- // Append an empty paragraph.
- await editor.insertBlock( { name: 'core/paragraph' } );
+ test.describe( 'Typing within containers', () => {
+ let draftURL = null;
- // Start tracing.
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
+ test( 'Set up the test post', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.loadBlocksForSmallPostWithContainers();
+ draftURL = await perfUtils.saveDraft();
} );
- // The first character typed triggers a longer time (isTyping change).
- // It can impact the stability of the metric, so we exclude it. It
- // probably deserves a dedicated metric itself, though.
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+ const canvas = await perfUtils.getCanvas();
+
+ // Select the block where we type in.
+ const firstParagraph = canvas
+ .getByRole( 'document', {
+ name: /Paragraph block|Block: Paragraph/,
+ } )
+ .first();
+ await firstParagraph.click();
+
+ // The first character typed triggers a longer time (isTyping change).
+ // It can impact the stability of the metric, so we exclude it. It
+ // probably deserves a dedicated metric itself, though.
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+
+ // Start tracing.
+ await metrics.startTracing();
+
+ // Start typing in the middle of the text.
+ await firstParagraph.type( 'x'.repeat( iterations ), {
+ delay: BROWSER_IDLE_WAIT,
+ // The extended timeout is needed because the typing is very slow
+ // and the `delay` value itself does not extend it.
+ timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+ } );
- // Type the testing sequence into the empty paragraph.
- await page.keyboard.type( 'x'.repeat( rounds ), {
- delay: BROWSER_IDLE_WAIT,
- } );
+ // Stop tracing.
+ await metrics.stopTracing();
- // Stop tracing and save results.
- const traceBuffer = await browser.stopTracing();
- const traceResults = JSON.parse( traceBuffer.toString() );
- const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
- getTypingEventDurations( traceResults );
+ // Get the durations.
+ const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+ metrics.getTypingEventDurations();
- for ( let i = throwaway; i < rounds; i++ ) {
- results.type.push(
- keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
- );
- }
+ // Save the results.
+ for ( let i = throwaway; i < iterations; i++ ) {
+ results.typeContainer.push(
+ keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+ );
+ }
+ } );
} );
- test( 'Typing within containers', async ( { browser, page, editor } ) => {
- await loadBlocksFromHtml(
- page,
- path.join(
- process.env.ASSETS_PATH,
- 'small-post-with-containers.html'
- )
- );
-
- // Select the block where we type in
- await editor.canvas
- .getByRole( 'document', { name: 'Paragraph block' } )
- .first()
- .click();
-
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
- } );
+ test.describe( 'Selecting blocks', () => {
+ let draftURL = null;
- const samples = 10;
- // The first character typed triggers a longer time (isTyping change).
- // It can impact the stability of the metric, so we exclude it. It
- // probably deserves a dedicated metric itself, though.
- const throwaway = 1;
- const rounds = samples + throwaway;
- await page.keyboard.type( 'x'.repeat( rounds ), {
- delay: BROWSER_IDLE_WAIT,
+ test( 'Set up the test post', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.load1000Paragraphs();
+ draftURL = await perfUtils.saveDraft();
} );
- const traceBuffer = await browser.stopTracing();
- const traceResults = JSON.parse( traceBuffer.toString() );
- const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
- getTypingEventDurations( traceResults );
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+ const canvas = await perfUtils.getCanvas();
- for ( let i = throwaway; i < rounds; i++ ) {
- results.typeContainer.push(
- keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
- );
- }
- } );
+ const paragraphs = canvas.getByRole( 'document', {
+ name: /Empty block/i,
+ } );
- test( 'Selecting blocks', async ( { browser, page, editor } ) => {
- await load1000Paragraphs( page );
- const paragraphs = editor.canvas.locator( '.wp-block' );
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( BROWSER_IDLE_WAIT );
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( BROWSER_IDLE_WAIT );
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
- } );
+ // Start tracing.
+ await metrics.startTracing();
- await paragraphs.nth( i ).click();
+ // Click the next paragraph.
+ await paragraphs.nth( i ).click();
- const traceBuffer = await browser.stopTracing();
+ // Stop tracing.
+ await metrics.stopTracing();
- if ( i >= throwaway ) {
- const traceResults = JSON.parse( traceBuffer.toString() );
- const allDurations = getSelectionEventDurations( traceResults );
- results.focus.push(
- allDurations.reduce( ( acc, eventDurations ) => {
- return acc + sum( eventDurations );
- }, 0 )
- );
+ // Get the durations.
+ const allDurations = metrics.getSelectionEventDurations();
+
+ // Save the results.
+ if ( i > throwaway ) {
+ results.focus.push(
+ allDurations.reduce( ( acc, eventDurations ) => {
+ return acc + sum( eventDurations );
+ }, 0 )
+ );
+ }
}
- }
+ } );
} );
- test( 'Opening persistent list view', async ( { browser, page } ) => {
- await load1000Paragraphs( page );
- const listViewToggle = page.getByRole( 'button', {
- name: 'Document Overview',
+ test.describe( 'Opening persistent List View', () => {
+ let draftURL = null;
+
+ test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.load1000Paragraphs();
+ draftURL = await perfUtils.saveDraft();
} );
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( BROWSER_IDLE_WAIT );
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+
+ const listViewToggle = page.getByRole( 'button', {
+ name: 'Document Overview',
} );
- // Open List View
- await listViewToggle.click();
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( BROWSER_IDLE_WAIT );
- const traceBuffer = await browser.stopTracing();
+ // Start tracing.
+ await metrics.startTracing();
- if ( i >= throwaway ) {
- const traceResults = JSON.parse( traceBuffer.toString() );
- const [ mouseClickEvents ] =
- getClickEventDurations( traceResults );
- results.listViewOpen.push( mouseClickEvents[ 0 ] );
- }
+ // Open List View.
+ await listViewToggle.click();
+ await perfUtils.expectExpandedState( listViewToggle, 'true' );
- // Close List View
- await listViewToggle.click();
- }
+ // Stop tracing.
+ await metrics.stopTracing();
+
+ // Get the durations.
+ const [ mouseClickEvents ] = metrics.getClickEventDurations();
+
+ // Save the results.
+ if ( i > throwaway ) {
+ results.listViewOpen.push( mouseClickEvents[ 0 ] );
+ }
+
+ // Close List View
+ await listViewToggle.click();
+ await perfUtils.expectExpandedState( listViewToggle, 'false' );
+ }
+ } );
} );
- test( 'Opening the inserter', async ( { browser, page } ) => {
- await load1000Paragraphs( page );
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ test.describe( 'Opening Inserter', () => {
+ let draftURL = null;
+
+ test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.load1000Paragraphs();
+ draftURL = await perfUtils.saveDraft();
} );
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( BROWSER_IDLE_WAIT );
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ // Go to the test page.
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+ const globalInserterToggle = page.getByRole( 'button', {
+ name: 'Toggle block inserter',
} );
- // Open Inserter.
- await globalInserterToggle.click();
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+ // Start tracing.
+ await metrics.startTracing();
+
+ // Open Inserter.
+ await globalInserterToggle.click();
+ await perfUtils.expectExpandedState(
+ globalInserterToggle,
+ 'true'
+ );
- const traceBuffer = await browser.stopTracing();
+ // Stop tracing.
+ await metrics.stopTracing();
- if ( i >= throwaway ) {
- const traceResults = JSON.parse( traceBuffer.toString() );
- const [ mouseClickEvents ] =
- getClickEventDurations( traceResults );
- results.inserterOpen.push( mouseClickEvents[ 0 ] );
- }
+ // Get the durations.
+ const [ mouseClickEvents ] = metrics.getClickEventDurations();
- // Close Inserter.
- await globalInserterToggle.click();
- }
- } );
+ // Save the results.
+ if ( i > throwaway ) {
+ results.inserterOpen.push( mouseClickEvents[ 0 ] );
+ }
- test( 'Searching the inserter', async ( { browser, page } ) => {
- await load1000Paragraphs( page );
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ // Close Inserter.
+ await globalInserterToggle.click();
+ await perfUtils.expectExpandedState(
+ globalInserterToggle,
+ 'false'
+ );
+ }
} );
+ } );
- // Open Inserter.
- await globalInserterToggle.click();
+ test.describe( 'Searching Inserter', () => {
+ let draftURL = null;
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( BROWSER_IDLE_WAIT );
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
+ test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.load1000Paragraphs();
+ draftURL = await perfUtils.saveDraft();
+ } );
+
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ // Go to the test page.
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+ const globalInserterToggle = page.getByRole( 'button', {
+ name: 'Toggle block inserter',
} );
- await page.keyboard.type( 'p' );
+ // Open Inserter.
+ await globalInserterToggle.click();
+ await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
+
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( BROWSER_IDLE_WAIT );
- const traceBuffer = await browser.stopTracing();
+ // Start tracing.
+ await metrics.startTracing();
- if ( i >= throwaway ) {
- const traceResults = JSON.parse( traceBuffer.toString() );
- const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
- getTypingEventDurations( traceResults );
- results.inserterSearch.push(
- keyDownEvents[ 0 ] + keyPressEvents[ 0 ] + keyUpEvents[ 0 ]
- );
- }
+ // Type to trigger search.
+ await page.keyboard.type( 'p' );
- await page.keyboard.press( 'Backspace' );
- }
+ // Stop tracing.
+ await metrics.stopTracing();
+
+ // Get the durations.
+ const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+ metrics.getTypingEventDurations();
+
+ // Save the results.
+ if ( i > throwaway ) {
+ results.inserterSearch.push(
+ keyDownEvents[ 0 ] +
+ keyPressEvents[ 0 ] +
+ keyUpEvents[ 0 ]
+ );
+ }
- // Close Inserter.
- await globalInserterToggle.click();
+ await page.keyboard.press( 'Backspace' );
+ }
+ } );
} );
- test( 'Hovering Inserter Items', async ( { browser, page } ) => {
- await load1000Paragraphs( page );
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ test.describe( 'Hovering Inserter items', () => {
+ let draftURL = null;
+
+ test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+ await admin.createNewPost();
+ await perfUtils.load1000Paragraphs();
+ draftURL = await perfUtils.saveDraft();
} );
- const paragraphBlockItem = page.locator(
- '.block-editor-inserter__menu .editor-block-list-item-paragraph'
- );
- const headingBlockItem = page.locator(
- '.block-editor-inserter__menu .editor-block-list-item-heading'
- );
- // Open Inserter.
- await globalInserterToggle.click();
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ // Go to the test page.
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( BROWSER_IDLE_WAIT );
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
+ const globalInserterToggle = page.getByRole( 'button', {
+ name: 'Toggle block inserter',
} );
+ const paragraphBlockItem = page.locator(
+ '.block-editor-inserter__menu .editor-block-list-item-paragraph'
+ );
+ const headingBlockItem = page.locator(
+ '.block-editor-inserter__menu .editor-block-list-item-heading'
+ );
+
+ // Open Inserter.
+ await globalInserterToggle.click();
+ await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
+
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( BROWSER_IDLE_WAIT );
- // Hover Items.
- await paragraphBlockItem.hover();
- await headingBlockItem.hover();
+ // Start tracing.
+ await metrics.startTracing();
- const traceBuffer = await browser.stopTracing();
+ // Hover Inserter items.
+ await paragraphBlockItem.hover();
+ await headingBlockItem.hover();
- if ( i >= throwaway ) {
- const traceResults = JSON.parse( traceBuffer.toString() );
+ // Stop tracing.
+ await metrics.stopTracing();
+
+ // Get the durations.
const [ mouseOverEvents, mouseOutEvents ] =
- getHoverEventDurations( traceResults );
- for ( let k = 0; k < mouseOverEvents.length; k++ ) {
- results.inserterHover.push(
- mouseOverEvents[ k ] + mouseOutEvents[ k ]
- );
+ metrics.getHoverEventDurations();
+
+ // Save the results.
+ if ( i > throwaway ) {
+ for ( let k = 0; k < mouseOverEvents.length; k++ ) {
+ results.inserterHover.push(
+ mouseOverEvents[ k ] + mouseOutEvents[ k ]
+ );
+ }
}
}
- }
-
- // Close Inserter.
- await globalInserterToggle.click();
+ } );
} );
} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
index 1a5c0a96b6846f..f2f211dd52e6e0 100644
--- a/test/performance/specs/site-editor.spec.js
+++ b/test/performance/specs/site-editor.spec.js
@@ -1,21 +1,14 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
/**
- * External dependencies
+ * WordPress dependencies
*/
-const path = require( 'path' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
/**
* Internal dependencies
*/
-const {
- getTypingEventDurations,
- getLoadingDurations,
- loadBlocksFromHtml,
-} = require( '../utils' );
+import { PerfUtils } from '../fixtures';
// See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
const BROWSER_IDLE_WAIT = 1000;
@@ -36,9 +29,16 @@ const results = {
listViewOpen: [],
};
-let testPageId;
-
test.describe( 'Site Editor Performance', () => {
+ test.use( {
+ perfUtils: async ( { page }, use ) => {
+ await use( new PerfUtils( { page } ) );
+ },
+ metrics: async ( { page }, use ) => {
+ await use( new Metrics( { page } ) );
+ },
+ } );
+
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'emptytheme' );
await requestUtils.deleteAllTemplates( 'wp_template' );
@@ -56,156 +56,139 @@ test.describe( 'Site Editor Performance', () => {
await requestUtils.activateTheme( 'twentytwentyone' );
} );
- test.beforeEach( async ( { admin, page } ) => {
- // Start a new page.
- await admin.createNewPost( { postType: 'page' } );
+ test.describe( 'Loading', () => {
+ let draftURL = null;
- // Disable auto-save to avoid impacting the metrics.
- await page.evaluate( () => {
- window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
- autosaveInterval: 100000000000,
- localAutosaveInterval: 100000000000,
+ test( 'Setup the test page', async ( { page, admin, perfUtils } ) => {
+ await admin.createNewPost( { postType: 'page' } );
+ await perfUtils.loadBlocksForLargePost();
+ await perfUtils.saveDraft();
+
+ await admin.visitSiteEditor( {
+ postId: new URL( page.url() ).searchParams.get( 'post' ),
+ postType: 'page',
} );
- } );
- } );
- test( 'Loading', async ( { browser, page, admin } ) => {
- // Load the large post fixture.
- await loadBlocksFromHtml(
- page,
- path.join( process.env.ASSETS_PATH, 'large-post.html' )
- );
-
- // Save the draft.
- await page
- .getByRole( 'button', { name: 'Save draft' } )
- .click( { timeout: 60_000 } );
- await expect(
- page.getByRole( 'button', { name: 'Saved' } )
- ).toBeDisabled();
-
- // Get the ID of the saved page.
- testPageId = new URL( page.url() ).searchParams.get( 'post' );
-
- // Open the test page in Site Editor.
- await admin.visitSiteEditor( {
- postId: testPageId,
- postType: 'page',
+ draftURL = page.url();
} );
- // Get the URL that we will be testing against.
- const draftURL = page.url();
-
- // Start the measurements.
const samples = 10;
const throwaway = 1;
- const rounds = samples + throwaway;
- for ( let i = 0; i < rounds; i++ ) {
- // Open a fresh page in a new context to prevent caching.
- const testPage = await browser.newPage();
-
- // Go to the test page URL.
- await testPage.goto( draftURL );
-
- // Wait for the first block.
- await testPage
- .frameLocator( 'iframe[name="editor-canvas"]' )
- .locator( '.wp-block' )
- .first()
- .waitFor( { timeout: 120_000 } );
-
- // Save the results.
- if ( i >= throwaway ) {
- const loadingDurations = await getLoadingDurations( testPage );
- Object.entries( loadingDurations ).forEach(
- ( [ metric, duration ] ) => {
- results[ metric ].push( duration );
- }
- );
- }
-
- await testPage.close();
+ const iterations = samples + throwaway;
+ for ( let i = 1; i <= iterations; i++ ) {
+ test( `Run the test (${ i } of ${ iterations })`, async ( {
+ page,
+ perfUtils,
+ metrics,
+ } ) => {
+ // Go to the test draft.
+ await page.goto( draftURL );
+ const canvas = await perfUtils.getCanvas();
+
+ // Wait for the first block.
+ await canvas.locator( '.wp-block' ).first().waitFor( {
+ timeout: 120_000,
+ } );
+
+ // Get the durations.
+ const loadingDurations = await metrics.getLoadingDurations();
+
+ // Save the results.
+ if ( i > throwaway ) {
+ Object.entries( loadingDurations ).forEach(
+ ( [ metric, duration ] ) => {
+ if ( metric === 'timeSinceResponseEnd' ) {
+ results.firstBlock.push( duration );
+ } else {
+ results[ metric ].push( duration );
+ }
+ }
+ );
+ }
+ } );
}
} );
+ test.describe( 'Typing', () => {
+ let draftURL = null;
- test( 'Typing', async ( { browser, page, admin, editor } ) => {
- // Load the large post fixture.
- await loadBlocksFromHtml(
+ test( 'Setup the test post', async ( {
page,
- path.join( process.env.ASSETS_PATH, 'large-post.html' )
- );
-
- // Save the draft.
- await page
- .getByRole( 'button', { name: 'Save draft' } )
- // Loading the large post HTML can take some time so we need a higher
- // timeout value here.
- .click( { timeout: 60_000 } );
- await expect(
- page.getByRole( 'button', { name: 'Saved' } )
- ).toBeDisabled();
-
- // Get the ID of the saved page.
- testPageId = new URL( page.url() ).searchParams.get( 'post' );
-
- // Open the test page in Site Editor.
- await admin.visitSiteEditor( {
- postId: testPageId,
- postType: 'page',
- } );
+ admin,
+ editor,
+ perfUtils,
+ } ) => {
+ await admin.createNewPost( { postType: 'page' } );
+ await perfUtils.loadBlocksForLargePost();
+ await editor.insertBlock( { name: 'core/paragraph' } );
+ await perfUtils.saveDraft();
+
+ await admin.visitSiteEditor( {
+ postId: new URL( page.url() ).searchParams.get( 'post' ),
+ postType: 'page',
+ } );
- // Wait for the first paragraph to be ready.
- const firstParagraph = editor.canvas
- .getByText( 'Lorem ipsum dolor sit amet' )
- .first();
- await firstParagraph.waitFor( { timeout: 60_000 } );
-
- // Enter edit mode.
- await editor.canvas.locator( 'body' ).click();
- // Second click is needed for the legacy edit mode.
- await editor.canvas
- .getByRole( 'document', { name: /Block:( Post)? Content/ } )
- .click();
-
- // Append an empty paragraph.
- // Since `editor.insertBlock( { name: 'core/paragraph' } )` is not
- // working in page edit mode, we need to _manually_ insert a new
- // paragraph.
- await editor.canvas
- .getByText( 'Quamquam tu hanc copiosiorem etiam soles dicere.' )
- .last()
- .click(); // Enters edit mode for the last post's element, which is a list item.
-
- await page.keyboard.press( 'Enter' ); // Creates a new list item.
- await page.keyboard.press( 'Enter' ); // Exits the list and creates a new paragraph.
-
- // Start tracing.
- await browser.startTracing( page, {
- screenshots: false,
- categories: [ 'devtools.timeline' ],
+ draftURL = page.url();
} );
+ test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+ await page.goto( draftURL );
+ await perfUtils.disableAutosave();
+
+ // Wait for the loader overlay to disappear. This is necessary
+ // because the overlay is still visible for a while after the editor
+ // canvas is ready, and we don't want it to affect the typing
+ // timings.
+ await page
+ .locator(
+ // Spinner was used instead of the progress bar in an earlier version of the site editor.
+ '.edit-site-canvas-loader, .edit-site-canvas-spinner'
+ )
+ .waitFor( { state: 'hidden', timeout: 120_000 } );
+
+ const canvas = await perfUtils.getCanvas();
+
+ // Enter edit mode (second click is needed for the legacy edit mode).
+ await canvas.locator( 'body' ).click();
+ await canvas
+ .getByRole( 'document', { name: /Block:( Post)? Content/ } )
+ .click();
+
+ const paragraph = canvas.getByRole( 'document', {
+ name: /Empty block/i,
+ } );
- // The first character typed triggers a longer time (isTyping change).
- // It can impact the stability of the metric, so we exclude it. It
- // probably deserves a dedicated metric itself, though.
- const samples = 10;
- const throwaway = 1;
- const rounds = samples + throwaway;
+ // The first character typed triggers a longer time (isTyping change).
+ // It can impact the stability of the metric, so we exclude it. It
+ // probably deserves a dedicated metric itself, though.
+ const samples = 10;
+ const throwaway = 1;
+ const iterations = samples + throwaway;
+
+ // Start tracing.
+ await metrics.startTracing();
+
+ // Type the testing sequence into the empty paragraph.
+ await paragraph.type( 'x'.repeat( iterations ), {
+ delay: BROWSER_IDLE_WAIT,
+ // The extended timeout is needed because the typing is very slow
+ // and the `delay` value itself does not extend it.
+ timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+ } );
- // Type the testing sequence into the empty paragraph.
- await page.keyboard.type( 'x'.repeat( rounds ), {
- delay: BROWSER_IDLE_WAIT,
- } );
+ // Stop tracing.
+ await metrics.stopTracing();
- // Stop tracing and save results.
- const traceBuffer = await browser.stopTracing();
- const traceResults = JSON.parse( traceBuffer.toString() );
- const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
- getTypingEventDurations( traceResults );
- for ( let i = throwaway; i < rounds; i++ ) {
- results.type.push(
- keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
- );
- }
+ // Get the durations.
+ const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+ metrics.getTypingEventDurations();
+
+ // Save the results.
+ for ( let i = throwaway; i < iterations; i++ ) {
+ results.type.push(
+ keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+ );
+ }
+ } );
} );
} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/utils.js b/test/performance/utils.js
index b86d09a10b301d..e14ff71436d735 100644
--- a/test/performance/utils.js
+++ b/test/performance/utils.js
@@ -58,141 +58,3 @@ export function deleteFile( filePath ) {
unlinkSync( filePath );
}
}
-
-function isEvent( item ) {
- return (
- item.cat === 'devtools.timeline' &&
- item.name === 'EventDispatch' &&
- item.dur &&
- item.args &&
- item.args.data
- );
-}
-
-function isKeyDownEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'keydown';
-}
-
-function isKeyPressEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'keypress';
-}
-
-function isKeyUpEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'keyup';
-}
-
-function isFocusEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'focus';
-}
-
-function isFocusInEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'focusin';
-}
-
-function isClickEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'click';
-}
-
-function isMouseOverEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'mouseover';
-}
-
-function isMouseOutEvent( item ) {
- return isEvent( item ) && item.args.data.type === 'mouseout';
-}
-
-function getEventDurationsForType( trace, filterFunction ) {
- return trace.traceEvents
- .filter( filterFunction )
- .map( ( item ) => item.dur / 1000 );
-}
-
-export function getTypingEventDurations( trace ) {
- return [
- getEventDurationsForType( trace, isKeyDownEvent ),
- getEventDurationsForType( trace, isKeyPressEvent ),
- getEventDurationsForType( trace, isKeyUpEvent ),
- ];
-}
-
-export function getSelectionEventDurations( trace ) {
- return [
- getEventDurationsForType( trace, isFocusEvent ),
- getEventDurationsForType( trace, isFocusInEvent ),
- ];
-}
-
-export function getClickEventDurations( trace ) {
- return [ getEventDurationsForType( trace, isClickEvent ) ];
-}
-
-export function getHoverEventDurations( trace ) {
- return [
- getEventDurationsForType( trace, isMouseOverEvent ),
- getEventDurationsForType( trace, isMouseOutEvent ),
- ];
-}
-
-export async function getLoadingDurations( page ) {
- return await page.evaluate( () => {
- const [
- {
- requestStart,
- responseStart,
- responseEnd,
- domContentLoadedEventEnd,
- loadEventEnd,
- },
- ] = performance.getEntriesByType( 'navigation' );
- const paintTimings = performance.getEntriesByType( 'paint' );
- return {
- // Server side metric.
- serverResponse: responseStart - requestStart,
- // For client side metrics, consider the end of the response (the
- // browser receives the HTML) as the start time (0).
- firstPaint:
- paintTimings.find( ( { name } ) => name === 'first-paint' )
- .startTime - responseEnd,
- domContentLoaded: domContentLoadedEventEnd - responseEnd,
- loaded: loadEventEnd - responseEnd,
- firstContentfulPaint:
- paintTimings.find(
- ( { name } ) => name === 'first-contentful-paint'
- ).startTime - responseEnd,
- // This is evaluated right after Playwright found the block selector.
- firstBlock: performance.now() - responseEnd,
- };
- } );
-}
-
-export async function loadBlocksFromHtml( page, filepath ) {
- if ( ! existsSync( filepath ) ) {
- throw new Error( `File not found (${ filepath })` );
- }
-
- return await page.evaluate( ( html ) => {
- const { parse } = window.wp.blocks;
- const { dispatch } = window.wp.data;
- const blocks = parse( html );
-
- blocks.forEach( ( block ) => {
- if ( block.name === 'core/image' ) {
- delete block.attributes.id;
- delete block.attributes.url;
- }
- } );
-
- dispatch( 'core/block-editor' ).resetBlocks( blocks );
- }, readFile( filepath ) );
-}
-
-export async function load1000Paragraphs( page ) {
- await page.evaluate( () => {
- const { createBlock } = window.wp.blocks;
- const { dispatch } = window.wp.data;
- const blocks = Array.from( { length: 1000 } ).map( () =>
- createBlock( 'core/paragraph' )
- );
- dispatch( 'core/block-editor' ).resetBlocks( blocks );
- } );
-}
diff --git a/test/php/gutenberg-coding-standards/.phpcs.xml.dist b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
index d6862f9a00fa9e..7f717f65374d7b 100644
--- a/test/php/gutenberg-coding-standards/.phpcs.xml.dist
+++ b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
@@ -27,7 +27,6 @@
<!-- Check up to 8 files simultaneously. -->
<arg name="parallel" value="8"/>
-
<!--
#############################################################################
SET UP THE RULESETS
@@ -38,51 +37,15 @@
<!-- This project needs to comply with naming standards from PHPCS, not WP. -->
<exclude name="WordPress.Files.FileName"/>
<exclude name="WordPress.NamingConventions.ValidVariableName"/>
+ </rule>
- <!-- While conditions with assignments are a typical way to walk the token stream. -->
- <exclude name="Generic.CodeAnalysis.AssignmentInCondition.FoundInWhileCondition"/>
-
- <!-- The code in this project is run in the context of PHPCS, not WP. -->
- <exclude name="WordPress.DateTime"/>
- <exclude name="WordPress.DB"/>
- <exclude name="WordPress.Security"/>
- <exclude name="WordPress.WP"/>
-
- <!-- Linting is done in a separate CI job, no need to duplicate it. -->
- <exclude name="Generic.PHP.Syntax"/>
- <!--This rule should only be applied to code that is intended to be merged into Core. -->
- <exclude name="Gutenberg.CodeAnalysis.GuardedFunctionAndClassNames"/>
+ <rule ref="Squiz.Commenting.FunctionCommentThrowTag.Missing">
+ <exclude-pattern>/Gutenberg/Tests/.+$</exclude-pattern>
</rule>
<!-- Check code for cross-version PHP compatibility. -->
- <config name="testVersion" value="5.4-"/>
- <rule ref="PHPCompatibility">
- <!-- Exclude PHP constants back-filled by PHPCS. -->
- <exclude name="PHPCompatibility.Constants.NewConstants.t_finallyFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_yieldFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_ellipsisFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_powFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_pow_equalFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_spaceshipFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_coalesceFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_coalesce_equalFound"/>
- <exclude name="PHPCompatibility.Constants.NewConstants.t_yield_fromFound"/>
- </rule>
+ <config name="testVersion" value="7.0-"/>
<!-- Enforce PSR1 compatible namespaces. -->
<rule ref="PSR1.Classes.ClassDeclaration"/>
-
- <!--
- #############################################################################
- SNIFF SPECIFIC CONFIGURATION
- #############################################################################
- -->
-
- <rule ref="WordPress.Arrays.MultipleStatementAlignment">
- <properties>
- <property name="alignMultilineItems" value="!=100"/>
- <property name="exact" value="false" phpcs-only="true"/>
- </properties>
- </rule>
-
</ruleset>
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
index 5f72e378501278..74608921c32d89 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
@@ -114,22 +114,22 @@ private function processFunctionToken( File $phpcsFile, $stackPointer ) {
$parent_directory_name = basename( dirname( $phpcsFile->getFilename() ) );
$allowed_function_prefixes = array();
- $is_function_name_valid = false;
foreach ( $this->prefixes as $prefix ) {
$prefix = rtrim( $prefix, '_' );
$allowed_function_prefix = $prefix . '_' . self::sanitize_directory_name( $parent_directory_name );
$allowed_function_prefixes[] = $allowed_function_prefix;
// Validate the name's correctness and ensure it does not end with an underscore.
- $regexp = sprintf( '/^%s(|_.+)$/', preg_quote( $allowed_function_prefix, '/' ) );
- $is_function_name_valid |= ( 1 === preg_match( $regexp, $function_name ) );
- }
+ $regexp = sprintf( '/^%s(|_.+)$/', preg_quote( $allowed_function_prefix, '/' ) );
- if ( $is_function_name_valid ) {
- return;
+ if ( 1 === preg_match( $regexp, $function_name ) ) {
+ // The function has a valid prefix; bypassing further checks.
+ return;
+ }
}
- $error_message = "The function name `{$function_name}()` is invalid because PHP function names in this file should start with one of the following prefixes: `"
- . implode( '`, `', $allowed_function_prefixes ) . '`.';
+ $error_message = "The function name '{$function_name}()' is invalid."
+ . ' In this file, PHP function names must either match one of the allowed prefixes exactly or begin with one of them, followed by an underscore.'
+ . " The allowed prefixes are: '" . implode( "', '", $allowed_function_prefixes ) . "'.";
$phpcsFile->addError( $error_message, $function_token, 'FunctionNameInvalid' );
}
@@ -146,7 +146,7 @@ private function onRegisterEvent() {
* Sanitize a directory name by converting it to lowercase and replacing non-letter
* and non-digit characters with underscores.
*
- * @param string $directory_name
+ * @param string $directory_name Directory name.
*
* @return string
*/
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
new file mode 100644
index 00000000000000..794a088b7bc61d
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
@@ -0,0 +1,116 @@
+<?php
+/**
+ * Unit test class for Gutenberg Coding Standard.
+ *
+ * @package gutenberg-coding-standards/gbc
+ * @link https://github.com/WordPress/gutenberg
+ * @license https://opensource.org/licenses/MIT MIT
+ */
+
+namespace GutenbergCS\Gutenberg\Tests\NamingConventions;
+
+use GutenbergCS\Gutenberg\Sniffs\NamingConventions\ValidBlockLibraryFunctionNameSniff;
+use PHP_CodeSniffer\Config;
+use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Ruleset;
+
+/**
+ * Unit test class for the ValidBlockLibraryFunctionNameSniff sniff.
+ */
+final class ValidBlockLibraryFunctionNameUnitTest extends AbstractSniffUnitTest {
+
+ /**
+ * Holds the original Ruleset instance.
+ *
+ * @var Ruleset
+ */
+ private static $original_ruleset;
+
+ /**
+ * Returns the lines where errors should occur.
+ *
+ * @return array <int line number> => <int number of errors>
+ */
+ public function getErrorList() {
+ return array(
+ 8 => 1,
+ 17 => 1,
+ 26 => 1,
+ 35 => 1,
+ );
+ }
+
+ /**
+ * Returns the lines where warnings should occur.
+ *
+ * @return array <int line number> => <int number of warnings>
+ */
+ public function getWarningList() {
+ return array();
+ }
+
+ /**
+ *
+ * This method resets the 'Gutenberg' ruleset in the $GLOBALS['PHP_CODESNIFFER_RULESETS']
+ * to its original state.
+ */
+ public static function tearDownAfterClass() {
+ parent::tearDownAfterClass();
+
+ $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = self::$original_ruleset;
+ self::$original_ruleset = null;
+ }
+
+
+ /**
+ * Prepares the environment before executing tests. Specifically, sets prefixes for the
+ * ValidBlockLibraryFunctionName sniff.This is needed since AbstractSniffUnitTest class
+ * doesn't apply sniff properties from the Gutenberg/ruleset.xml file.
+ *
+ * @param string $filename The name of the file being tested.
+ * @param Config $config The config data for the run.
+ *
+ * @return void
+ */
+ public function setCliValues( $filename, $config ) {
+ parent::setCliValues( $filename, $config );
+
+ if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
+ || ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
+ ) {
+ throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
+ }
+
+ // Backup the original Ruleset instance.
+ self::$original_ruleset = $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'];
+
+ $current_ruleset = clone self::$original_ruleset;
+ $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = $current_ruleset;
+
+ if ( ! isset( $current_ruleset->sniffs[ ValidBlockLibraryFunctionNameSniff::class ] )
+ || ( ! $current_ruleset->sniffs[ ValidBlockLibraryFunctionNameSniff::class ] instanceof ValidBlockLibraryFunctionNameSniff )
+ ) {
+ throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
+ }
+
+ $sniff = $current_ruleset->sniffs[ ValidBlockLibraryFunctionNameSniff::class ];
+ $sniff->prefixes = array(
+ 'block_core_',
+ 'render_block_core_',
+ 'register_block_core_',
+ );
+ }
+
+ /**
+ * Get a list of all test files to check.
+ *
+ * @param string $testFileBase The base path that the unit tests files will have.
+ *
+ * @return string[]
+ */
+ protected function getTestFiles( $testFileBase ) {
+ return array(
+ __DIR__ . '/../fixtures/block-library/src/my-block/index.inc',
+ );
+ }
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/fixtures/block-library/src/my-block/index.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/fixtures/block-library/src/my-block/index.inc
new file mode 100644
index 00000000000000..3f99eb9ca6b8e8
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/fixtures/block-library/src/my-block/index.inc
@@ -0,0 +1,36 @@
+<?php
+function block_core_my_block() {
+}
+
+function block_core_my_block_with_some_postfix() {
+}
+
+function block_core_my_blockwith_no_underscore_after_the_prefix() {
+}
+
+function render_block_core_my_block() {
+}
+
+function render_block_core_my_block_with_some_postfix() {
+}
+
+function render_block_core_my_blockwith_no_underscore_after_the_prefix() {
+}
+
+function register_block_core_my_block() {
+}
+
+function register_block_core_my_block_with_some_postfix() {
+}
+
+function register_block_core_my_blockwith_no_underscore_after_the_prefix() {
+}
+
+class MyClass {
+ // Represents a non-prefixed method within the class.
+ public function some_non_prefixed_class_method() {
+ }
+}
+
+function foo() {
+}
diff --git a/test/php/gutenberg-coding-standards/composer.json b/test/php/gutenberg-coding-standards/composer.json
index f4ca88e49e2ae0..0aeec177918c01 100644
--- a/test/php/gutenberg-coding-standards/composer.json
+++ b/test/php/gutenberg-coding-standards/composer.json
@@ -16,17 +16,18 @@
}
],
"require": {
- "php": ">=5.4",
- "ext-filter": "*",
+ "php": ">=7.0",
+ "ext-libxml": "*",
+ "ext-tokenizer": "*",
+ "ext-xmlreader": "*",
"squizlabs/php_codesniffer": "^3.7.2"
},
"require-dev": {
"phpcompatibility/php-compatibility": "^9.0",
- "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0",
+ "phpunit/phpunit": "^5.0 || ^6.0 || ^7.0",
"php-parallel-lint/php-parallel-lint": "^1.3.2",
"php-parallel-lint/php-console-highlighter": "^1.0.0",
- "dealerdirect/phpcodesniffer-composer-installer": "*",
- "wp-coding-standards/wpcs": "^2.2"
+ "wp-coding-standards/wpcs": "^3.0"
},
"suggest": {
"ext-mbstring": "For improved results"
@@ -47,7 +48,7 @@
"@php ./vendor/squizlabs/php_codesniffer/bin/phpcbf"
],
"run-tests": [
- "@php ./vendor/phpunit/phpunit/phpunit -c phpunit.xml.dist --filter Gutenberg ./vendor/squizlabs/php_codesniffer/tests/AllTests.php"
+ "@php ./vendor/phpunit/phpunit/phpunit --filter Gutenberg ./vendor/squizlabs/php_codesniffer/tests/AllTests.php --no-coverage"
],
"check-all": [
"@lint",
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index 4104a791f29c6b..d599980b951a93 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -32,6 +32,7 @@ const prefixFunctions = [
'wp_enqueue_block_support_styles',
'wp_get_typography_font_size_value',
'wp_style_engine_get_styles',
+ 'wp_get_global_settings',
];
/**
diff --git a/tools/webpack/development.js b/tools/webpack/development.js
index cbfe9c40f6efcd..88ac4fba42f202 100644
--- a/tools/webpack/development.js
+++ b/tools/webpack/development.js
@@ -33,7 +33,7 @@ module.exports = [
name: 'react-refresh-runtime',
entry: {
'react-refresh-runtime': {
- import: 'react-refresh/runtime.js',
+ import: 'react-refresh/runtime',
library: {
name: 'ReactRefreshRuntime',
type: 'window',
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 3dc8407d7974b9..3f105886cd2d11 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -28,6 +28,7 @@ const BUNDLED_PACKAGES = [
'@wordpress/icons',
'@wordpress/interface',
'@wordpress/undo-manager',
+ '@wordpress/sync',
];
// PHP files in packages that have to be copied during build.
]]></plaintext></div></div></slotfillprovider></div></div></div></div></div></div></div></div></div></div></boolean></section></main></main></header></string></linkcontrol></customselectcontrol></p></navigablemenu></div>