Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block library: reusable caption component util #56606

Merged
merged 4 commits into from
Dec 1, 2023
Merged

Block library: reusable caption component util #56606

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1cf257c
Block library: reusable caption component util
ellatrix Nov 28, 2023
50ad051
Fix class name
ellatrix Nov 28, 2023
1dd0d4f
Remove obsolete forwardRef
ellatrix Nov 28, 2023
3a88127
fix labels/placeholders
ellatrix Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 11 additions & 74 deletions packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,27 @@ import {
SelectControl,
Spinner,
ToggleControl,
ToolbarButton,
} from '@wordpress/components';
import {
BlockControls,
BlockIcon,
InspectorControls,
MediaPlaceholder,
MediaReplaceFlow,
RichText,
useBlockProps,
store as blockEditorStore,
__experimentalGetElementClassName,
} from '@wordpress/block-editor';
import { useEffect, useState, useCallback } from '@wordpress/element';
import { useEffect } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { audio as icon, caption as captionIcon } from '@wordpress/icons';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { audio as icon } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { usePrevious } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { createUpgradedEmbedBlock } from '../embed/util';
import { Caption } from '../utils/caption';

const ALLOWED_MEDIA_TYPES = [ 'audio' ];

Expand All @@ -49,9 +45,7 @@ function AudioEdit( {
isSelected,
insertBlocksAfter,
} ) {
const { id, autoplay, caption, loop, preload, src } = attributes;
const prevCaption = usePrevious( caption );
const [ showCaption, setShowCaption ] = useState( !! caption );
const { id, autoplay, loop, preload, src } = attributes;
const isTemporaryAudio = ! id && isBlobURL( src );
const mediaUpload = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand All @@ -73,30 +67,6 @@ function AudioEdit( {
}
}, [] );

// We need to show the caption when changes come from
// history navigation(undo/redo).
useEffect( () => {
if ( caption && ! prevCaption ) {
setShowCaption( true );
}
}, [ caption, prevCaption ] );

// Focus the caption when we click to add one.
const captionRef = useCallback(
( node ) => {
if ( node && ! caption ) {
node.focus();
}
},
[ caption ]
);

useEffect( () => {
if ( ! isSelected && ! caption ) {
setShowCaption( false );
}
}, [ isSelected, caption ] );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that I've also optimised these useEffect and useCallback calls. Previously these callbacks would get called whenever you type in the caption, now they're only called if emptiness changes.


function toggleAttribute( attribute ) {
return ( newValue ) => {
setAttributes( { [ attribute ]: newValue } );
Expand Down Expand Up @@ -176,23 +146,6 @@ function AudioEdit( {

return (
<>
<BlockControls group="block">
<ToolbarButton
onClick={ () => {
setShowCaption( ! showCaption );
if ( showCaption && caption ) {
setAttributes( { caption: undefined } );
}
} }
icon={ captionIcon }
isPressed={ showCaption }
label={
showCaption
? __( 'Remove caption' )
: __( 'Add caption' )
}
/>
</BlockControls>
<BlockControls group="other">
<MediaReplaceFlow
mediaId={ id }
Expand Down Expand Up @@ -251,29 +204,13 @@ function AudioEdit( {
<audio controls="controls" src={ src } />
</Disabled>
{ isTemporaryAudio && <Spinner /> }
{ showCaption &&
( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
identifier="caption"
tagName="figcaption"
className={ __experimentalGetElementClassName(
'caption'
) }
ref={ captionRef }
aria-label={ __( 'Audio caption text' ) }
placeholder={ __( 'Add caption' ) }
value={ caption }
onChange={ ( value ) =>
setAttributes( { caption: value } )
}
inlineToolbar
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock( getDefaultBlockName() )
)
}
/>
) }
<Caption
attributes={ attributes }
setAttributes={ setAttributes }
isSelected={ isSelected }
insertBlocksAfter={ insertBlocksAfter }
label={ __( 'Audio caption text' ) }
/>
</figure>
</>
);
Expand Down
63 changes: 4 additions & 59 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,14 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { compose, usePrevious } from '@wordpress/compose';
import { compose } from '@wordpress/compose';
import {
BaseControl,
PanelBody,
SelectControl,
ToggleControl,
RangeControl,
Spinner,
ToolbarButton,
} from '@wordpress/components';
import {
store as blockEditorStore,
Expand All @@ -25,21 +24,14 @@ import {
BlockControls,
MediaReplaceFlow,
} from '@wordpress/block-editor';
import {
Platform,
useCallback,
useEffect,
useState,
useMemo,
} from '@wordpress/element';
import { Platform, useEffect, useMemo } from '@wordpress/element';
import { __, _x, sprintf } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { withViewportMatch } from '@wordpress/viewport';
import { View } from '@wordpress/primitives';
import { createBlock } from '@wordpress/blocks';
import { createBlobURL } from '@wordpress/blob';
import { store as noticesStore } from '@wordpress/notices';
import { caption as captionIcon } from '@wordpress/icons';

/**
* Internal dependencies
Expand Down Expand Up @@ -94,34 +86,7 @@ function GalleryEdit( props ) {
onFocus,
} = props;

const { columns, imageCrop, linkTarget, linkTo, sizeSlug, caption } =
attributes;
const [ showCaption, setShowCaption ] = useState( !! caption );
const prevCaption = usePrevious( caption );

// We need to show the caption when changes come from
// history navigation(undo/redo).
useEffect( () => {
if ( caption && ! prevCaption ) {
setShowCaption( true );
}
}, [ caption, prevCaption ] );

useEffect( () => {
if ( ! isSelected && ! caption ) {
setShowCaption( false );
}
}, [ isSelected, caption ] );

// Focus the caption when we click to add one.
const captionRef = useCallback(
( node ) => {
if ( node && ! caption ) {
node.focus();
}
},
[ caption ]
);
const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;

const {
__unstableMarkNextChangeAsNotPersistent,
Expand Down Expand Up @@ -620,25 +585,6 @@ function GalleryEdit( props ) {
</InspectorControls>
{ Platform.isWeb && (
<>
<BlockControls group="block">
{ ! isContentLocked && (
<ToolbarButton
onClick={ () => {
setShowCaption( ! showCaption );
if ( showCaption && caption ) {
setAttributes( { caption: undefined } );
}
} }
icon={ captionIcon }
isPressed={ showCaption }
label={
showCaption
? __( 'Remove caption' )
: __( 'Add caption' )
}
/>
) }
</BlockControls>
<BlockControls group="other">
<MediaReplaceFlow
allowedTypes={ ALLOWED_MEDIA_TYPES }
Expand All @@ -661,8 +607,7 @@ function GalleryEdit( props ) {
) }
<Gallery
{ ...props }
showCaption={ showCaption }
ref={ Platform.isWeb ? captionRef : undefined }
isContentLocked={ isContentLocked }
images={ images }
mediaPlaceholder={
! hasImages || Platform.isNative
Expand Down
54 changes: 17 additions & 37 deletions packages/block-library/src/gallery/gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,14 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import {
RichText,
__experimentalGetElementClassName,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { View } from '@wordpress/primitives';
import { forwardRef } from '@wordpress/element';

export const Gallery = ( props, captionRef ) => {
/**
* Internal dependencies
*/
import { Caption } from '../utils/caption';

export default function Gallery( props ) {
const {
attributes,
isSelected,
Expand All @@ -24,10 +22,10 @@ export const Gallery = ( props, captionRef ) => {
insertBlocksAfter,
blockProps,
__unstableLayoutClassNames: layoutClassNames,
showCaption,
isContentLocked,
} = props;

const { align, columns, caption, imageCrop } = attributes;
const { align, columns, imageCrop } = attributes;

return (
<figure
Expand All @@ -50,32 +48,14 @@ export const Gallery = ( props, captionRef ) => {
{ mediaPlaceholder }
</View>
) }
{ showCaption &&
( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
identifier="caption"
aria-label={ __( 'Gallery caption text' ) }
placeholder={ __( 'Write gallery caption…' ) }
value={ caption }
className={ classnames(
'blocks-gallery-caption',
__experimentalGetElementClassName( 'caption' )
) }
ref={ captionRef }
tagName="figcaption"
onChange={ ( value ) =>
setAttributes( { caption: value } )
}
inlineToolbar
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock( getDefaultBlockName() )
)
}
/>
) }
<Caption
attributes={ attributes }
setAttributes={ setAttributes }
isSelected={ isSelected }
insertBlocksAfter={ insertBlocksAfter }
showToolbarButton={ ! isContentLocked }
className="blocks-gallery-caption"
/>
</figure>
);
};

export default forwardRef( Gallery );
}
Loading