From e54f7e5fd865e997dea90dc41ad27f81ebc60201 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 16:59:19 +1300 Subject: [PATCH 01/20] fix conflicts --- packages/block-library/src/gallery/block.json | 2 +- .../block-library/src/gallery/deprecated.js | 1334 ++++++----------- packages/block-library/src/gallery/edit.js | 24 +- packages/block-library/src/gallery/gallery.js | 41 +- packages/block-library/src/gallery/save.js | 54 +- packages/block-library/src/gallery/style.scss | 32 +- packages/block-library/src/image/image.js | 2 +- 7 files changed, 543 insertions(+), 946 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index ffdbb1d51981c..40e36c5a06124 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -6,7 +6,7 @@ "type": "array", "default": [], "source": "query", - "selector": ".blocks-gallery-item", + "selector": ".wp-block-image", "query": { "url": { "type": "string", diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index e6fd71a696cec..b263cb9815397 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -19,844 +19,504 @@ 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 46074ab268327..0f29e2cbcead3 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -29,8 +29,9 @@ 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 @@ -199,6 +200,13 @@ class GalleryEdit extends Component { } onSelectImages( newImages ) { + const { clientId, insertBlocks } = this.props; + const newBlocks = newImages.map( ( image ) => { + return createBlock( 'core/image', { + url: image.url, + alt: image.alt, + } ); + } ); const { columns, images, sizeSlug } = this.props.attributes; const { attachmentCaptions } = this.state; this.setState( { @@ -224,6 +232,7 @@ class GalleryEdit extends Component { } ) ), columns: columns ? Math.min( newImages.length, columns ) : columns, } ); + insertBlocks( newBlocks, 0, clientId ); } onUploadError( message ) { @@ -360,9 +369,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 +514,10 @@ export default compose( [ } ), withNotices, withViewportMatch( { isNarrow: '< small' } ), + withDispatch( ( dispatch ) => { + const { insertBlocks } = dispatch( 'core/block-editor' ); + return { + insertBlocks, + }; + } ), ] )( GalleryEdit ); diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 354d0d17cb616..f6665b5c80076 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -6,7 +6,7 @@ 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 { createBlock } from '@wordpress/blocks'; @@ -51,45 +51,8 @@ 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 - ); + - 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 ) && ( - - ) } -
    -
    • - ); - } ) } -
+ { ! RichText.isEmpty( caption ) && ( div { margin: 0; height: 100%; @@ -67,7 +68,8 @@ // Cropped &.is-cropped .blocks-gallery-image, - &.is-cropped .blocks-gallery-item { + &.is-cropped .blocks-gallery-item, + &.is-cropped .wp-block-image { a, img { // IE11 doesn't support object-fit, so just make sure images aren't skewed. @@ -85,8 +87,10 @@ // 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); + + & .blocks-gallery-item, + & .wp-block-image { + width: calc(50% - #{ $grid-unit-20 }); &:nth-of-type(even) { margin-right: 0; @@ -94,7 +98,8 @@ } &.columns-1 .blocks-gallery-image, - &.columns-1 .blocks-gallery-item { + &.columns-1 .blocks-gallery-item, + &.columns-1 .wp-block-image { width: 100%; margin-right: 0; } @@ -103,16 +108,18 @@ @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 } .blocks-gallery-item, + &.columns-#{ $i } .wp-block-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 } .blocks-gallery-item:nth-of-type(#{ $column-count }n), + &.columns-#{ $column-count } .wp-block-image:nth-of-type(#{ $column-count }n) { margin-right: 0; } } @@ -120,7 +127,8 @@ // Last item always needs margins reset. .blocks-gallery-image:last-child, - .blocks-gallery-item:last-child { + .blocks-gallery-item:last-child, + .wp-block-image:last-child { margin-right: 0; } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 3e32afd372524..0aa1ce4c88582 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -116,7 +116,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 = false; const imageSizeOptions = map( filter( imageSizes, ( { slug } ) => get( image, [ 'media_details', 'sizes', slug, 'source_url' ] ) From d0fec8504766bdee5a946ec63d06507394216e74 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:00:43 +1300 Subject: [PATCH 02/20] fix conflict --- .../block-library/src/gallery/deprecated.js | 4 +- packages/block-library/src/gallery/edit.js | 102 ++---------------- packages/block-library/src/gallery/shared.js | 2 +- 3 files changed, 12 insertions(+), 96 deletions(-) diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index b263cb9815397..84c0aa901e6f6 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -20,6 +20,7 @@ import { const deprecated = [ + // { // attributes: { // images: { @@ -517,6 +518,7 @@ const deprecated = [ // }, // }, -//]; +]; + export default deprecated; diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 0f29e2cbcead3..dcc66c60866d1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -69,15 +69,10 @@ 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 ); @@ -111,52 +106,6 @@ class GalleryEdit extends Component { 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( @@ -172,51 +121,21 @@ 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 { clientId, insertBlocks } = this.props; + const { columns, images, sizeSlug, 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, } ); } ); - 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, - } ) ), - } ); + this.setAttributes( { images: newImages.map( ( newImage ) => ( { ...pickRelevantMediaFiles( newImage, sizeSlug ), @@ -232,6 +151,7 @@ class GalleryEdit extends Component { } ) ), columns: columns ? Math.min( newImages.length, columns ) : columns, } ); + insertBlocks( newBlocks, 0, clientId ); } @@ -259,12 +179,6 @@ class GalleryEdit extends Component { : __( 'Thumbnails are not cropped.' ); } - onFocusGalleryCaption() { - this.setState( { - selectedImage: null, - } ); - } - setImageAttributes( index, attributes ) { const { attributes: { images }, diff --git a/packages/block-library/src/gallery/shared.js b/packages/block-library/src/gallery/shared.js index 8c00115a8b633..616419111bb41 100644 --- a/packages/block-library/src/gallery/shared.js +++ b/packages/block-library/src/gallery/shared.js @@ -4,7 +4,7 @@ import { get, pick } from 'lodash'; export function defaultColumnsNumber( attributes ) { - return Math.min( 3, attributes.images.length ); + return Math.min( 3, attributes.ids.length ); } export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => { From ac33272f1ca5d3faf72c2d64509a8144ddbf60f2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 21 Jul 2020 13:09:52 +1200 Subject: [PATCH 03/20] Fix bind to missing method --- packages/block-library/src/gallery/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index dcc66c60866d1..42dc23a8e92ca 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -77,7 +77,6 @@ class GalleryEdit extends Component { 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 ); From 059dd22885a3dcaa364b004a60126314b43ef6f2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 21 Jul 2020 13:16:29 +1200 Subject: [PATCH 04/20] remove redundant code --- packages/block-library/src/gallery/edit.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 42dc23a8e92ca..c6950d5a3e5ac 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -138,11 +138,6 @@ class GalleryEdit extends Component { 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. From a9297539925b740f75af75e5ac00ad28bb9d2cf2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 21 Jul 2020 13:53:52 +1200 Subject: [PATCH 05/20] use replaceInnerBlocks to prevent duplication of images --- packages/block-library/src/gallery/edit.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index c6950d5a3e5ac..e648c1bf5cbf6 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -121,8 +121,8 @@ class GalleryEdit extends Component { } onSelectImages( newImages ) { - const { clientId, insertBlocks } = this.props; - const { columns, images, sizeSlug, linkTo } = this.props.attributes; + const { clientId, replaceInnerBlocks } = this.props; + const { columns, sizeSlug, linkTo } = this.props.attributes; const newBlocks = newImages.map( ( image ) => { return createBlock( 'core/image', { @@ -146,7 +146,7 @@ class GalleryEdit extends Component { columns: columns ? Math.min( newImages.length, columns ) : columns, } ); - insertBlocks( newBlocks, 0, clientId ); + replaceInnerBlocks( clientId, newBlocks ); } onUploadError( message ) { @@ -423,9 +423,9 @@ export default compose( [ withNotices, withViewportMatch( { isNarrow: '< small' } ), withDispatch( ( dispatch ) => { - const { insertBlocks } = dispatch( 'core/block-editor' ); + const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); return { - insertBlocks, + replaceInnerBlocks, }; } ), ] )( GalleryEdit ); From 34c690b4b306a34f246bb17f0f72fdeff6b90c0f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 21 Jul 2020 14:38:40 +1200 Subject: [PATCH 06/20] Some more tidy up --- packages/block-library/src/gallery/block.json | 44 ------------------- packages/block-library/src/gallery/edit.js | 24 +--------- packages/block-library/src/image/block.json | 3 ++ packages/block-library/src/image/image.js | 3 +- 4 files changed, 7 insertions(+), 67 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 40e36c5a06124..846c163b5bf7f 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": ".wp-block-image", - "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": { diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e648c1bf5cbf6..a2b42144e50c1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -87,21 +87,6 @@ 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 ); } @@ -132,17 +117,12 @@ class GalleryEdit extends Component { link: image.link, linkDestination: linkTo, alt: image.alt, + allowResize: false, } ); } ); this.setAttributes( { - images: newImages.map( ( newImage ) => ( { - ...pickRelevantMediaFiles( newImage, sizeSlug ), - // 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, } ); diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index ec80dc4c9ed25..a108645cb6fbf 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -68,6 +68,9 @@ "source": "attribute", "selector": "figure > a", "attribute": "target" + }, + "allowResize": { + "type": "boolean" } }, "supports": { diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 0aa1ce4c88582..f3e06b034f4e8 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -70,6 +70,7 @@ export default function Image( { height, linkTarget, sizeSlug, + allowResize = true, }, setAttributes, isSelected, @@ -116,7 +117,7 @@ export default function Image( { const [ isEditingImage, setIsEditingImage ] = useState( false ); const [ externalBlob, setExternalBlob ] = useState(); const clientWidth = useClientWidth( containerRef, [ align ] ); - const isResizable = false; + const isResizable = allowResize && ! ( isWideAligned && isLargeViewport ); const imageSizeOptions = map( filter( imageSizes, ( { slug } ) => get( image, [ 'media_details', 'sizes', slug, 'source_url' ] ) From d7c83f51d4a0f78858dcc4c3c5667cd9b4cca43a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:01:51 +1300 Subject: [PATCH 07/20] fix conflict --- packages/block-library/src/gallery/deprecated.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index 84c0aa901e6f6..e4cee1967234b 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -21,6 +21,7 @@ import { const deprecated = [ + // { // attributes: { // images: { @@ -518,6 +519,7 @@ const deprecated = [ // }, // }, + ]; From d45fec800c0158f5387b9f0cbd908c8dbb892faa Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 22 Jul 2020 12:21:50 +1200 Subject: [PATCH 08/20] Use block context to pass down options to disable resize and align --- packages/block-library/src/gallery/block.json | 10 +++++++++ packages/block-library/src/gallery/edit.js | 1 - packages/block-library/src/image/block.json | 4 +--- packages/block-library/src/image/edit.js | 22 +++++++++++++++---- packages/block-library/src/image/image.js | 2 +- 5 files changed, 30 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 846c163b5bf7f..0cb224274e25f 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -29,8 +29,18 @@ "sizeSlug": { "type": "string", "default": "large" + }, + "imageSettings": { + "type": "object", + "default": { + "allowResize": false, + "allowAlign": false + } } }, + "providesContext": { + "gallery/imageSettings": "imageSettings" + }, "supports": { "anchor": true, "align": true diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index a2b42144e50c1..9bfafe15b1b39 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -117,7 +117,6 @@ class GalleryEdit extends Component { link: image.link, linkDestination: linkTo, alt: image.alt, - allowResize: false, } ); } ); diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index a108645cb6fbf..fcf78df17c70e 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": [ "gallery/imageSettings" ], "attributes": { "align": { "type": "string" @@ -68,9 +69,6 @@ "source": "attribute", "selector": "figure > a", "attribute": "target" - }, - "allowResize": { - "type": "boolean" } }, "supports": { diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 17109a02f4a3b..279f01cf92157 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,16 @@ export function ImageEdit( { return getSettings().mediaUpload; } ); + const allowResize = + context[ 'gallery/imageSettings' ]?.allowResize !== undefined + ? context[ 'gallery/imageSettings' ].allowResize + : true; + + const allowAlign = + context[ 'gallery/imageSettings' ]?.allowAlign !== undefined + ? context[ 'gallery/imageSettings' ].allowAlign + : true; + function onUploadError( message ) { noticeOperations.removeAllNotices(); noticeOperations.createErrorNotice( message ); @@ -265,10 +276,12 @@ export function ImageEdit( { const isExternal = isExternalImage( id, url ); const controls = ( - + { allowAlign && ( + + ) } ); const src = isExternal ? url : undefined; @@ -323,6 +336,7 @@ export function ImageEdit( { onSelectURL={ onSelectURL } onUploadError={ onUploadError } containerRef={ ref } + allowResize={ allowResize } /> ) } { mediaPlaceholder } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index f3e06b034f4e8..1efec84a3881f 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -70,7 +70,6 @@ export default function Image( { height, linkTarget, sizeSlug, - allowResize = true, }, setAttributes, isSelected, @@ -80,6 +79,7 @@ export default function Image( { onSelectURL, onUploadError, containerRef, + allowResize, } ) { const captionRef = useRef(); const prevUrl = usePrevious( url ); From 7db7c0e9ab3157e0732908dfe90fbe6976256c46 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:03:29 +1300 Subject: [PATCH 09/20] fix conflict --- packages/block-library/src/gallery/edit.js | 26 +- .../src/gallery/gallery-image.js | 312 ------------------ packages/block-library/src/gallery/gallery.js | 11 +- 3 files changed, 3 insertions(+), 346 deletions(-) delete mode 100644 packages/block-library/src/gallery/gallery-image.js diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 9bfafe15b1b39..834a2c5fd8b81 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, @@ -37,7 +36,7 @@ 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, @@ -75,7 +74,6 @@ class GalleryEdit extends Component { this.toggleImageCrop = this.toggleImageCrop.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.getImagesSizeOptions = this.getImagesSizeOptions.bind( this ); this.updateImagesSize = this.updateImagesSize.bind( this ); @@ -107,7 +105,7 @@ class GalleryEdit extends Component { onSelectImages( newImages ) { const { clientId, replaceInnerBlocks } = this.props; - const { columns, sizeSlug, linkTo } = this.props.attributes; + const { columns, linkTo } = this.props.attributes; const newBlocks = newImages.map( ( image ) => { return createBlock( 'core/image', { @@ -152,26 +150,6 @@ class GalleryEdit extends Component { : __( 'Thumbnails are not cropped.' ); } - 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( 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 ac77851911a44..0000000000000 --- 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 f6665b5c80076..f2d1084f8e7b4 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -8,13 +8,12 @@ import classnames from 'classnames'; */ 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 ( From 8868cc7c2c00f117f4e8dd238ba7d83a4abe681b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:04:55 +1300 Subject: [PATCH 10/20] fix conflict --- packages/block-library/src/gallery/style.scss | 149 +++++++++--------- 1 file changed, 73 insertions(+), 76 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index f1463b8ca466c..a5ed2f42c77c4 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -1,74 +1,77 @@ -.wp-block-gallery, -.blocks-gallery-grid, .block-editor-block-list__layout { - 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, - .wp-block-image { - // Add space between thumbnails, and unset right most thumbnails later. - margin: 0 1em 1em 0; +.wp-block-gallery { + .block-editor-block-list__layout { display: flex; - flex-grow: 1; - flex-direction: column; - justify-content: center; - position: relative; - - 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; - } - } + flex-wrap: wrap; + list-style-type: none; + padding: 0; + // Some themes give all
      default margin instead of padding. + margin: 0; + + .wp-block-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; - img { - display: block; - max-width: 100%; - height: auto; - } + figure, + > div { + margin: 0; + height: 100%; - // IE doesn't handle cropping, so we need an explicit width here. - img { - width: 100%; + // IE doesn't support flex so omit that. + @supports ( position: sticky ) { + display: flex; + align-items: flex-end; + justify-content: flex-start; + } + } - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports (position: sticky) { - width: auto; + img { + display: block; + max-width: 100%; + height: 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: 0px; + 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 .wp-block-image { a, img { @@ -77,7 +80,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; @@ -86,20 +89,15 @@ } // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. - & .blocks-gallery-image, - - & .blocks-gallery-item, & .wp-block-image { - width: calc(50% - #{ $grid-unit-20 }); + 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-image { + &.columns-1 .wp-block-image { width: 100%; margin-right: 0; } @@ -107,27 +105,26 @@ // 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, - &.columns-#{ $i } .wp-block-image { - width: calc(#{ 100% / $i } - #{ $grid-unit-20 * ( $i - 1 ) / $i }); + &.columns-#{ $i } .wp-block-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-image:nth-of-type(#{ $column-count }n) { + &.columns-#{ + $column-count + } + .wp-block-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-image:last-child { margin-right: 0; } From 946b5df10d534cd4721cad7d2c2db85a5acf7ede Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:06:03 +1300 Subject: [PATCH 11/20] fix cnflict --- packages/block-library/src/gallery/style.scss | 134 ++++++++++-------- 1 file changed, 76 insertions(+), 58 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index a5ed2f42c77c4..84b6ca37c7763 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -1,77 +1,79 @@ -.wp-block-gallery { - .block-editor-block-list__layout { +.wp-block-gallery, +.blocks-gallery-grid, +.block-editor-block-list__layout { + display: flex; + flex-wrap: wrap; + list-style-type: none; + padding: 0; + // Some themes give all
        default margin instead of padding. + margin: 0; + + .wp-block-image { + // Add space between thumbnails, and unset right most thumbnails later. + margin: 0 $grid-unit-20 $grid-unit-20 0; display: flex; - flex-wrap: wrap; - list-style-type: none; - padding: 0; - // Some themes give all
          default margin instead of padding. - margin: 0; - - .wp-block-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; + flex-grow: 1; + flex-direction: column; + justify-content: center; + position: relative; - figure, - > div { - margin: 0; - height: 100%; + 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; - } + // 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; - } + img { + display: block; + max-width: 100%; + height: auto; + } - // IE doesn't handle cropping, so we need an explicit width here. - img { - width: 100%; + // IE doesn't handle cropping, so we need an explicit width here. + img { + width: 100%; - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports ( position: sticky ) { - width: auto; - } + // 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: 0px; - 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 - ); + figcaption { + position: absolute; + margin-bottom: 0px; + 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; - } + img { + display: inline; } } } // Cropped + &.is-cropped .blocks-gallery-image, + &.is-cropped .blocks-gallery-item, &.is-cropped .wp-block-image { a, img { @@ -89,6 +91,8 @@ } // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. + & .blocks-gallery-image, + & .blocks-gallery-item, & .wp-block-image { width: calc( 50% - #{$grid-unit-20} ); @@ -97,6 +101,8 @@ } } + &.columns-1 .blocks-gallery-image, + &.columns-1 .blocks-gallery-item, &.columns-1 .wp-block-image { width: 100%; margin-right: 0; @@ -105,6 +111,8 @@ // 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, &.columns-#{ $i } .wp-block-image { width: calc( #{100% / $i} - #{$grid-unit-20 * ( $i - 1 ) / $i} @@ -115,6 +123,14 @@ // 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 } @@ -125,6 +141,8 @@ } // Last item always needs margins reset. + .blocks-gallery-image:last-child, + .blocks-gallery-item:last-child, .wp-block-image:last-child { margin-right: 0; } From 2131eb9682ffcd3dfa3c10030423ee7b54a45d1e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 22 Jul 2020 16:07:24 +1200 Subject: [PATCH 12/20] Fix context namespacing --- packages/block-library/src/gallery/block.json | 16 +++++++++------- packages/block-library/src/image/block.json | 2 +- packages/block-library/src/image/edit.js | 8 ++------ 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 0cb224274e25f..d2385c96f52bd 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -30,16 +30,18 @@ "type": "string", "default": "large" }, - "imageSettings": { - "type": "object", - "default": { - "allowResize": false, - "allowAlign": false - } + "allowBlockAlign": { + "type": "boolean", + "default": false + }, + "allowResize": { + "type": "boolean", + "default": false } }, "providesContext": { - "gallery/imageSettings": "imageSettings" + "allowBlockAlign": "allowBlockAlign", + "allowResize": "allowResize" }, "supports": { "anchor": true, diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index fcf78df17c70e..ee83aaf982d7a 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/image", "category": "media", - "usesContext": [ "gallery/imageSettings" ], + "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 279f01cf92157..be86b36ae5d69 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -110,14 +110,10 @@ export function ImageEdit( { } ); const allowResize = - context[ 'gallery/imageSettings' ]?.allowResize !== undefined - ? context[ 'gallery/imageSettings' ].allowResize - : true; + context.allowResize !== undefined ? context.allowResize : true; const allowAlign = - context[ 'gallery/imageSettings' ]?.allowAlign !== undefined - ? context[ 'gallery/imageSettings' ].allowAlign - : true; + context.allowBlockAlign !== undefined ? context.allowBlockAlign : true; function onUploadError( message ) { noticeOperations.removeAllNotices(); From 319bb732f4cbc084e11199f1e5cd7f651d68ab70 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 27 Jul 2020 09:58:04 +1200 Subject: [PATCH 13/20] Fix broken css selector nesting --- packages/block-library/src/gallery/style.scss | 40 +++++-------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 84b6ca37c7763..aa4e718423504 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -1,12 +1,12 @@ -.wp-block-gallery, -.blocks-gallery-grid, -.block-editor-block-list__layout { - display: flex; - flex-wrap: wrap; - list-style-type: none; - padding: 0; - // Some themes give all
            default margin instead of padding. - margin: 0; +.wp-block-gallery { + .block-editor-block-list__layout { + display: flex; + flex-wrap: wrap; + list-style-type: none; + padding: 0; + // Some themes give all
              default margin instead of padding. + margin: 0; + } .wp-block-image { // Add space between thumbnails, and unset right most thumbnails later. @@ -49,7 +49,7 @@ figcaption { position: absolute; - margin-bottom: 0px; + margin-bottom: 0; bottom: 0; width: 100%; max-height: 100%; @@ -72,8 +72,6 @@ } // Cropped - &.is-cropped .blocks-gallery-image, - &.is-cropped .blocks-gallery-item, &.is-cropped .wp-block-image { a, img { @@ -91,8 +89,6 @@ } // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. - & .blocks-gallery-image, - & .blocks-gallery-item, & .wp-block-image { width: calc( 50% - #{$grid-unit-20} ); @@ -101,8 +97,6 @@ } } - &.columns-1 .blocks-gallery-image, - &.columns-1 .blocks-gallery-item, &.columns-1 .wp-block-image { width: 100%; margin-right: 0; @@ -111,8 +105,6 @@ // 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, &.columns-#{ $i } .wp-block-image { width: calc( #{100% / $i} - #{$grid-unit-20 * ( $i - 1 ) / $i} @@ -123,14 +115,6 @@ // 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 } @@ -141,8 +125,6 @@ } // Last item always needs margins reset. - .blocks-gallery-image:last-child, - .blocks-gallery-item:last-child, .wp-block-image:last-child { margin-right: 0; } @@ -156,7 +138,7 @@ // If the gallery is centered, center the content inside as well. &.aligncenter { - .blocks-gallery-item figure { + figure.wp-block-image { justify-content: center; } } From f84f417ee634f9686ff50c30f87a45a82915f03d Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:07:15 +1300 Subject: [PATCH 14/20] Fix conflict --- packages/block-library/src/gallery/edit.js | 1 + packages/block-library/src/gallery/gallery.js | 5 +++- packages/block-library/src/gallery/style.scss | 2 +- packages/block-library/src/image/block.json | 4 +++ packages/block-library/src/image/edit.js | 28 +++++++++++++++++++ packages/block-library/src/image/save.js | 14 ++++++---- 6 files changed, 47 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 834a2c5fd8b81..da5dd2394841d 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -115,6 +115,7 @@ class GalleryEdit extends Component { link: image.link, linkDestination: linkTo, alt: image.alt, + isInGallery: true, } ); } ); diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index f2d1084f8e7b4..4ccb90cfae593 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -42,7 +42,10 @@ export const Gallery = ( props ) => { 'is-cropped': imageCrop, } ) } > - + { mediaPlaceholder } div { + figure > div { margin: 0; height: 100%; diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index ee83aaf982d7a..13660293a2902 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -69,6 +69,10 @@ "source": "attribute", "selector": "figure > a", "attribute": "target" + }, + "isInGallery": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index be86b36ae5d69..14640ae8ce694 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -91,6 +91,7 @@ export function ImageEdit( { width, height, sizeSlug, + isInGallery, } = attributes; const altRef = useRef(); @@ -317,6 +318,33 @@ export function ImageEdit( { className: classes, } ); + if ( isInGallery ) { + return ( + <> + { controls } + +
              + { url && ( + + ) } + { mediaPlaceholder } +
              +               + + ); + } + return ( <> { controls } diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index ccf816c121e90..f78868671330b 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -24,6 +24,7 @@ export default function save( { attributes } ) { linkTarget, sizeSlug, title, + isInGallery, } = attributes; const newRel = isEmpty( rel ) ? undefined : rel; @@ -73,9 +74,12 @@ export default function save( { attributes } ) { ); } - return ( -
              - { figure } -
              - ); + if ( true === isInGallery ) { + return ( +
            • +
              { figure }
              +
              • + ); + } + return
              { figure }
              ; } From 77890362c5410bb58241380d6b52c44fa8ee6483 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:11:24 +1300 Subject: [PATCH 15/20] fix conflicts --- packages/block-library/src/gallery/block.json | 7 ++- packages/block-library/src/gallery/edit.js | 1 - packages/block-library/src/gallery/save.js | 5 +- packages/block-library/src/gallery/style.scss | 2 +- packages/block-library/src/image/block.json | 4 +- packages/block-library/src/image/edit.js | 61 +++++++++---------- packages/block-library/src/image/save.js | 4 +- 7 files changed, 44 insertions(+), 40 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index d2385c96f52bd..6862ba9fffe6f 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -37,11 +37,16 @@ "allowResize": { "type": "boolean", "default": false + }, + "isList": { + "type": "boolean", + "default": true } }, "providesContext": { "allowBlockAlign": "allowBlockAlign", - "allowResize": "allowResize" + "allowResize": "allowResize", + "isList": "isList" }, "supports": { "anchor": true, diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index da5dd2394841d..834a2c5fd8b81 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -115,7 +115,6 @@ class GalleryEdit extends Component { link: image.link, linkDestination: linkTo, alt: image.alt, - isInGallery: true, } ); } ); diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index 7546c77135915..b3e70dc02691c 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -27,7 +27,10 @@ export default function save( { attributes } ) { imageCrop ? 'is-cropped' : '' }` } > - +
                + +
              + { ! RichText.isEmpty( caption ) && ( a", "attribute": "target" }, - "isInGallery": { + "isListItem": { "type": "boolean", "default": false } diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 14640ae8ce694..a3bdd60ceb248 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -91,7 +91,7 @@ export function ImageEdit( { width, height, sizeSlug, - isInGallery, + isListItem, } = attributes; const altRef = useRef(); @@ -270,6 +270,12 @@ export function ImageEdit( { }; }, [ isTemp ] ); + useEffect( () => { + if ( context?.isList ) { + setAttributes( { isListItem: context.isList } ); + } + }, [ context ] ); + const isExternal = isExternalImage( id, url ); const controls = ( @@ -318,26 +324,28 @@ export function ImageEdit( { className: classes, } ); - if ( isInGallery ) { + const image = url && ( + + ); + + if ( isListItem ) { return ( <> { controls }
              - { url && ( - - ) } + { image } { mediaPlaceholder }
              @@ -348,23 +356,12 @@ export function ImageEdit( { return ( <> { controls } -
              - { url && ( - - ) } + + + { image } + { mediaPlaceholder } -
              + ); } diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index f78868671330b..956fff9f8552d 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -24,7 +24,7 @@ export default function save( { attributes } ) { linkTarget, sizeSlug, title, - isInGallery, + isListItem, } = attributes; const newRel = isEmpty( rel ) ? undefined : rel; @@ -74,7 +74,7 @@ export default function save( { attributes } ) { ); } - if ( true === isInGallery ) { + if ( isListItem ) { return (
            • { figure }
              From 6d7df5faad8a6aed228ee823621e39424cd53f56 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 7 Oct 2020 17:13:39 +1300 Subject: [PATCH 16/20] conflicts --- packages/block-library/src/gallery/block.json | 3 +- packages/block-library/src/gallery/gallery.js | 5 + packages/block-library/src/gallery/style.scss | 130 +++++++++--------- packages/block-library/src/image/block.json | 6 +- packages/block-library/src/image/edit.js | 21 --- packages/block-library/src/image/save.js | 8 -- 6 files changed, 73 insertions(+), 100 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 6862ba9fffe6f..7eb3a294f49fd 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -45,8 +45,7 @@ }, "providesContext": { "allowBlockAlign": "allowBlockAlign", - "allowResize": "allowResize", - "isList": "isList" + "allowResize": "allowResize" }, "supports": { "anchor": true, diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 4ccb90cfae593..4ac87a8302a21 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -45,6 +45,11 @@ export const Gallery = ( props ) => { ( + <> +
            • { item }
              • + + ) } > { mediaPlaceholder } diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index ce6c785d83333..309860d511f8e 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -1,78 +1,80 @@ .wp-block-gallery { - ul { + ul.block-editor-block-list__layout { display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; // Some themes give all
                default margin instead of padding. margin: 0; - } - - .wp-block-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; + 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; - 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 - ); - + + // 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 .wp-block-image { + &.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. @@ -89,7 +91,7 @@ } // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. - & .wp-block-image { + & .wp-block-gallery__image { width: calc( 50% - #{$grid-unit-20} ); &:nth-of-type( even ) { @@ -97,7 +99,7 @@ } } - &.columns-1 .wp-block-image { + &.columns-1 .wp-block-gallery__image { width: 100%; margin-right: 0; } @@ -105,7 +107,7 @@ // Beyond mobile viewports, we allow up to 8 columns. @include break-small { @for $i from 3 through 8 { - &.columns-#{ $i } .wp-block-image { + &.columns-#{ $i } .wp-block-gallery__image { width: calc( #{100% / $i} - #{$grid-unit-20 * ( $i - 1 ) / $i} ); @@ -118,14 +120,14 @@ &.columns-#{ $column-count } - .wp-block-image:nth-of-type( #{ $column-count }n ) { + .wp-block-gallery__image:nth-of-type( #{ $column-count }n ) { margin-right: 0; } } } // Last item always needs margins reset. - .wp-block-image:last-child { + .wp-block-gallery__image:last-child { margin-right: 0; } @@ -138,7 +140,7 @@ // If the gallery is centered, center the content inside as well. &.aligncenter { - figure.wp-block-image { + 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 25b2d8c06ae3d..ee83aaf982d7a 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/image", "category": "media", - "usesContext": [ "allowBlockAlign", "allowResize", "isList" ], + "usesContext": [ "allowBlockAlign", "allowResize" ], "attributes": { "align": { "type": "string" @@ -69,10 +69,6 @@ "source": "attribute", "selector": "figure > a", "attribute": "target" - }, - "isListItem": { - "type": "boolean", - "default": false } }, "supports": { diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index a3bdd60ceb248..45389900c8610 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -91,7 +91,6 @@ export function ImageEdit( { width, height, sizeSlug, - isListItem, } = attributes; const altRef = useRef(); @@ -270,12 +269,6 @@ export function ImageEdit( { }; }, [ isTemp ] ); - useEffect( () => { - if ( context?.isList ) { - setAttributes( { isListItem: context.isList } ); - } - }, [ context ] ); - const isExternal = isExternalImage( id, url ); const controls = ( @@ -339,20 +332,6 @@ export function ImageEdit( { /> ); - if ( isListItem ) { - return ( - <> - { controls } - -
                - { image } - { mediaPlaceholder } -
                -                 - - ); - } - return ( <> { controls } diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index 956fff9f8552d..5c34edb368cd3 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -24,7 +24,6 @@ export default function save( { attributes } ) { linkTarget, sizeSlug, title, - isListItem, } = attributes; const newRel = isEmpty( rel ) ? undefined : rel; @@ -74,12 +73,5 @@ export default function save( { attributes } ) { ); } - if ( isListItem ) { - return ( -
              • -
                { figure }
                -
                • - ); - } return
                { figure }
                ; } From 2399c056813a48212388d7a65308c4dc5728668e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 18 Aug 2020 13:54:25 +1200 Subject: [PATCH 17/20] add child wrapper callback to InnerBlocks.Content in save method --- packages/block-library/src/gallery/save.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index b3e70dc02691c..a95a93d3a3652 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -28,7 +28,13 @@ export default function save( { attributes } ) { }` } >
                  - + ( + <> +
                • { item }
                  • + + ) } + />
                { ! RichText.isEmpty( caption ) && ( From 8a600feac632c0ea0053e48545177573f72ca289 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 19 Aug 2020 16:04:56 +1200 Subject: [PATCH 18/20] remove unneeded fragments --- packages/block-library/src/gallery/gallery.js | 4 +--- packages/block-library/src/gallery/save.js | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 4ac87a8302a21..3e0e9b12d7c58 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -46,9 +46,7 @@ export const Gallery = ( props ) => { allowedBlocks={ [ 'core/image' ] } __experimentalTagName="ul" __experimentalItemCallback={ ( item ) => ( - <> -
              • { item }
                • - +
              • { item }
                • ) } > diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index a95a93d3a3652..f6217a307989a 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -30,9 +30,7 @@ export default function save( { attributes } ) {
                  ( - <> -
                • { item }
                  • - +
                • { item }
                  • ) } />
                From 11a028c58aeda9a0ea81fd781f918e0c889b179c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 21 Aug 2020 15:07:31 +1200 Subject: [PATCH 19/20] Fix classname --- packages/block-library/src/gallery/gallery.js | 2 +- packages/block-library/src/gallery/save.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 3e0e9b12d7c58..44c943d1bdcb1 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -46,7 +46,7 @@ export const Gallery = ( props ) => { allowedBlocks={ [ 'core/image' ] } __experimentalTagName="ul" __experimentalItemCallback={ ( item ) => ( -
              • { item }
                • +
              • { item }
                • ) } > diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index f6217a307989a..05d264a152720 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -30,7 +30,7 @@ export default function save( { attributes } ) {
                  ( -
                • { item }
                  • +
                • { item }
                  • ) } />
                From adaee2cfa8acde7b405ff46247f85a3f39a7c177 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 7 Sep 2020 11:41:55 +1200 Subject: [PATCH 20/20] Fix error with defaultColumnsNumber when attributes.ids is not set Make InnerBlocks self closing in save method --- packages/block-library/src/gallery/gallery.js | 2 +- packages/block-library/src/gallery/shared.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 44c943d1bdcb1..2ab4cbba4ae28 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -48,7 +48,7 @@ export const Gallery = ( props ) => { __experimentalItemCallback={ ( item ) => (
              • { item }
                • ) } - > + /> { mediaPlaceholder } {