@wordpress/block-editor 9.1.0 → 9.2.0

package/build-style/style-rtl.css

@@ -1654,21 +1654,10 @@
   min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
-  display: flex;
-  gap: 8px;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  width: 12px;
-  height: 12px;
-  align-self: center;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
-  margin-right: 12px;
-}
-.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: none;
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
+  display: block;
 }
+
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
@@ -1679,31 +1668,11 @@
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
   margin-bottom: inherit;
 }
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
-  display: block;
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
-}
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
   width: 280px;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
-}
-.block-editor-panel-color-gradient-settings__item.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-
 .block-editor-panel-color-gradient-settings__color-indicator {
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
@@ -1722,6 +1691,7 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 24px;
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -1747,6 +1717,10 @@
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -3022,6 +2996,27 @@
   width: 100%;
 }
 
+.block-editor-publish-date-time-picker__header {
+  margin-bottom: 1em;
+}
+
+.block-editor-publish-date-time-picker__heading {
+  font-size: 13px;
+  margin: 0;
+}
+
+.block-editor-publish-date-time-picker__reset {
+  height: 24px;
+  margin: 0;
+  text-decoration: underline;
+}
+
+[class].block-editor-publish-date-time-picker__close {
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+
 .block-editor-responsive-block-control {
   margin-bottom: 28px;
   border-bottom: 1px solid #ccc;
@@ -3568,6 +3563,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
+   */
 }
 .color-block-support-panel .block-editor-contrast-checker {
   /**
@@ -3585,6 +3585,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 0;
+}
 
 .block-editor__padding-visualizer {
   position: absolute;

package/build-style/style.css

@@ -1654,21 +1654,10 @@
   min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
-  display: flex;
-  gap: 8px;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  width: 12px;
-  height: 12px;
-  align-self: center;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
-  margin-left: 12px;
-}
-.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: none;
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
+  display: block;
 }
+
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
@@ -1679,31 +1668,11 @@
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
   margin-bottom: inherit;
 }
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
-  display: block;
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
-}
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
   width: 280px;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
-}
-.block-editor-panel-color-gradient-settings__item.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-
 .block-editor-panel-color-gradient-settings__color-indicator {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
@@ -1722,6 +1691,7 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 24px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -1747,6 +1717,10 @@
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -3022,6 +2996,27 @@
   width: 100%;
 }
 
+.block-editor-publish-date-time-picker__header {
+  margin-bottom: 1em;
+}
+
+.block-editor-publish-date-time-picker__heading {
+  font-size: 13px;
+  margin: 0;
+}
+
+.block-editor-publish-date-time-picker__reset {
+  height: 24px;
+  margin: 0;
+  text-decoration: underline;
+}
+
+[class].block-editor-publish-date-time-picker__close {
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+
 .block-editor-responsive-block-control {
   margin-bottom: 28px;
   border-bottom: 1px solid #ccc;
@@ -3568,6 +3563,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
+   */
 }
 .color-block-support-panel .block-editor-contrast-checker {
   /**
@@ -3585,6 +3585,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 0;
+}
 
 .block-editor__padding-visualizer {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.1.0",
+	"version": "9.2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,33 +32,33 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.9.0",
-		"@wordpress/api-fetch": "^6.6.0",
-		"@wordpress/blob": "^3.9.0",
-		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/data": "^6.9.0",
-		"@wordpress/date": "^4.9.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/dom": "^3.9.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/hooks": "^3.9.0",
-		"@wordpress/html-entities": "^3.9.0",
-		"@wordpress/i18n": "^4.9.0",
-		"@wordpress/icons": "^9.0.0",
-		"@wordpress/is-shallow-equal": "^4.9.0",
-		"@wordpress/keyboard-shortcuts": "^3.7.0",
-		"@wordpress/keycodes": "^3.9.0",
-		"@wordpress/notices": "^3.9.0",
-		"@wordpress/rich-text": "^5.7.0",
-		"@wordpress/shortcode": "^3.9.0",
-		"@wordpress/style-engine": "^0.8.0",
-		"@wordpress/token-list": "^2.9.0",
-		"@wordpress/url": "^3.10.0",
-		"@wordpress/warning": "^2.9.0",
-		"@wordpress/wordcount": "^3.9.0",
+		"@react-spring/web": "^9.4.5",
+		"@wordpress/a11y": "^3.10.0",
+		"@wordpress/api-fetch": "^6.7.0",
+		"@wordpress/blob": "^3.10.0",
+		"@wordpress/blocks": "^11.9.0",
+		"@wordpress/components": "^19.12.0",
+		"@wordpress/compose": "^5.8.0",
+		"@wordpress/data": "^6.10.0",
+		"@wordpress/date": "^4.10.0",
+		"@wordpress/deprecated": "^3.10.0",
+		"@wordpress/dom": "^3.10.0",
+		"@wordpress/element": "^4.8.0",
+		"@wordpress/hooks": "^3.10.0",
+		"@wordpress/html-entities": "^3.10.0",
+		"@wordpress/i18n": "^4.10.0",
+		"@wordpress/icons": "^9.1.0",
+		"@wordpress/is-shallow-equal": "^4.10.0",
+		"@wordpress/keyboard-shortcuts": "^3.8.0",
+		"@wordpress/keycodes": "^3.10.0",
+		"@wordpress/notices": "^3.10.0",
+		"@wordpress/rich-text": "^5.8.0",
+		"@wordpress/shortcode": "^3.10.0",
+		"@wordpress/style-engine": "^0.9.0",
+		"@wordpress/token-list": "^2.10.0",
+		"@wordpress/url": "^3.11.0",
+		"@wordpress/warning": "^2.10.0",
+		"@wordpress/wordcount": "^3.10.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -67,7 +67,7 @@
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
-		"rememo": "^3.0.0",
+		"rememo": "^4.0.0",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

package/src/components/block-draggable/draggable-chip.native.js

@@ -41,7 +41,7 @@ export default function BlockDraggableChip( { icon } ) {
 	);
 
 	return (
-		<View style={ [ containerStyle, shadowStyle ] }>
+		<View style={ [ containerStyle, shadowStyle ] } testID="draggable-chip">
 			<BlockIcon icon={ dragHandle } />
 			{ icon && <BlockIcon icon={ icon } /> }
 		</View>

package/src/components/block-draggable/index.native.js

@@ -270,6 +270,7 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 				onDragStart={ startDragging }
 				onDragOver={ updateDragging }
 				onDragEnd={ stopDragging }
+				testID="block-draggable-wrapper"
 			>
 				{ children( { onScroll: scrollHandler } ) }
 			</Draggable>
@@ -302,6 +303,7 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
  * @param {string}      props.clientId           Client id of the block.
  * @param {string}      [props.draggingClientId] Client id to use for dragging. If not defined, the value from `clientId` will be used.
  * @param {boolean}     [props.enabled]          Enables the draggable trigger.
+ * @param {string}      [props.testID]           Id used for querying the long-press gesture handler in tests.
  *
  * @return {Function} Render function which includes the parameter `isDraggable` to determine if the block can be dragged.
  */
@@ -310,6 +312,7 @@ const BlockDraggable = ( {
 	children,
 	draggingClientId,
 	enabled = true,
+	testID,
 } ) => {
 	const wasBeingDragged = useRef( false );
 	const [ isEditingText, setIsEditingText ] = useState( false );
@@ -446,6 +449,7 @@ const BlockDraggable = ( {
 				android: DEFAULT_LONG_PRESS_MIN_DURATION,
 			} ) }
 			onLongPress={ onLongPressDraggable }
+			testID={ testID }
 		>
 			<Animated.View style={ wrapperStyles }>
 				{ children( { isDraggable: true } ) }

package/src/components/block-draggable/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockDraggable moves blocks: Initial order 1`] = `
+"<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`BlockDraggable moves blocks: Paragraph block moved from first to second position 1`] = `
+"<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`BlockDraggable moves blocks: Spacer block moved from third to first position 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
+<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;

package/src/components/block-draggable/test/helpers.native.js

@@ -0,0 +1,183 @@
+/**
+ * External dependencies
+ */
+import {
+	act,
+	fireEvent,
+	initializeEditor,
+	waitForStoreResolvers,
+	within,
+	advanceAnimationByFrame,
+} from 'test/helpers';
+import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
+import { State } from 'react-native-gesture-handler';
+
+// Touch event type constants have been extracted from original source code, as they are not exported in the package.
+// Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
+export const TouchEventType = {
+	UNDETERMINED: 0,
+	TOUCHES_DOWN: 1,
+	TOUCHES_MOVE: 2,
+	TOUCHES_UP: 3,
+	TOUCHES_CANCELLED: 4,
+};
+
+const DEFAULT_TOUCH_EVENTS = [
+	{
+		id: 1,
+		eventType: TouchEventType.TOUCHES_DOWN,
+		x: 0,
+		y: 0,
+	},
+];
+
+/**
+ * @typedef  {Object} WPBlockWithLayout
+ * @property {string} name          Name of the block (e.g. Paragraph).
+ * @property {string} html          HTML content.
+ * @property {Object} layout        Layout data.
+ * @property {Object} layout.x      X position.
+ * @property {Object} layout.y      Y position.
+ * @property {Object} layout.width  Width.
+ * @property {Object} layout.height Height.
+ */
+
+/**
+ * Initialize the editor with an array of blocks that include their HTML and layout.
+ *
+ * @param {WPBlockWithLayout[]} blocks Initial blocks.
+ *
+ * @return {import('@testing-library/react-native').RenderAPI} The Testing Library screen.
+ */
+export const initializeWithBlocksLayouts = async ( blocks ) => {
+	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
+
+	const screen = await initializeEditor( { initialHtml } );
+	const { getByA11yLabel } = screen;
+
+	const waitPromises = [];
+	blocks.forEach( ( block, index ) => {
+		const a11yLabel = new RegExp(
+			`${ block.name } Block\\. Row ${ index + 1 }`
+		);
+		const element = getByA11yLabel( a11yLabel );
+		// "onLayout" event will populate the blocks layouts data.
+		fireEvent( element, 'layout', {
+			nativeEvent: { layout: block.layout },
+		} );
+		if ( block.nestedBlocks ) {
+			// Nested blocks are rendered via the FlatList of the inner block list.
+			// In order to render the items of a FlatList, it's required to trigger the
+			// "onLayout" event. Additionally, the call is wrapped over "waitForStoreResolvers"
+			// because the nested blocks might make API requests (e.g. the Gallery block).
+			waitPromises.push(
+				waitForStoreResolvers( () =>
+					fireEvent(
+						within( element ).getByTestId( 'block-list-wrapper' ),
+						'layout',
+						{
+							nativeEvent: {
+								layout: {
+									width: block.layout.width,
+									height: block.layout.height,
+								},
+							},
+						}
+					)
+				)
+			);
+
+			block.nestedBlocks.forEach( ( nestedBlock, nestedIndex ) => {
+				const nestedA11yLabel = new RegExp(
+					`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
+				);
+				fireEvent(
+					within( element ).getByA11yLabel( nestedA11yLabel ),
+					'layout',
+					{
+						nativeEvent: { layout: nestedBlock.layout },
+					}
+				);
+			} );
+		}
+	} );
+	await Promise.all( waitPromises );
+
+	return screen;
+};
+
+/**
+ * Fires long-press gesture event on a block.
+ *
+ * @param {import('react-test-renderer').ReactTestInstance} block                  Block test instance.
+ * @param {string}                                          testID                 Id for querying the draggable trigger element.
+ * @param {Object}                                          [options]              Configuration options for the gesture event.
+ * @param {boolean}                                         [options.failed]       Determines if the gesture should fail.
+ * @param {number}                                          [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
+ */
+export const fireLongPress = (
+	block,
+	testID,
+	{ failed = false, triggerIndex } = {}
+) => {
+	const draggableTrigger =
+		typeof triggerIndex !== 'undefined'
+			? within( block ).getAllByTestId( testID )[ triggerIndex ]
+			: within( block ).getByTestId( testID );
+	if ( failed ) {
+		fireGestureHandler( draggableTrigger, [ { state: State.FAILED } ] );
+	} else {
+		fireGestureHandler( draggableTrigger, [
+			{ oldState: State.BEGAN, state: State.ACTIVE },
+			{ state: State.ACTIVE },
+			{ state: State.END },
+		] );
+	}
+	// Advance timers one frame to ensure that shared values
+	// are updated and trigger animation reactions.
+	act( () => advanceAnimationByFrame( 1 ) );
+};
+
+/**
+ * Fires pan gesture event on a BlockDraggable component.
+ *
+ * @param {import('react-test-renderer').ReactTestInstance} blockDraggable BlockDraggable test instance.
+ * @param {Object}                                          [touchEvents]  Array of touch events to dispatch on the pan gesture.
+ */
+export const firePanGesture = (
+	blockDraggable,
+	touchEvents = DEFAULT_TOUCH_EVENTS
+) => {
+	const gestureTouchEvents = touchEvents.map(
+		( { eventType, ...touchEvent } ) => ( {
+			allTouches: [ touchEvent ],
+			eventType,
+		} )
+	);
+	fireGestureHandler( blockDraggable, [
+		// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
+		{ oldState: State.BEGAN, state: State.ACTIVE },
+		...gestureTouchEvents,
+		{ state: State.END },
+	] );
+	// Advance timers one frame to ensure that shared values
+	// are updated and trigger animation reactions.
+	act( () => advanceAnimationByFrame( 1 ) );
+};
+
+/**
+ * Gets the draggable chip element.
+ *
+ * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
+ *
+ * @return {import('react-test-renderer').ReactTestInstance} Draggable chip test instance.
+ */
+export const getDraggableChip = ( { getByTestId } ) => {
+	let draggableChip;
+	try {
+		draggableChip = getByTestId( 'draggable-chip' );
+	} catch ( e ) {
+		// NOOP.
+	}
+	return draggableChip;
+};