add classes the captions

WordPress · Jun 16, 2022 · d4718ba · d4718ba
1 parent 0a68440
commit d4718ba
Show file tree

Hide file tree

Showing 16 changed files with 38 additions and 22 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
@@ -15,17 +15,6 @@
  * @access private
  */
 class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
-	const ELEMENTS = array(
-		'link'   => 'a',
-		'h1'     => 'h1',
-		'h2'     => 'h2',
-		'h3'     => 'h3',
-		'h4'     => 'h4',
-		'h5'     => 'h5',
-		'h6'     => 'h6',
-		'button' => '.wp-element-button, .wp-block-button__link', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
-	);
-
 	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
 		'button' => 'wp-element-button',
 	);
@@ -56,7 +45,8 @@ public static function get_element_class_name( $element ) {
 		'h4'   => 'h4',
 		'h5'   => 'h5',
 		'h6'   => 'h6',
-		'caption' => 'figcaption',
+		'button' => '.wp-element-button, .wp-block-button__link', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
+		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption', // The block classes are necessary to target older content that won't use the new class names.
 	);
 
 	/**

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -200,6 +200,7 @@ function AudioEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className="wp-element-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
@@ -17,7 +17,11 @@ export default function save( { attributes } ) {
 					preload={ preload }
 				/>
 				{ ! RichText.isEmpty( caption ) && (
-					<RichText.Content tagName="figcaption" value={ caption } />
+					<RichText.Content
+						tagName="figcaption"
+						value={ caption }
+						className="wp-element-caption"
+					/>
 				) }
 			</figure>
 		)

diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
@@ -140,6 +140,7 @@ class EmbedPreview extends Component {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className="wp-element-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
@@ -27,7 +27,11 @@ export default function save( { attributes } ) {
 				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
 			</div>
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className="wp-element-caption"
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</figure>
 	);

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -82,7 +82,7 @@ export const Gallery = ( props ) => {
 				captionFocused={ captionFocused }
 				onFocusCaption={ onFocusCaption }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className="blocks-gallery-caption wp-element-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
@@ -39,7 +39,7 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className="blocks-gallery-caption wp-element-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
@@ -245,6 +245,7 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
+						className="wp-element-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
@@ -94,7 +94,7 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className="blocks-gallery-caption wp-element-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
@@ -60,7 +60,7 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className="blocks-gallery-item__caption"
+										className="blocks-gallery-item__caption wp-element-caption"
 										value={ image.caption }
 									/>
 								) }
@@ -72,7 +72,7 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className="blocks-gallery-caption wp-element-caption"
 					value={ caption }
 				/>
 			) }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -576,6 +576,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
+					className="wp-element-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
@@ -60,7 +60,11 @@ export default function save( { attributes } ) {
 				image
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className="wp-element-caption"
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</>
 	);

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -509,6 +509,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
+					className="wp-element-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
@@ -82,7 +82,11 @@ export default function save( { attributes } ) {
 				<Section type="foot" rows={ foot } />
 			</table>
 			{ hasCaption && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					tagName="figcaption"
+					value={ caption }
+					className="wp-element-caption"
+				/>
 			) }
 		</figure>
 	);

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -266,6 +266,7 @@ function VideoEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className="wp-element-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
@@ -38,7 +38,11 @@ export default function save( { attributes } ) {
 				</video>
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className="wp-element-caption"
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</figure>
 	);