Image: Adds the block controls for uploading image. #64320
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,17 +12,21 @@ import { Placeholder } from '@wordpress/components'; | |
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { | ||
| BlockIcon, | ||
| useBlockProps, | ||
| MediaPlaceholder, | ||
| store as blockEditorStore, | ||
| __experimentalUseBorderProps as useBorderProps, | ||
| __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, | ||
| useBlockEditingMode, | ||
| MediaReplaceFlow, | ||
| BlockControls, | ||
| __experimentalLinkControl as LinkControl, | ||
| } from '@wordpress/block-editor'; | ||
| import { useEffect, useRef, useState } from '@wordpress/element'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { image as icon, plugins as pluginsIcon } from '@wordpress/icons'; | ||
| import { store as noticesStore } from '@wordpress/notices'; | ||
| import { useResizeObserver } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
|
|
@@ -107,8 +111,16 @@ export function ImageEdit( { | |
| align, | ||
| metadata, | ||
| } = attributes; | ||
|
|
||
| const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob ); | ||
|
|
||
| const [ resizeListener, sizes ] = useResizeObserver(); | ||
|
There was a problem hiding this comment.
Technically, yes. But in the long run, I'm thinking it could be cleaner and more flexible if this kind of responsive styling was handled solely by the consumer of Placeholder, using CSS container queries (rather than a resize observer). That way, consumers wouldn't have to depend on a set of arbitrary breakpoints that Placeholder defines. I'm not intimately familiar with the requirements of this Image block in particular, but on first glance I would say it could make it simpler and more performant. Could be worth trying here. (This is a non-blocking comment, just suggesting in case it hadn't been considered.) There was a problem hiding this comment. Agreed with Lena — this seems a good fit for CSS Container Queries (edit: when I wrote my message, I hadn't seen @vipul0425 's reply, which was posted almost at the same time) There was a problem hiding this comment. @vipul0425 I don't have much insight into the current state of things, but it looks like you were able to achieve what you needed in this PR without resize observers or container queries, so yes it seems like something that can be addressed as a separate issue 👍 |
||
| const parentWidth = sizes?.width; | ||
| const parsedWidth = width && parseInt( width.replace( /px$/, '' ), 10 ); | ||
|
|
||
| const isSmallLayout = | ||
| ( parentWidth && parentWidth < 160 ) || parsedWidth < 160; | ||
|
|
||
| const altRef = useRef(); | ||
| useEffect( () => { | ||
| altRef.current = alt; | ||
|
|
@@ -329,11 +341,15 @@ export function ImageEdit( { | |
| <Placeholder | ||
| className={ clsx( 'block-editor-media-placeholder', { | ||
| [ borderProps.className ]: | ||
| !! borderProps.className && | ||
| ! isSingleSelected && | ||
| ! isSmallLayout, | ||
| } ) } | ||
| withIllustration | ||
| icon={ | ||
| ! isSmallLayout && ( lockUrlControls ? pluginsIcon : icon ) | ||
| } | ||
| label={ ! isSmallLayout && __( 'Image' ) } | ||
| instructions={ | ||
| ! lockUrlControls && | ||
| __( | ||
|
|
@@ -364,35 +380,72 @@ export function ImageEdit( { | |
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <figure { ...blockProps }> | ||
| { resizeListener } | ||
| { ! ( temporaryURL || url ) && ( | ||
| <BlockControls group="other"> | ||
| <MediaReplaceFlow | ||
t-hamano marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| mediaId={ id } | ||
| mediaURL={ url } | ||
| allowedTypes={ ALLOWED_MEDIA_TYPES } | ||
| accept="image/*" | ||
| name={ __( 'Add image' ) } | ||
| onSelect={ onSelectImage } | ||
| onError={ onUploadError } | ||
| > | ||
| <form className="block-editor-media-flow__url-input has-siblings"> | ||
| <span className="block-editor-media-replace-flow__image-url-label"> | ||
| { __( 'Insert from URL:' ) } | ||
| </span> | ||
|
|
||
| <LinkControl | ||
| value={ { url } } | ||
| settings={ [] } | ||
| showSuggestions={ false } | ||
| onChange={ ( value ) => { | ||
| onSelectURL( value.url ); | ||
| } } | ||
| /> | ||
| </form> | ||
| </MediaReplaceFlow> | ||
| </BlockControls> | ||
| ) } | ||
| <Image | ||
| temporaryURL={ temporaryURL } | ||
| attributes={ attributes } | ||
| setAttributes={ setAttributes } | ||
| isSingleSelected={ isSingleSelected } | ||
| insertBlocksAfter={ insertBlocksAfter } | ||
| onReplace={ onReplace } | ||
| onSelectImage={ onSelectImage } | ||
| onSelectURL={ onSelectURL } | ||
| onUploadError={ onUploadError } | ||
| context={ context } | ||
| clientId={ clientId } | ||
| blockEditingMode={ blockEditingMode } | ||
| parentLayoutType={ parentLayout?.type } | ||
| /> | ||
| { ! temporaryURL && | ||
| ! url && | ||
| ( isSmallLayout ? ( | ||
| placeholder( mediaPreview ) | ||
| ) : ( | ||
| <MediaPlaceholder | ||
| icon={ <BlockIcon icon={ icon } /> } | ||
| onSelect={ onSelectImage } | ||
| onSelectURL={ onSelectURL } | ||
| onError={ onUploadError } | ||
| placeholder={ placeholder } | ||
| accept="image/*" | ||
| allowedTypes={ ALLOWED_MEDIA_TYPES } | ||
| value={ { id, src } } | ||
| mediaPreview={ mediaPreview } | ||
| disableMediaButtons={ temporaryURL || url } | ||
| /> | ||
| ) ) } | ||
| </figure> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pretty sure this one is already included in the
Placeholdercomponent, so it may be best to make these width changes to that component itself, rather than locally here.