Skip to content

Commit

Permalink
Global Styles: Add support for caption elements (#41140)
Browse files Browse the repository at this point in the history
* dd caption element

* test: Revert image caption class name addition for native test fixtures

The current save output for native editor Image and Gallery blocks do
not expect this class name. I did not identify the exact cause, but this
does fix the failing existing tests.

* test: Reinstate image caption class name for Image block test fixture

The native editor test fixtures includes a Gallery block v1 (which needs
to upgraded to v2 at some point). Adding a `wp-element-caption` to this
test fixture causes parsing failure.

The lack of `wp-element-caption` class name for the Image block causes
an unnecessary block update during test runs.

The `wp-element-caption` class name was added to the native editor test
fixtures for both the Gallery and Image. The addition was only needed
for the latter. The previous commit erroneously removed the class name
for both. This commit reinstates the class name for the latter.

* update snapshot

Co-authored-by: David Calhoun <[email protected]>
  • Loading branch information
scruffian and dcalhoun authored Jun 24, 2022
1 parent 2503b10 commit c489f75
Show file tree
Hide file tree
Showing 39 changed files with 175 additions and 75 deletions.
25 changes: 16 additions & 9 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 @@ -25,19 +25,26 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
'link' => array( ':hover', ':focus', ':active' ),
);

/*
* The valid elements that can be found under styles.
*
* @var string[]
*/
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.
'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.
'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.
);

const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
'button' => 'wp-element-button',
'button' => 'wp-element-button',
'caption' => 'wp-element-caption',
);

/**
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/elements/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const ELEMENT_CLASS_NAMES = {
button: 'wp-element-button',
caption: 'wp-element-caption',
};

export const __experimentalGetElementClassName = ( element ) => {
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/audio/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -200,6 +201,9 @@ function AudioEdit( {
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
className={ __experimentalGetElementClassName(
'caption'
) }
aria-label={ __( 'Audio caption text' ) }
placeholder={ __( 'Add caption' ) }
value={ caption }
Expand Down
14 changes: 12 additions & 2 deletions packages/block-library/src/audio/save.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -17,7 +21,13 @@ export default function save( { attributes } ) {
preload={ preload }
/>
{ ! RichText.isEmpty( caption ) && (
<RichText.Content tagName="figcaption" value={ caption } />
<RichText.Content
tagName="figcaption"
value={ caption }
className={ __experimentalGetElementClassName(
'caption'
) }
/>
) }
</figure>
)
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/embed/embed-preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -140,6 +144,9 @@ class EmbedPreview extends Component {
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
className={ __experimentalGetElementClassName(
'caption'
) }
placeholder={ __( 'Add caption' ) }
value={ caption }
onChange={ onCaptionChange }
Expand Down
12 changes: 10 additions & 2 deletions packages/block-library/src/embed/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,7 +31,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={ __experimentalGetElementClassName( 'caption' ) }
tagName="figcaption"
value={ caption }
/>
) }
</figure>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,6 @@ exports[`Embed block sets block caption 1`] = `
"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
https://twitter.com/notnownikki
</div><figcaption>Caption</figcaption></figure>
</div><figcaption class=\\"wp-element-caption\\">Caption</figcaption></figure>
<!-- /wp:embed -->"
`;
11 changes: 9 additions & 2 deletions packages/block-library/src/gallery/gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -82,7 +86,10 @@ export const Gallery = ( props ) => {
captionFocused={ captionFocused }
onFocusCaption={ onFocusCaption }
tagName="figcaption"
className="blocks-gallery-caption"
className={ classnames(
'blocks-gallery-caption',
__experimentalGetElementClassName( 'caption' )
) }
aria-label={ __( 'Gallery caption text' ) }
placeholder={ __( 'Write gallery caption…' ) }
value={ caption }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/gallery/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
RichText,
useBlockProps,
useInnerBlocksProps,
__experimentalGetElementClassName,
} from '@wordpress/block-editor';

/**
Expand Down Expand Up @@ -39,7 +40,10 @@ export default function saveWithInnerBlocks( { attributes } ) {
{ ! RichText.isEmpty( caption ) && (
<RichText.Content
tagName="figcaption"
className="blocks-gallery-caption"
className={ classnames(
'blocks-gallery-caption',
__experimentalGetElementClassName( 'caption' )
) }
value={ caption }
/>
) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,14 @@ exports[`Gallery block sets caption to gallery 1`] = `
"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
<!-- /wp:gallery -->"
`;
exports[`Gallery block sets caption to gallery items 1`] = `
"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->"
`;
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/gallery/v1/gallery-image.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -245,6 +246,9 @@ class GalleryImage extends Component {
{ ! isEditing && ( isSelected || caption ) && (
<RichText
tagName="figcaption"
className={ __experimentalGetElementClassName(
'caption'
) }
aria-label={ __( 'Image caption text' ) }
placeholder={ isSelected ? __( 'Add caption' ) : null }
value={ caption }
Expand Down
10 changes: 8 additions & 2 deletions packages/block-library/src/gallery/v1/gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -94,7 +97,10 @@ export const Gallery = ( props ) => {
<RichTextVisibilityHelper
isHidden={ ! isSelected && RichText.isEmpty( caption ) }
tagName="figcaption"
className="blocks-gallery-caption"
className={ classnames(
'blocks-gallery-caption',
__experimentalGetElementClassName( 'caption' )
) }
aria-label={ __( 'Gallery caption text' ) }
placeholder={ __( 'Write gallery caption…' ) }
value={ caption }
Expand Down
23 changes: 20 additions & 3 deletions packages/block-library/src/gallery/v1/save.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -60,7 +69,12 @@ export default function saveV1( { attributes } ) {
{ ! RichText.isEmpty( image.caption ) && (
<RichText.Content
tagName="figcaption"
className="blocks-gallery-item__caption"
className={ classnames(
'blocks-gallery-item',
__experimentalGetElementClassName(
'caption'
)
) }
value={ image.caption }
/>
) }
Expand All @@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
{ ! RichText.isEmpty( caption ) && (
<RichText.Content
tagName="figcaption"
className="blocks-gallery-caption"
className={ classnames(
'blocks-gallery-caption',
__experimentalGetElementClassName( 'caption' )
) }
value={ caption }
/>
) }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/image/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -576,6 +577,7 @@ export default function Image( {
{ img }
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
className={ __experimentalGetElementClassName( 'caption' ) }
ref={ captionRef }
tagName="figcaption"
aria-label={ __( 'Image caption text' ) }
Expand Down
12 changes: 10 additions & 2 deletions packages/block-library/src/image/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -60,7 +64,11 @@ export default function save( { attributes } ) {
image
) }
{ ! RichText.isEmpty( caption ) && (
<RichText.Content tagName="figcaption" value={ caption } />
<RichText.Content
className={ __experimentalGetElementClassName( 'caption' ) }
tagName="figcaption"
value={ caption }
/>
) }
</>
);
Expand Down
Loading

0 comments on commit c489f75

Please sign in to comment.