diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 32b2b39405cf86..584654a814af11 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -16,9 +16,24 @@ figure.wp-block-gallery { flex: 0 0 100%; } - .components-form-file-upload { + > .components-form-file-upload { flex-basis: 100%; } + + .wp-block-image { + .components-notice.is-error { + display: block; + } + .components-notice__content { + margin: 4px 0; + } + .components-notice__dismiss { + position: absolute; + top: 0; + right: 5px; + } + } + // @todo: this deserves a refactor, by being moved to the toolbar. .block-editor-media-placeholder.is-appender { .components-placeholder__label { diff --git a/packages/block-library/src/gallery/use-get-media.js b/packages/block-library/src/gallery/use-get-media.js index 597b112a8af3d2..1bf33c767a4c64 100644 --- a/packages/block-library/src/gallery/use-get-media.js +++ b/packages/block-library/src/gallery/use-get-media.js @@ -10,18 +10,13 @@ export default function useGetMedia( innerBlockImages ) { const imageMedia = useSelect( ( select ) => { - if ( - ! innerBlockImages?.length || - innerBlockImages.some( - ( imageBlock ) => ! imageBlock.attributes.id - ) - ) { + if ( ! innerBlockImages?.length ) { return currentImageMedia; } - const imageIds = innerBlockImages.map( - ( imageBlock ) => imageBlock.attributes.id - ); + const imageIds = innerBlockImages + .map( ( imageBlock ) => imageBlock.attributes.id ) + .filter( ( id ) => id !== undefined ); if ( imageIds.length === 0 ) { return currentImageMedia; diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 3a02291ea0c954..7f29a8d1078c51 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -246,7 +246,7 @@ export function ImageEdit( { } ); } - const isTemp = isTemporaryImage( id, url ); + let isTemp = isTemporaryImage( id, url ); // Upload a temporary image on mount. useEffect( () => { @@ -264,6 +264,7 @@ export function ImageEdit( { }, allowedTypes: ALLOWED_MEDIA_TYPES, onError: ( message ) => { + isTemp = false; noticeOperations.createErrorNotice( message ); setAttributes( { src: undefined,