diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index ffdbb1d51981cf..7eb3a294f49fd4 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -2,50 +2,6 @@ "name": "core/gallery", "category": "media", "attributes": { - "images": { - "type": "array", - "default": [], - "source": "query", - "selector": ".blocks-gallery-item", - "query": { - "url": { - "type": "string", - "source": "attribute", - "selector": "img", - "attribute": "src" - }, - "fullUrl": { - "type": "string", - "source": "attribute", - "selector": "img", - "attribute": "data-full-url" - }, - "link": { - "type": "string", - "source": "attribute", - "selector": "img", - "attribute": "data-link" - }, - "alt": { - "type": "string", - "source": "attribute", - "selector": "img", - "attribute": "alt", - "default": "" - }, - "id": { - "type": "string", - "source": "attribute", - "selector": "img", - "attribute": "data-id" - }, - "caption": { - "type": "string", - "source": "html", - "selector": ".blocks-gallery-item__caption" - } - } - }, "ids": { "type": "array", "items": { @@ -73,8 +29,24 @@ "sizeSlug": { "type": "string", "default": "large" + }, + "allowBlockAlign": { + "type": "boolean", + "default": false + }, + "allowResize": { + "type": "boolean", + "default": false + }, + "isList": { + "type": "boolean", + "default": true } }, + "providesContext": { + "allowBlockAlign": "allowBlockAlign", + "allowResize": "allowResize" + }, "supports": { "anchor": true, "align": true diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index e6fd71a696cec4..e4cee1967234bb 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -19,844 +19,508 @@ import { } from './constants'; const deprecated = [ - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: '.blocks-gallery-item', - query: { - url: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'src', - }, - fullUrl: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'data-full-url', - }, - link: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'data-link', - }, - alt: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'alt', - default: '', - }, - id: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'data-id', - }, - caption: { - type: 'string', - source: 'html', - selector: '.blocks-gallery-item__caption', - }, - }, - }, - ids: { - type: 'array', - items: { - type: 'number', - }, - default: [], - }, - columns: { - type: 'number', - minimum: 1, - maximum: 8, - }, - caption: { - type: 'string', - source: 'html', - selector: '.blocks-gallery-caption', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - }, - sizeSlug: { - type: 'string', - default: 'large', - }, - }, - save( { attributes } ) { - const { - images, - columns = defaultColumnsNumber( attributes ), - imageCrop, - caption, - linkTo, - } = attributes; - return ( -
- - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, - }, - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: '.blocks-gallery-item', - query: { - url: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'src', - }, - fullUrl: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'data-full-url', - }, - link: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'data-link', - }, - alt: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'alt', - default: '', - }, - id: { - type: 'string', - source: 'attribute', - selector: 'img', - attribute: 'data-id', - }, - caption: { - type: 'string', - source: 'html', - selector: '.blocks-gallery-item__caption', - }, - }, - }, - ids: { - type: 'array', - items: { - type: 'number', - }, - default: [], - }, - columns: { - type: 'number', - minimum: 1, - maximum: 8, - }, - caption: { - type: 'string', - source: 'html', - selector: '.blocks-gallery-caption', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - sizeSlug: { - type: 'string', - default: 'large', - }, - }, - supports: { - align: true, - }, - isEligible( { linkTo } ) { - return ! linkTo || linkTo === 'attachment' || linkTo === 'media'; - }, - migrate( attributes ) { - let linkTo = attributes.linkTo; - if ( ! attributes.linkTo ) { - linkTo = 'none'; - } else if ( attributes.linkTo === 'attachment' ) { - linkTo = 'post'; - } else if ( attributes.linkTo === 'media' ) { - linkTo = 'file'; - } - return { - ...attributes, - linkTo, - }; - }, - save( { attributes } ) { - const { - images, - columns = defaultColumnsNumber( attributes ), - imageCrop, - caption, - linkTo, - } = attributes; - return ( -
- - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, - }, - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: '.blocks-gallery-item', - query: { - url: { - source: 'attribute', - selector: 'img', - attribute: 'src', - }, - fullUrl: { - source: 'attribute', - selector: 'img', - attribute: 'data-full-url', - }, - link: { - source: 'attribute', - selector: 'img', - attribute: 'data-link', - }, - alt: { - source: 'attribute', - selector: 'img', - attribute: 'alt', - default: '', - }, - id: { - source: 'attribute', - selector: 'img', - attribute: 'data-id', - }, - caption: { - type: 'string', - source: 'html', - selector: '.blocks-gallery-item__caption', - }, - }, - }, - ids: { - type: 'array', - default: [], - }, - columns: { - type: 'number', - }, - caption: { - type: 'string', - source: 'html', - selector: '.blocks-gallery-caption', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - }, - supports: { - align: true, - }, - isEligible( { ids } ) { - return ids && ids.some( ( id ) => typeof id === 'string' ); - }, - migrate( attributes ) { - return { - ...attributes, - ids: map( attributes.ids, ( id ) => { - const parsedId = parseInt( id, 10 ); - return Number.isInteger( parsedId ) ? parsedId : null; - } ), - }; - }, - save( { attributes } ) { - const { - images, - columns = defaultColumnsNumber( attributes ), - imageCrop, - caption, - linkTo, - } = attributes; - - return ( -
- - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, - }, - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-item', - query: { - url: { - source: 'attribute', - selector: 'img', - attribute: 'src', - }, - fullUrl: { - source: 'attribute', - selector: 'img', - attribute: 'data-full-url', - }, - alt: { - source: 'attribute', - selector: 'img', - attribute: 'alt', - default: '', - }, - id: { - source: 'attribute', - selector: 'img', - attribute: 'data-id', - }, - link: { - source: 'attribute', - selector: 'img', - attribute: 'data-link', - }, - caption: { - type: 'array', - source: 'children', - selector: 'figcaption', - }, - }, - }, - ids: { - type: 'array', - default: [], - }, - columns: { - type: 'number', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - }, - supports: { - align: true, - }, - save( { attributes } ) { - const { - images, - columns = defaultColumnsNumber( attributes ), - imageCrop, - linkTo, - } = attributes; - return ( - - ); - }, - }, - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-item', - query: { - url: { - source: 'attribute', - selector: 'img', - attribute: 'src', - }, - alt: { - source: 'attribute', - selector: 'img', - attribute: 'alt', - default: '', - }, - id: { - source: 'attribute', - selector: 'img', - attribute: 'data-id', - }, - link: { - source: 'attribute', - selector: 'img', - attribute: 'data-link', - }, - caption: { - type: 'array', - source: 'children', - selector: 'figcaption', - }, - }, - }, - columns: { - type: 'number', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - }, - isEligible( { images, ids } ) { - return ( - images && - images.length > 0 && - ( ( ! ids && images ) || - ( ids && images && ids.length !== images.length ) || - some( images, ( id, index ) => { - if ( ! id && ids[ index ] !== null ) { - return true; - } - return parseInt( id, 10 ) !== ids[ index ]; - } ) ) - ); - }, - migrate( attributes ) { - return { - ...attributes, - ids: map( attributes.images, ( { id } ) => { - if ( ! id ) { - return null; - } - return parseInt( id, 10 ); - } ), - }; - }, - supports: { - align: true, - }, - save( { attributes } ) { - const { - images, - columns = defaultColumnsNumber( attributes ), - imageCrop, - linkTo, - } = attributes; - return ( - - ); - }, - }, - { - attributes: { - images: { - type: 'array', - default: [], - source: 'query', - selector: - 'div.wp-block-gallery figure.blocks-gallery-image img', - query: { - url: { - source: 'attribute', - attribute: 'src', - }, - alt: { - source: 'attribute', - attribute: 'alt', - default: '', - }, - id: { - source: 'attribute', - attribute: 'data-id', - }, - }, - }, - columns: { - type: 'number', - }, - imageCrop: { - type: 'boolean', - default: true, - }, - linkTo: { - type: 'string', - default: 'none', - }, - align: { - type: 'string', - default: 'none', - }, - }, - supports: { - align: true, - }, - save( { attributes } ) { - const { - images, - columns = defaultColumnsNumber( attributes ), - align, - imageCrop, - linkTo, - } = attributes; - const className = classnames( `columns-${ columns }`, { - alignnone: align === 'none', - 'is-cropped': imageCrop, - } ); - return ( -
- { images.map( ( image ) => { - let href; - - switch ( linkTo ) { - case 'media': - href = image.url; - break; - case 'attachment': - href = image.link; - break; - } - - const img = ( - { - ); - - return ( -
- { href ? { img } : img } -
- ); - } ) } -
- ); - }, - }, ]; + export default deprecated; diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 46074ab2683279..834a2c5fd8b81d 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -4,7 +4,6 @@ import { every, filter, - find, forEach, get, isEmpty, @@ -29,14 +28,15 @@ import { MediaPlaceholder, InspectorControls } from '@wordpress/block-editor'; import { Component, Platform } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; +import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies */ import { sharedIcon } from './shared-icon'; -import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared'; +import { defaultColumnsNumber } from './shared'; import Gallery from './gallery'; import { LINK_DESTINATION_ATTACHMENT, @@ -68,20 +68,13 @@ class GalleryEdit extends Component { constructor() { super( ...arguments ); - this.onSelectImage = this.onSelectImage.bind( this ); this.onSelectImages = this.onSelectImages.bind( this ); - this.onDeselectImage = this.onDeselectImage.bind( this ); this.setLinkTo = this.setLinkTo.bind( this ); this.setColumnsNumber = this.setColumnsNumber.bind( this ); this.toggleImageCrop = this.toggleImageCrop.bind( this ); - this.onMove = this.onMove.bind( this ); - this.onMoveForward = this.onMoveForward.bind( this ); - this.onMoveBackward = this.onMoveBackward.bind( this ); this.onRemoveImage = this.onRemoveImage.bind( this ); this.onUploadError = this.onUploadError.bind( this ); - this.setImageAttributes = this.setImageAttributes.bind( this ); this.setAttributes = this.setAttributes.bind( this ); - this.onFocusGalleryCaption = this.onFocusGalleryCaption.bind( this ); this.getImagesSizeOptions = this.getImagesSizeOptions.bind( this ); this.updateImagesSize = this.updateImagesSize.bind( this ); @@ -92,70 +85,9 @@ class GalleryEdit extends Component { } setAttributes( attributes ) { - if ( attributes.ids ) { - throw new Error( - 'The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes' - ); - } - - if ( attributes.images ) { - attributes = { - ...attributes, - // Unlike images[ n ].id which is a string, always ensure the - // ids array contains numbers as per its attribute type. - ids: map( attributes.images, ( { id } ) => parseInt( id, 10 ) ), - }; - } - this.props.setAttributes( attributes ); } - onSelectImage( index ) { - return () => { - if ( this.state.selectedImage !== index ) { - this.setState( { - selectedImage: index, - } ); - } - }; - } - - onDeselectImage( index ) { - return () => { - if ( this.state.selectedImage === index ) { - this.setState( { - selectedImage: null, - } ); - } - }; - } - - onMove( oldIndex, newIndex ) { - const images = [ ...this.props.attributes.images ]; - images.splice( newIndex, 1, this.props.attributes.images[ oldIndex ] ); - images.splice( oldIndex, 1, this.props.attributes.images[ newIndex ] ); - this.setState( { selectedImage: newIndex } ); - this.setAttributes( { images } ); - } - - onMoveForward( oldIndex ) { - return () => { - if ( oldIndex === this.props.attributes.images.length - 1 ) { - return; - } - this.onMove( oldIndex, oldIndex + 1 ); - }; - } - - onMoveBackward( oldIndex ) { - return () => { - if ( oldIndex === 0 ) { - return; - } - this.onMove( oldIndex, oldIndex - 1 ); - }; - } - onRemoveImage( index ) { return () => { const images = filter( @@ -171,59 +103,27 @@ class GalleryEdit extends Component { }; } - selectCaption( newImage, images, attachmentCaptions ) { - // The image id in both the images and attachmentCaptions arrays is a - // string, so ensure comparison works correctly by converting the - // newImage.id to a string. - const newImageId = toString( newImage.id ); - const currentImage = find( images, { id: newImageId } ); - - const currentImageCaption = currentImage - ? currentImage.caption - : newImage.caption; - - if ( ! attachmentCaptions ) { - return currentImageCaption; - } - - const attachment = find( attachmentCaptions, { - id: newImageId, - } ); - - // if the attachment caption is updated - if ( attachment && attachment.caption !== newImage.caption ) { - return newImage.caption; - } - - return currentImageCaption; - } - onSelectImages( newImages ) { - const { columns, images, sizeSlug } = this.props.attributes; - const { attachmentCaptions } = this.state; - this.setState( { - attachmentCaptions: newImages.map( ( newImage ) => ( { - // Store the attachmentCaption id as a string for consistency - // with the type of the id in the images attribute. - id: toString( newImage.id ), - caption: newImage.caption, - } ) ), + const { clientId, replaceInnerBlocks } = this.props; + const { columns, linkTo } = this.props.attributes; + + const newBlocks = newImages.map( ( image ) => { + return createBlock( 'core/image', { + id: image.id, + caption: image.caption, + url: image.url, + link: image.link, + linkDestination: linkTo, + alt: image.alt, + } ); } ); + this.setAttributes( { - images: newImages.map( ( newImage ) => ( { - ...pickRelevantMediaFiles( newImage, sizeSlug ), - caption: this.selectCaption( - newImage, - images, - attachmentCaptions - ), - // The id value is stored in a data attribute, so when the - // block is parsed it's converted to a string. Converting - // to a string here ensures it's type is consistent. - id: toString( newImage.id ), - } ) ), + ids: newImages.map( ( newImage ) => toString( newImage.id ) ), columns: columns ? Math.min( newImages.length, columns ) : columns, } ); + + replaceInnerBlocks( clientId, newBlocks ); } onUploadError( message ) { @@ -250,32 +150,6 @@ class GalleryEdit extends Component { : __( 'Thumbnails are not cropped.' ); } - onFocusGalleryCaption() { - this.setState( { - selectedImage: null, - } ); - } - - setImageAttributes( index, attributes ) { - const { - attributes: { images }, - } = this.props; - const { setAttributes } = this; - if ( ! images[ index ] ) { - return; - } - setAttributes( { - images: [ - ...images.slice( 0, index ), - { - ...images[ index ], - ...attributes, - }, - ...images.slice( index + 1 ), - ], - } ); - } - getImagesSizeOptions() { const { imageSizes, resizedImages } = this.props; return map( @@ -360,9 +234,10 @@ class GalleryEdit extends Component { images, linkTo, sizeSlug, + ids, } = attributes; - const hasImages = !! images.length; + const hasImages = !! ids.length; const mediaPlaceholder = ( - { images.length > 1 && ( + { ids.length > 1 && ( @@ -504,4 +379,10 @@ export default compose( [ } ), withNotices, withViewportMatch( { isNarrow: '< small' } ), + withDispatch( ( dispatch ) => { + const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); + return { + replaceInnerBlocks, + }; + } ), ] )( GalleryEdit ); diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js deleted file mode 100644 index ac77851911a441..00000000000000 --- a/packages/block-library/src/gallery/gallery-image.js +++ /dev/null @@ -1,312 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { get, omit } from 'lodash'; - -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; -import { Button, Spinner, ButtonGroup } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { BACKSPACE, DELETE } from '@wordpress/keycodes'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { RichText, MediaPlaceholder } from '@wordpress/block-editor'; -import { isBlobURL } from '@wordpress/blob'; -import { compose } from '@wordpress/compose'; -import { - closeSmall, - chevronLeft, - chevronRight, - edit, - image as imageIcon, -} from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import { pickRelevantMediaFiles } from './shared'; -import { - LINK_DESTINATION_ATTACHMENT, - LINK_DESTINATION_MEDIA, -} from './constants'; - -const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url ); - -class GalleryImage extends Component { - constructor() { - super( ...arguments ); - - this.onSelectImage = this.onSelectImage.bind( this ); - this.onSelectCaption = this.onSelectCaption.bind( this ); - this.onRemoveImage = this.onRemoveImage.bind( this ); - this.bindContainer = this.bindContainer.bind( this ); - this.onEdit = this.onEdit.bind( this ); - this.onSelectImageFromLibrary = this.onSelectImageFromLibrary.bind( - this - ); - this.onSelectCustomURL = this.onSelectCustomURL.bind( this ); - this.state = { - captionSelected: false, - isEditing: false, - }; - } - - bindContainer( ref ) { - this.container = ref; - } - - onSelectCaption() { - if ( ! this.state.captionSelected ) { - this.setState( { - captionSelected: true, - } ); - } - - if ( ! this.props.isSelected ) { - this.props.onSelect(); - } - } - - onSelectImage() { - if ( ! this.props.isSelected ) { - this.props.onSelect(); - } - - if ( this.state.captionSelected ) { - this.setState( { - captionSelected: false, - } ); - } - } - - onRemoveImage( event ) { - if ( - this.container === document.activeElement && - this.props.isSelected && - [ BACKSPACE, DELETE ].indexOf( event.keyCode ) !== -1 - ) { - event.stopPropagation(); - event.preventDefault(); - this.props.onRemove(); - } - } - - onEdit() { - this.setState( { - isEditing: true, - } ); - } - - componentDidUpdate( prevProps ) { - const { - isSelected, - image, - url, - __unstableMarkNextChangeAsNotPersistent, - } = this.props; - if ( image && ! url ) { - __unstableMarkNextChangeAsNotPersistent(); - this.props.setAttributes( { - url: image.source_url, - alt: image.alt_text, - } ); - } - - // unselect the caption so when the user selects other image and comeback - // the caption is not immediately selected - if ( - this.state.captionSelected && - ! isSelected && - prevProps.isSelected - ) { - this.setState( { - captionSelected: false, - } ); - } - } - - deselectOnBlur() { - this.props.onDeselect(); - } - - onSelectImageFromLibrary( media ) { - const { setAttributes, id, url, alt, caption, sizeSlug } = this.props; - if ( ! media || ! media.url ) { - return; - } - - let mediaAttributes = pickRelevantMediaFiles( media, sizeSlug ); - - // If the current image is temporary but an alt text was meanwhile - // written by the user, make sure the text is not overwritten. - if ( isTemporaryImage( id, url ) ) { - if ( alt ) { - mediaAttributes = omit( mediaAttributes, [ 'alt' ] ); - } - } - - // If a caption text was meanwhile written by the user, - // make sure the text is not overwritten by empty captions. - if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) { - mediaAttributes = omit( mediaAttributes, [ 'caption' ] ); - } - - setAttributes( mediaAttributes ); - this.setState( { - isEditing: false, - } ); - } - - onSelectCustomURL( newURL ) { - const { setAttributes, url } = this.props; - if ( newURL !== url ) { - setAttributes( { - url: newURL, - id: undefined, - } ); - this.setState( { - isEditing: false, - } ); - } - } - - render() { - const { - url, - alt, - id, - linkTo, - link, - isFirstItem, - isLastItem, - isSelected, - caption, - onRemove, - onMoveForward, - onMoveBackward, - setAttributes, - 'aria-label': ariaLabel, - } = this.props; - const { isEditing } = this.state; - - let href; - - switch ( linkTo ) { - case LINK_DESTINATION_MEDIA: - href = url; - break; - case LINK_DESTINATION_ATTACHMENT: - href = link; - break; - } - - const img = ( - // Disable reason: Image itself is not meant to be interactive, but should - // direct image selection and unfocus caption fields. - /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ - <> - { - { isBlobURL( url ) && } - - /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */ - ); - - const className = classnames( { - 'is-selected': isSelected, - 'is-transient': isBlobURL( url ), - } ); - - return ( -
- { ! isEditing && ( href ? { img } : img ) } - { isEditing && ( - - ) } - -
- ); - } -} - -export default compose( [ - withSelect( ( select, ownProps ) => { - const { getMedia } = select( 'core' ); - const { id } = ownProps; - - return { - image: id ? getMedia( parseInt( id, 10 ) ) : null, - }; - } ), - withDispatch( ( dispatch ) => { - const { __unstableMarkNextChangeAsNotPersistent } = dispatch( - 'core/block-editor' - ); - return { - __unstableMarkNextChangeAsNotPersistent, - }; - } ), -] )( GalleryImage ); diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 354d0d17cb616a..2ab4cbba4ae284 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -6,15 +6,14 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { RichText, InnerBlocks } from '@wordpress/block-editor'; import { VisuallyHidden } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies */ -import GalleryImage from './gallery-image'; import { defaultColumnsNumber } from './shared'; export const Gallery = ( props ) => { @@ -23,14 +22,7 @@ export const Gallery = ( props ) => { className, isSelected, setAttributes, - selectedImage, mediaPlaceholder, - onMoveBackward, - onMoveForward, - onRemoveImage, - onSelectImage, - onDeselectImage, - onSetImageAttributes, onFocusGalleryCaption, insertBlocksAfter, } = props; @@ -40,7 +32,6 @@ export const Gallery = ( props ) => { columns = defaultColumnsNumber( attributes ), caption, imageCrop, - images, } = attributes; return ( @@ -51,45 +42,14 @@ export const Gallery = ( props ) => { 'is-cropped': imageCrop, } ) } > -
    - { images.map( ( img, index ) => { - const ariaLabel = sprintf( - /* translators: 1: the order number of the image. 2: the total number of images. */ - __( 'image %1$d of %2$d in gallery' ), - index + 1, - images.length - ); + ( +
  • { item }
    • + ) } + /> - return ( -
  • - - onSetImageAttributes( index, attrs ) - } - caption={ img.caption } - aria-label={ ariaLabel } - sizeSlug={ attributes.sizeSlug } - /> -
    • - ); - } ) } -
{ mediaPlaceholder } -
    - { images.map( ( image ) => { - let href; - - switch ( linkTo ) { - case LINK_DESTINATION_MEDIA: - href = image.fullUrl || image.url; - break; - case LINK_DESTINATION_ATTACHMENT: - href = image.link; - break; - } - // The image should only have an aria-label if it's within a link and has no alt text. - const imageLabel = - ! image.alt && image.caption && href - ? image.caption - : null; - - const img = ( - { - ); - - return ( -
  • -
    - { href ? { img } : img } - { ! RichText.isEmpty( image.caption ) && ( - - ) } -
    -
    • - ); - } ) } +
      + ( +
    • { item }
      • + ) } + />
    + { ! RichText.isEmpty( caption ) && ( { diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index e9fc504be1fd54..309860d511f8e0 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -1,73 +1,80 @@ -.wp-block-gallery, -.blocks-gallery-grid { - display: flex; - flex-wrap: wrap; - list-style-type: none; - padding: 0; - // Some themes give all
      default margin instead of padding. - margin: 0; - - .blocks-gallery-image, - .blocks-gallery-item { - // Add space between thumbnails, and unset right most thumbnails later. - margin: 0 1em 1em 0; +.wp-block-gallery { + ul.block-editor-block-list__layout { display: flex; - flex-grow: 1; - flex-direction: column; - justify-content: center; - position: relative; - - figure { - margin: 0; - height: 100%; - - // IE doesn't support flex so omit that. - @supports (position: sticky) { - display: flex; - align-items: flex-end; - justify-content: flex-start; + flex-wrap: wrap; + list-style-type: none; + padding: 0; + // Some themes give all
        default margin instead of padding. + margin: 0; + + li.wp-block-gallery__image { + // Add space between thumbnails, and unset right most thumbnails later. + margin: 0 $grid-unit-20 $grid-unit-20 0; + display: flex; + flex-grow: 1; + flex-direction: column; + justify-content: center; + position: relative; + + figure, + figure > div { + margin: 0; + height: 100%; + + // IE doesn't support flex so omit that. + @supports ( position: sticky ) { + display: flex; + align-items: flex-end; + justify-content: flex-start; + } } - } - - img { - display: block; - max-width: 100%; - height: auto; - } - - // IE doesn't handle cropping, so we need an explicit width here. - img { - width: 100%; + + img { + display: block; + max-width: 100%; + height: auto; - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports (position: sticky) { - width: auto; } - } - - figcaption { - position: absolute; - bottom: 0; - width: 100%; - max-height: 100%; - overflow: auto; - padding: 3em 0.77em 0.7em; - color: $white; - text-align: center; - font-size: 0.8em; - background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent); - box-sizing: border-box; - margin: 0; - + + // IE doesn't handle cropping, so we need an explicit width here. img { - display: inline; + width: 100%; + + // IE11 doesn't read rules inside this query. They are applied only to modern browsers. + @supports ( position: sticky ) { + width: auto; + } + } + + figcaption { + position: absolute; + margin-bottom: 0; + bottom: 0; + width: 100%; + max-height: 100%; + overflow: auto; + padding: 40px 10px 9px; + color: $white; + text-align: center; + font-size: $default-font-size; + background: linear-gradient( + 0deg, + rgba( $color: $black, $alpha: 0.7 ) 0, + rgba( $color: $black, $alpha: 0.3 ) 70%, + transparent + ); + + img { + display: inline; + } } } } + + // Cropped - &.is-cropped .blocks-gallery-image, - &.is-cropped .blocks-gallery-item { + &.is-cropped ul.block-editor-block-list__layout li.wp-block-gallery__image { a, img { // IE11 doesn't support object-fit, so just make sure images aren't skewed. @@ -75,7 +82,7 @@ width: 100%; // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports (position: sticky) { + @supports ( position: sticky ) { height: 100%; flex: 1; object-fit: cover; @@ -84,17 +91,15 @@ } // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. - & .blocks-gallery-image, - & .blocks-gallery-item { - width: calc(50% - 1em); + & .wp-block-gallery__image { + width: calc( 50% - #{$grid-unit-20} ); - &:nth-of-type(even) { + &:nth-of-type( even ) { margin-right: 0; } } - &.columns-1 .blocks-gallery-image, - &.columns-1 .blocks-gallery-item { + &.columns-1 .wp-block-gallery__image { width: 100%; margin-right: 0; } @@ -102,25 +107,27 @@ // Beyond mobile viewports, we allow up to 8 columns. @include break-small { @for $i from 3 through 8 { - &.columns-#{ $i } .blocks-gallery-image, - &.columns-#{ $i } .blocks-gallery-item { - width: calc(#{ 100% / $i } - #{ 1em * ( $i - 1 ) / $i }); - margin-right: 1em; + &.columns-#{ $i } .wp-block-gallery__image { + width: calc( + #{100% / $i} - #{$grid-unit-20 * ( $i - 1 ) / $i} + ); + margin-right: $grid-unit-20; } } // Unset the right margin on every rightmost gallery item to ensure center balance. @for $column-count from 1 through 8 { - &.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n), - &.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) { + &.columns-#{ + $column-count + } + .wp-block-gallery__image:nth-of-type( #{ $column-count }n ) { margin-right: 0; } } } // Last item always needs margins reset. - .blocks-gallery-image:last-child, - .blocks-gallery-item:last-child { + .wp-block-gallery__image:last-child { margin-right: 0; } @@ -133,7 +140,7 @@ // If the gallery is centered, center the content inside as well. &.aligncenter { - .blocks-gallery-item figure { + figure.wp-block-gallery__image { justify-content: center; } } diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index ec80dc4c9ed250..ee83aaf982d7a8 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -2,6 +2,7 @@ "apiVersion": 2, "name": "core/image", "category": "media", + "usesContext": [ "allowBlockAlign", "allowResize" ], "attributes": { "align": { "type": "string" diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 17109a02f4a3b2..45389900c8610d 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -80,6 +80,7 @@ export function ImageEdit( { insertBlocksAfter, noticeOperations, onReplace, + context, } ) { const { url = '', @@ -108,6 +109,12 @@ export function ImageEdit( { return getSettings().mediaUpload; } ); + const allowResize = + context.allowResize !== undefined ? context.allowResize : true; + + const allowAlign = + context.allowBlockAlign !== undefined ? context.allowBlockAlign : true; + function onUploadError( message ) { noticeOperations.removeAllNotices(); noticeOperations.createErrorNotice( message ); @@ -265,10 +272,12 @@ export function ImageEdit( { const isExternal = isExternalImage( id, url ); const controls = ( - + { allowAlign && ( + + ) } ); const src = isExternal ? url : undefined; @@ -308,25 +317,30 @@ export function ImageEdit( { className: classes, } ); + const image = url && ( + + ); + return ( <> { controls } -
        - { url && ( - - ) } + + + { image } + { mediaPlaceholder } -
        + ); } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 3e32afd372524d..1efec84a3881f8 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -79,6 +79,7 @@ export default function Image( { onSelectURL, onUploadError, containerRef, + allowResize, } ) { const captionRef = useRef(); const prevUrl = usePrevious( url ); @@ -116,7 +117,7 @@ export default function Image( { const [ isEditingImage, setIsEditingImage ] = useState( false ); const [ externalBlob, setExternalBlob ] = useState(); const clientWidth = useClientWidth( containerRef, [ align ] ); - const isResizable = ! isWideAligned && isLargeViewport; + const isResizable = allowResize && ! ( isWideAligned && isLargeViewport ); const imageSizeOptions = map( filter( imageSizes, ( { slug } ) => get( image, [ 'media_details', 'sizes', slug, 'source_url' ] ) diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index ccf816c121e909..5c34edb368cd32 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -73,9 +73,5 @@ export default function save( { attributes } ) { ); } - return ( -
        - { figure } -
        - ); + return
        { figure }
        ; }