Skip to content

Commit

Permalink
Image: add flow for converting to cover block from toolbar. (#28414)
Browse files Browse the repository at this point in the history
Only display if `core/cover` is registered and single block is selected.
  • Loading branch information
mtias authored Jan 22, 2021
1 parent 7d1c559 commit 90697bb
Showing 1 changed file with 35 additions and 7 deletions.
42 changes: 35 additions & 7 deletions packages/block-library/src/image/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,12 @@ import {
import { useEffect, useState, useRef } from '@wordpress/element';
import { __, sprintf, isRTL } from '@wordpress/i18n';
import { getPath } from '@wordpress/url';
import { createBlock } from '@wordpress/blocks';
import { crop, upload } from '@wordpress/icons';
import {
createBlock,
getBlockType,
switchToBlockType,
} from '@wordpress/blocks';
import { crop, textColor, upload } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';

/**
Expand Down Expand Up @@ -83,14 +87,19 @@ export default function Image( {
} ) {
const captionRef = useRef();
const prevUrl = usePrevious( url );
const { image, multiImageSelection } = useSelect(
const { block, currentId, image, multiImageSelection } = useSelect(
( select ) => {
const { getMedia } = select( 'core' );
const { getMultiSelectedBlockClientIds, getBlockName } = select(
'core/block-editor'
);
const {
getMultiSelectedBlockClientIds,
getBlockName,
getSelectedBlock,
getSelectedBlockClientId,
} = select( 'core/block-editor' );
const multiSelectedClientIds = getMultiSelectedBlockClientIds();
return {
block: getSelectedBlock(),

This comment has been minimized.

Copy link
@ellatrix

ellatrix May 21, 2021

Member

This will cause all image blocks to re-render when typing in a random other block. Can't be use the client ID here?

currentId: getSelectedBlockClientId(),
image: id && isSelected ? getMedia( id ) : null,
multiImageSelection:
multiSelectedClientIds.length &&
Expand All @@ -113,7 +122,9 @@ export default function Image( {
] );
}
);
const { toggleSelection } = useDispatch( 'core/block-editor' );
const { replaceBlocks, toggleSelection } = useDispatch(
'core/block-editor'
);
const { createErrorNotice, createSuccessNotice } = useDispatch(
noticesStore
);
Expand All @@ -132,6 +143,9 @@ export default function Image( {
( { name, slug } ) => ( { value: slug, label: name } )
);

// Check if the cover block is registered.
const coverBlockExists = !! getBlockType( 'core/cover' );

useEffect( () => {
if ( ! isSelected ) {
setCaptionFocused( false );
Expand Down Expand Up @@ -300,6 +314,20 @@ export default function Image( {
onError={ onUploadError }
/>
) }
{ ! multiImageSelection && coverBlockExists && (
<ToolbarGroup>
<ToolbarButton
icon={ textColor }
label={ __( 'Add text over image' ) }
onClick={ () =>
replaceBlocks(
currentId,
switchToBlockType( block, 'core/cover' )
)
}
/>
</ToolbarGroup>
) }
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'Image settings' ) }>
Expand Down

0 comments on commit 90697bb

Please sign in to comment.