From ecb4bf4bb05fc8dcfc91bb0cd7340ff0c423e8b3 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 16 Jun 2022 13:39:05 +0100
Subject: [PATCH] replace static class name with calls to
 __experimentalGetElementClassName

---
 .../wordpress-6.1/class-wp-theme-json-6-1.php |  1 +
 packages/block-editor/src/elements/index.js   |  1 +
 packages/block-library/src/audio/edit.js      |  5 +++-
 packages/block-library/src/audio/save.js      | 10 ++++++--
 .../block-library/src/embed/embed-preview.js  | 10 ++++++--
 packages/block-library/src/embed/save.js      |  8 +++++--
 packages/block-library/src/gallery/gallery.js | 11 +++++++--
 packages/block-library/src/gallery/save.js    |  6 ++++-
 .../src/gallery/v1/gallery-image.js           |  5 +++-
 .../block-library/src/gallery/v1/gallery.js   | 10 ++++++--
 packages/block-library/src/gallery/v1/save.js | 23 ++++++++++++++++---
 packages/block-library/src/image/image.js     |  3 ++-
 packages/block-library/src/image/save.js      |  8 +++++--
 packages/block-library/src/table/edit.js      |  3 ++-
 packages/block-library/src/table/save.js      |  3 ++-
 packages/block-library/src/video/edit.js      |  5 +++-
 packages/block-library/src/video/save.js      |  8 +++++--
 17 files changed, 96 insertions(+), 24 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index c7e17d3f623c63..c5bbf1667192c4 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -17,6 +17,7 @@
 class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
 		'button' => 'wp-element-button',
+		'caption' => 'wp-element-caption',
 	);
 
 	/**
diff --git a/packages/block-editor/src/elements/index.js b/packages/block-editor/src/elements/index.js
index 5d74bb3c0c9962..4cc7893583a118 100644
--- a/packages/block-editor/src/elements/index.js
+++ b/packages/block-editor/src/elements/index.js
@@ -1,5 +1,6 @@
 const ELEMENT_CLASS_NAMES = {
 	button: 'wp-element-button',
+	caption: 'wp-element-caption',
 };
 
 export const __experimentalGetElementClassName = ( element ) => {
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index a482f568c4b82b..c220ea33c71fdb 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -24,6 +24,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
@@ -200,7 +201,9 @@ function AudioEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
-						className="wp-element-caption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Audio caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }
diff --git a/packages/block-library/src/audio/save.js b/packages/block-library/src/audio/save.js
index 758b40ab843416..4db5a044cd7617 100644
--- a/packages/block-library/src/audio/save.js
+++ b/packages/block-library/src/audio/save.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { autoplay, caption, loop, preload, src } = attributes;
@@ -20,7 +24,9 @@ export default function save( { attributes } ) {
 					<RichText.Content
 						tagName="figcaption"
 						value={ caption }
-						className="wp-element-caption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 					/>
 				) }
 			</figure>
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index 4bdd7d0ba9f5f2..5fa959375245bf 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -13,7 +13,11 @@ import classnames from 'classnames/dedupe';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import { RichText, BlockIcon } from '@wordpress/block-editor';
+import {
+	RichText,
+	BlockIcon,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
@@ -140,7 +144,9 @@ class EmbedPreview extends Component {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
-						className="wp-element-caption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }
 						onChange={ onCaptionChange }
diff --git a/packages/block-library/src/embed/save.js b/packages/block-library/src/embed/save.js
index ddf3b8e728d1b1..cb52b22b9b7448 100644
--- a/packages/block-library/src/embed/save.js
+++ b/packages/block-library/src/embed/save.js
@@ -6,7 +6,11 @@ import classnames from 'classnames/dedupe';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { url, caption, type, providerNameSlug } = attributes;
@@ -28,7 +32,7 @@ export default function save( { attributes } ) {
 			</div>
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
-					className="wp-element-caption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					tagName="figcaption"
 					value={ caption }
 				/>
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 39e13ff73b7dba..b3933e2a1b7b7a 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useInnerBlocksProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -82,7 +86,10 @@ export const Gallery = ( props ) => {
 				captionFocused={ captionFocused }
 				onFocusCaption={ onFocusCaption }
 				tagName="figcaption"
-				className="blocks-gallery-caption wp-element-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }
diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index e78df57288b818..66253001e64182 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -10,6 +10,7 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 /**
@@ -39,7 +40,10 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption wp-element-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }
diff --git a/packages/block-library/src/gallery/v1/gallery-image.js b/packages/block-library/src/gallery/v1/gallery-image.js
index c42bf96a808b6b..9520a5ba76349a 100644
--- a/packages/block-library/src/gallery/v1/gallery-image.js
+++ b/packages/block-library/src/gallery/v1/gallery-image.js
@@ -16,6 +16,7 @@ import {
 	RichText,
 	MediaPlaceholder,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 import { compose } from '@wordpress/compose';
@@ -245,7 +246,9 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
-						className="wp-element-caption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ isSelected ? __( 'Add caption' ) : null }
 						value={ caption }
diff --git a/packages/block-library/src/gallery/v1/gallery.js b/packages/block-library/src/gallery/v1/gallery.js
index 3febb9fa31ce93..7fc587f27911a6 100644
--- a/packages/block-library/src/gallery/v1/gallery.js
+++ b/packages/block-library/src/gallery/v1/gallery.js
@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -94,7 +97,10 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className="blocks-gallery-caption wp-element-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }
diff --git a/packages/block-library/src/gallery/v1/save.js b/packages/block-library/src/gallery/v1/save.js
index 98eae5db5389aa..bf8be9ba413b4f 100644
--- a/packages/block-library/src/gallery/v1/save.js
+++ b/packages/block-library/src/gallery/v1/save.js
@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -60,7 +69,12 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className="blocks-gallery-item__caption wp-element-caption"
+										className={ classnames(
+											'blocks-gallery-item',
+											__experimentalGetElementClassName(
+												'caption'
+											)
+										) }
 										value={ image.caption }
 									/>
 								) }
@@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption wp-element-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 5b7a4f3f45e46e..52fa307cecac80 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -29,6 +29,7 @@ import {
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -576,7 +577,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
-					className="wp-element-caption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					ref={ captionRef }
 					tagName="figcaption"
 					aria-label={ __( 'Image caption text' ) }
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index ff8f12f2f37720..3de4f1c1fe5104 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -7,7 +7,11 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -61,7 +65,7 @@ export default function save( { attributes } ) {
 			) }
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
-					className="wp-element-caption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					tagName="figcaption"
 					value={ caption }
 				/>
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index dd72b8b543aa46..abb6438cb56785 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -509,7 +510,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
-					className="wp-element-caption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
 					placeholder={ __( 'Add caption' ) }
 					value={ caption }
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
index 0ee3ce3de7cd81..4e0c4f1956cc19 100644
--- a/packages/block-library/src/table/save.js
+++ b/packages/block-library/src/table/save.js
@@ -11,6 +11,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -85,7 +86,7 @@ export default function save( { attributes } ) {
 				<RichText.Content
 					tagName="figcaption"
 					value={ caption }
-					className="wp-element-caption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 				/>
 			) }
 		</figure>
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 91b35280092368..3d6467474ca51f 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -26,6 +26,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -266,7 +267,9 @@ function VideoEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
-						className="wp-element-caption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Video caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }
diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index 1f277d428c9920..834ba3e84ac867 100644
--- a/packages/block-library/src/video/save.js
+++ b/packages/block-library/src/video/save.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -39,7 +43,7 @@ export default function save( { attributes } ) {
 			) }
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
-					className="wp-element-caption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					tagName="figcaption"
 					value={ caption }
 				/>