Skip to content

Commit

Permalink
add classes the captions
Browse files Browse the repository at this point in the history
  • Loading branch information
scruffian committed Jun 22, 2022
1 parent fa99eef commit 7bec425
Show file tree
Hide file tree
Showing 16 changed files with 38 additions and 22 deletions.
14 changes: 2 additions & 12 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
);
Expand Down Expand Up @@ -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.
);

/**
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/audio/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/audio/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/embed/embed-preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/embed/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/gallery/gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/gallery/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
/>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/v1/gallery-image.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/gallery/v1/gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/gallery/v1/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
/>
) }
Expand All @@ -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 }
/>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/image/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/image/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
/>
) }
</>
);
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/table/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -509,6 +509,7 @@ function TableEdit( {
{ ! isEmpty && (
<RichText
tagName="figcaption"
className="wp-element-caption"
aria-label={ __( 'Table caption text' ) }
placeholder={ __( 'Add caption' ) }
value={ caption }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/table/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/video/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/video/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 7bec425

Please sign in to comment.