Stabilise role attribute property and related functions (#65484)

* Update usages * Update related functions * Remove unwanted alias * Properly deprecate the experimental method * Deprecate and ensure backwards compatibility * Make selector private * Ensure serializer works backwards compat * Ensure experiment API method still exposed on blocks package * Add hint for updating role attribute * Remove unlock * Improve readability of proxying * Add hint to serializer * use stabilised selector for the content role for edit mode * Attempt locking to fix unit test * Ensure mock returns correct value --------- Co-authored-by: getdave <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: fabiankaegy <[email protected]>
WordPress · Sep 24, 2024 · 4f5380e · 4f5380e
1 parent a644eb3
commit 4f5380e
Show file tree

Hide file tree

Showing 42 changed files with 250 additions and 182 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
@@ -20,15 +20,15 @@ describe( 'use-transformed-patterns', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save() {},

diff --git a/packages/block-editor/src/components/block-switcher/test/utils.js b/packages/block-editor/src/components/block-switcher/test/utils.js
@@ -18,15 +18,15 @@ describe( 'BlockSwitcher - utils', () => {
 					},
 					content: {
 						type: 'boolean',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					level: {
 						type: 'number',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					color: {
 						type: 'string',
-						__experimentalRole: 'other',
+						role: 'other',
 					},
 				},
 				save() {},

diff --git a/packages/block-editor/src/components/block-switcher/utils.js b/packages/block-editor/src/components/block-switcher/utils.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
 
 /**
  * Try to find a matching block by a block's name in a provided

diff --git a/packages/block-editor/src/components/block-variation-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -21,6 +21,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function VariationsButtons( {
 	className,
@@ -142,18 +143,16 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { activeBlockVariation, variations, isContentOnly } = useSelect(
 		( select ) => {
-			const {
-				getActiveBlockVariation,
-				getBlockVariations,
-				__experimentalHasContentRoleAttribute,
-			} = select( blocksStore );
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
 			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
 				select( blockEditorStore );
 
 			const name = blockClientId && getBlockName( blockClientId );
 
-			const isContentBlock =
-				__experimentalHasContentRoleAttribute( name );
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
 
 			return {
 				activeBlockVariation: getActiveBlockVariation(

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2443,7 +2443,7 @@ export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
  * Determines the items that appear in the available pattern transforms list.
  *
  * For now we only handle blocks without InnerBlocks and take into account
- * the `__experimentalRole` property of blocks' attributes for the transformation.
+ * the `role` property of blocks' attributes for the transformation.
  *
  * We return the first set of possible eligible block patterns,
  * by checking the `blockTypes` property. We still have to recurse through
@@ -2465,7 +2465,7 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
 				}
 				/**
 				 * For now we only handle blocks without InnerBlocks and take into account
-				 * the `__experimentalRole` property of blocks' attributes for the transformation.
+				 * the `role` property of blocks' attributes for the transformation.
 				 * Note that the blocks have been retrieved through `getBlock`, which doesn't
 				 * return the inner blocks of an inner block controller, so we still need
 				 * to check for this case too.
@@ -2970,10 +2970,11 @@ export const getBlockEditingMode = createRegistrySelector(
 				// The rest of the blocks depend on whether they are content blocks or not.
 				// This "flattens" the sections tree.
 				const name = getBlockName( state, clientId );
-				const isContent =
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					);
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
+
 				return isContent ? 'contentOnly' : 'disabled';
 			}
 
@@ -2993,10 +2994,10 @@ export const getBlockEditingMode = createRegistrySelector(
 			// If the parent of the block is contentOnly locked, check whether it's a content block.
 			if ( templateLock === 'contentOnly' ) {
 				const name = getBlockName( state, clientId );
-				const isContent =
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					);
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
 				return isContent ? 'contentOnly' : 'disabled';
 			}
 			// Otherwise, check if there's an ancestor that is contentOnly

diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
@@ -124,10 +124,10 @@ describe( 'private selectors', () => {
 			blockEditingModes: new Map( [] ),
 		};
 
-		const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+		const hasContentRoleAttribute = jest.fn( () => false );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
-				__experimentalHasContentRoleAttribute,
+				hasContentRoleAttribute,
 			} ) ),
 		};
 

diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
@@ -16,6 +16,7 @@ import { select, dispatch } from '@wordpress/data';
 import * as selectors from '../selectors';
 import { store } from '../';
 import { sectionRootClientIdKey } from '../private-keys';
+import { lock } from '../../lock-unlock';
 
 const {
 	getBlockName,
@@ -4475,14 +4476,14 @@ describe( 'getBlockEditingMode', () => {
 		},
 	};
 
-	const __experimentalHasContentRoleAttribute = jest.fn( ( name ) => {
-		// consider paragraphs as content blocks.
-		return name === 'core/p';
-	} );
+	const hasContentRoleAttribute = jest.fn( () => false );
+
+	const fauxPrivateAPIs = {};
+
+	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+
 	getBlockEditingMode.registry = {
-		select: jest.fn( () => ( {
-			__experimentalHasContentRoleAttribute,
-		} ) ),
+		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
 	it( 'should return default by default', () => {
@@ -4586,7 +4587,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
+		hasContentRoleAttribute.mockReturnValueOnce( false );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'disabled' );
@@ -4602,7 +4603,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'contentOnly' );
@@ -4642,12 +4643,15 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
 				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
 			)
 		).toBe( 'contentOnly' );
+
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,

diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
@@ -10,24 +10,24 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "audio",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"autoplay": {
 			"type": "boolean",

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -26,34 +26,34 @@
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a,button",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"text": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "a,button",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "target",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "rel",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"placeholder": {
 			"type": "string"

diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
@@ -34,7 +34,7 @@
 		},
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",

diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
@@ -9,21 +9,21 @@
 	"attributes": {
 		"url": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"providerNameSlug": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"allowResponsive": {
 			"type": "boolean",
@@ -32,12 +32,12 @@
 		"responsive": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"previewable": {
 			"type": "boolean",
 			"default": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
@@ -13,7 +13,7 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"href": {
 			"type": "string"

diff --git a/packages/block-library/src/form-input/block.json b/packages/block-library/src/form-input/block.json
@@ -23,7 +23,7 @@
 			"default": "Label",
 			"selector": ".wp-block-form-input__label-content",
 			"source": "rich-text",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"inlineLabel": {
 			"type": "boolean",
@@ -41,7 +41,7 @@
 			"selector": ".wp-block-form-input__input",
 			"source": "attribute",
 			"attribute": "placeholder",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"value": {
 			"type": "string",

diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
@@ -41,7 +41,7 @@ const v2 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -59,7 +59,7 @@ const v2 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',
@@ -155,7 +155,7 @@ const v1 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -173,7 +173,7 @@ const v1 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',

diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
@@ -15,7 +15,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "h1,h2,h3,h4,h5,h6",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"level": {
 			"type": "number",