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 c7e17d3f623c6..c5bbf1667192c 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 5d74bb3c0c996..4cc7893583a11 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 a482f568c4b82..c220ea33c71fd 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 ) && (
) }
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index 4bdd7d0ba9f5f..5fa959375245b 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.isEmpty( caption ) && (
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 39e13ff73b7db..b3933e2a1b7b7 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 e78df57288b81..66253001e6418 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 ) && (
) }
diff --git a/packages/block-library/src/gallery/v1/gallery-image.js b/packages/block-library/src/gallery/v1/gallery-image.js
index c42bf96a808b6..9520a5ba76349 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 ) && (
{
) }
@@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
{ ! RichText.isEmpty( caption ) && (
) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 5b7a4f3f45e46..52fa307cecac8 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 ) && (
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index dd72b8b543aa4..abb6438cb5678 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 && (
) }
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 91b3528009236..3d6467474ca51 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 ) && (