From d8eaefb81f103898a66ba2eaebd2057c255f7e7b Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 14 Dec 2017 09:56:47 +0100 Subject: [PATCH 1/6] Try new gallery markup This is a new version of the PR by #3441 by @samikeijonen. It's just basically "rebased". It seems to be working fine in practice, the chief purpose is to make the gallery be list based. I'm getting "modified externally" warnings, though. --- blocks/library/gallery/block.js | 4 +- blocks/library/gallery/editor.scss | 2 +- blocks/library/gallery/gallery-image.js | 30 ++++++----- blocks/library/gallery/index.js | 14 ++--- blocks/library/gallery/style.scss | 52 +++++++------------ blocks/test/fixtures/core__gallery.html | 20 ++++--- blocks/test/fixtures/core__gallery.json | 2 +- .../test/fixtures/core__gallery.parsed.json | 2 +- .../fixtures/core__gallery.serialized.html | 16 ++++-- .../test/fixtures/core__gallery__columns.html | 20 ++++--- .../test/fixtures/core__gallery__columns.json | 4 +- .../core__gallery__columns.parsed.json | 2 +- .../core__gallery__columns.serialized.html | 16 ++++-- editor/assets/stylesheets/main.scss | 4 +- post-content.js | 18 +++---- 15 files changed, 110 insertions(+), 96 deletions(-) diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js index e2c58f488375b..caac3d72af7b8 100644 --- a/blocks/library/gallery/block.js +++ b/blocks/library/gallery/block.js @@ -235,7 +235,7 @@ class GalleryBlock extends Component { /> ), -
+
, + , ]; } } diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index b4ba07b8d04c4..7a65a586f81a8 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -2,7 +2,7 @@ margin: -8px; } -.blocks-gallery-image { +.blocks-gallery-item { position: relative; &.is-selected { diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js index 6ce5315ded44e..0d243bc6ca55a 100644 --- a/blocks/library/gallery/gallery-image.js +++ b/blocks/library/gallery/gallery-image.js @@ -36,26 +36,28 @@ class GalleryImage extends Component { const img = url ? { : ; - const className = classnames( 'blocks-gallery-image', { + const className = classnames( 'blocks-gallery-item', { 'is-selected': isSelected, } ); // Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( -
- { isSelected && -
- -
- } - { href ? { img } : img } -
+
  • +
    + { isSelected && +
    + +
    + } + { href ? { img } : img } +
    +
    • ); /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 5d20879114423..bbd1240d9fd60 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -33,7 +33,7 @@ registerBlockType( 'core/gallery', { type: 'array', default: [], source: 'query', - selector: 'div.wp-block-gallery figure.blocks-gallery-image img', + selector: 'ul.wp-block-gallery .blocks-gallery-item img', query: { url: { source: 'attribute', @@ -151,7 +151,7 @@ registerBlockType( 'core/gallery', { save( { attributes } ) { const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; return ( -
    +
      { images.map( ( image ) => { let href; @@ -167,12 +167,14 @@ registerBlockType( 'core/gallery', { const img = {; return ( -
      - { href ? { img } : img } -
      +
    • +
      + { href ? { img } : img } +
      +
      • ); } ) } -
    + ); }, diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index 7f4e436eaa2d5..48646855bfb98 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -4,22 +4,29 @@ .wp-block-gallery.aligncenter { display: flex; flex-wrap: wrap; + list-style-type: none; - .blocks-gallery-image { + .blocks-gallery-item { margin: 8px; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; + figure { + height: 100%; + margin: 0; + } + img { + display: block; max-width: 100%; height: auto; } } // Cropped - &.is-cropped .blocks-gallery-image { + &.is-cropped .blocks-gallery-item { img { flex: 1; width: 100%; @@ -29,47 +36,26 @@ } // Alas, IE11+ doesn't support object-fit - _:-ms-lang(x), img { + _:-ms-lang(x), figure { height: auto; width: auto; } } - &.columns-1 figure { - width: calc(100% / 1 - 16px); - } - &.columns-2 figure { - width: calc(100% / 2 - 16px); + // Responsive fallback value, 2 columns + & .blocks-gallery-item { + width: calc( 100% / 2 - 16px ); } - // Responsive fallback value, 2 columns - &.columns-3 figure, - &.columns-4 figure, - &.columns-5 figure, - &.columns-6 figure, - &.columns-7 figure, - &.columns-8 figure { - width: calc(100% / 2 - 16px); + &.columns-1 .blocks-gallery-item { + width: calc(100% / 1 - 16px); } @include break-small { - &.columns-3 figure { - width: calc(100% / 3 - 16px); - } - &.columns-4 figure { - width: calc(100% / 4 - 16px); - } - &.columns-5 figure { - width: calc(100% / 5 - 16px); - } - &.columns-6 figure { - width: calc(100% / 6 - 16px); - } - &.columns-7 figure { - width: calc(100% / 7 - 16px); - } - &.columns-8 figure { - width: calc(100% / 8 - 16px); + @for $i from 3 through 8 { + &.columns-#{ $i } .blocks-gallery-item { + width: calc(100% / #{ $i } - 16px ); + } } } } diff --git a/blocks/test/fixtures/core__gallery.html b/blocks/test/fixtures/core__gallery.html index b74b304f41e3f..04de21e2d9e31 100644 --- a/blocks/test/fixtures/core__gallery.html +++ b/blocks/test/fixtures/core__gallery.html @@ -1,10 +1,14 @@ -
    -
    - title -
    -
    - title -
    -
    + diff --git a/blocks/test/fixtures/core__gallery.json b/blocks/test/fixtures/core__gallery.json index 4d1777693f753..fb6297c656a90 100644 --- a/blocks/test/fixtures/core__gallery.json +++ b/blocks/test/fixtures/core__gallery.json @@ -18,6 +18,6 @@ "imageCrop": true, "linkTo": "none" }, - "originalContent": "
    \n\t
    \n\t\t\"title\"\n\t
    \n\t
    \n\t\t\"title\"\n\t
    \n
    " + "originalContent": "" } ] diff --git a/blocks/test/fixtures/core__gallery.parsed.json b/blocks/test/fixtures/core__gallery.parsed.json index f4c318b6e5213..a7b0f1e5c12b6 100644 --- a/blocks/test/fixtures/core__gallery.parsed.json +++ b/blocks/test/fixtures/core__gallery.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/gallery", "attrs": null, "innerBlocks": [], - "innerHTML": "\n
    \n\t
    \n\t\t\"title\"\n\t
    \n\t
    \n\t\t\"title\"\n\t
    \n
    \n" + "innerHTML": "\n\n" }, { "attrs": {}, diff --git a/blocks/test/fixtures/core__gallery.serialized.html b/blocks/test/fixtures/core__gallery.serialized.html index f00d97942ebef..1e5052940c378 100644 --- a/blocks/test/fixtures/core__gallery.serialized.html +++ b/blocks/test/fixtures/core__gallery.serialized.html @@ -1,6 +1,14 @@ -
    -
    title
    -
    title
    -
    + diff --git a/blocks/test/fixtures/core__gallery__columns.html b/blocks/test/fixtures/core__gallery__columns.html index 3fe69778320f6..78fd5f750274f 100644 --- a/blocks/test/fixtures/core__gallery__columns.html +++ b/blocks/test/fixtures/core__gallery__columns.html @@ -1,10 +1,14 @@ -
    -
    - title -
    -
    - title -
    -
    + diff --git a/blocks/test/fixtures/core__gallery__columns.json b/blocks/test/fixtures/core__gallery__columns.json index 2b3e2e7fca6e6..523c94b687e55 100644 --- a/blocks/test/fixtures/core__gallery__columns.json +++ b/blocks/test/fixtures/core__gallery__columns.json @@ -2,7 +2,7 @@ { "uid": "_uid_0", "name": "core/gallery", - "isValid": true, + "isValid": false, "attributes": { "align": "none", "images": [ @@ -19,6 +19,6 @@ "imageCrop": true, "linkTo": "none" }, - "originalContent": "
    \n\t
    \n\t\t\"title\"\n\t
    \n\t
    \n\t\t\"title\"\n\t
    \n
    " + "originalContent": "" } ] diff --git a/blocks/test/fixtures/core__gallery__columns.parsed.json b/blocks/test/fixtures/core__gallery__columns.parsed.json index 291420ff0b4c3..18c8b174b62d3 100644 --- a/blocks/test/fixtures/core__gallery__columns.parsed.json +++ b/blocks/test/fixtures/core__gallery__columns.parsed.json @@ -5,7 +5,7 @@ "columns": "1" }, "innerBlocks": [], - "innerHTML": "\n
    \n\t
    \n\t\t\"title\"\n\t
    \n\t
    \n\t\t\"title\"\n\t
    \n
    \n" + "innerHTML": "\n\n" }, { "attrs": {}, diff --git a/blocks/test/fixtures/core__gallery__columns.serialized.html b/blocks/test/fixtures/core__gallery__columns.serialized.html index 39501c3ae1a1e..9e7bf00dbe853 100644 --- a/blocks/test/fixtures/core__gallery__columns.serialized.html +++ b/blocks/test/fixtures/core__gallery__columns.serialized.html @@ -1,6 +1,14 @@ -
    -
    title
    -
    title
    -
    + diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index b01d63b1bb69b..6c9256ad6f045 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -43,11 +43,11 @@ body.gutenberg-editor-page { box-sizing: border-box; } - ul { + ul:not(.wp-block-gallery) { list-style-type: disc; } - ol { + ol:not(.wp-block-gallery) { list-style-type: decimal; } diff --git a/post-content.js b/post-content.js index aec808790da65..9d7ae5a55d6f1 100644 --- a/post-content.js +++ b/post-content.js @@ -84,11 +84,11 @@ window._wpGutenbergPost.content = { '', '', - '
    ', - '
    ', - '
    ', - '
    ', - '
    ', + '', '', '', @@ -112,10 +112,10 @@ window._wpGutenbergPost.content = { '', '', - '
    ', - '
    ', - '
    ', - '
    ', + '', '', '', From 446644580ea41b9ae7badb7a15f0b2637c8de44a Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 18 Jan 2018 09:29:05 +0100 Subject: [PATCH 2/6] Address feedback - Move li outside of component - Fix CSS typo - Add deprecated section --- blocks/library/gallery/block.js | 21 ++++++++------- blocks/library/gallery/editor.scss | 2 +- blocks/library/gallery/gallery-image.js | 30 ++++++++++----------- blocks/library/gallery/index.js | 36 ++++++++++++++++++++++++- 4 files changed, 61 insertions(+), 28 deletions(-) diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js index caac3d72af7b8..6d19bc812f361 100644 --- a/blocks/library/gallery/block.js +++ b/blocks/library/gallery/block.js @@ -238,16 +238,17 @@ class GalleryBlock extends Component {
      { dropZone } { images.map( ( img, index ) => ( - this.setImageAttributes( index, attrs ) } - /> +
    • + this.setImageAttributes( index, attrs ) } + /> +
      • ) ) }
    , ]; diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index 7a65a586f81a8..4a69cd818927c 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -5,7 +5,7 @@ .blocks-gallery-item { position: relative; - &.is-selected { + .is-selected { outline: 4px solid $blue-medium-500; outline-offset: -4px; } diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js index 0d243bc6ca55a..a4316cfe1ec6c 100644 --- a/blocks/library/gallery/gallery-image.js +++ b/blocks/library/gallery/gallery-image.js @@ -36,28 +36,26 @@ class GalleryImage extends Component { const img = url ? { : ; - const className = classnames( 'blocks-gallery-item', { + const className = classnames( { 'is-selected': isSelected, } ); // Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( -
  • -
    - { isSelected && -
    - -
    - } - { href ? { img } : img } -
    -
    • +
    + { isSelected && +
    + +
    + } + { href ? { img } : img } +
    ); /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index bbd1240d9fd60..2235bb97cbe17 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -33,7 +33,7 @@ registerBlockType( 'core/gallery', { type: 'array', default: [], source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-item img', + selector: 'ul.wp-block-gallery .blocks-gallery-image img', query: { url: { source: 'attribute', @@ -178,4 +178,38 @@ registerBlockType( 'core/gallery', { ); }, + deprecated: [ + { + save( { attributes } ) { + const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; + 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 } +
    +
    • + ); + } ) } +
    + ); + }, + }, + ], + } ); From 3da07987063dc301c04def417392cd4a3754ff75 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 18 Jan 2018 09:49:39 +0100 Subject: [PATCH 3/6] Replace all instances of blocks-gallery-image --- blocks/library/gallery/editor.scss | 6 +++--- blocks/library/gallery/gallery-image.js | 4 ++-- blocks/library/gallery/index.js | 6 +++--- blocks/test/fixtures/core__gallery.html | 4 ++-- blocks/test/fixtures/core__gallery.serialized.html | 4 ++-- editor/assets/stylesheets/_z-index.scss | 2 +- phpunit/fixtures/long-content.html | 10 +++++----- post-content.js | 6 +++--- 8 files changed, 21 insertions(+), 21 deletions(-) diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index 4a69cd818927c..c6a8d2fa6933b 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -11,14 +11,14 @@ } } -.blocks-gallery-image__inline-menu { +.blocks-gallery-item__inline-menu { padding: 2px; position: absolute; top: 0; right: 0; background-color: $blue-medium-500; display: inline-flex; - z-index: z-index( '.blocks-gallery-image__inline-menu' ); + z-index: z-index( '.blocks-gallery-item__inline-menu' ); .components-button { color: $white; @@ -29,6 +29,6 @@ } } -.blocks-gallery-image__remove { +.blocks-gallery-item__remove { padding: 0; } diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js index a4316cfe1ec6c..78b538c9d14e1 100644 --- a/blocks/library/gallery/gallery-image.js +++ b/blocks/library/gallery/gallery-image.js @@ -45,11 +45,11 @@ class GalleryImage extends Component { return (
    { isSelected && -
    +
    diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 2235bb97cbe17..63e4875d3fa94 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -33,7 +33,7 @@ registerBlockType( 'core/gallery', { type: 'array', default: [], source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-image img', + selector: 'ul.wp-block-gallery .blocks-gallery-item img', query: { url: { source: 'attribute', @@ -167,7 +167,7 @@ registerBlockType( 'core/gallery', { const img = {; return ( -
  • +
  • { href ? { img } : img }
    @@ -199,7 +199,7 @@ registerBlockType( 'core/gallery', { const img = {; return ( -
  • +
  • { href ? { img } : img }
    diff --git a/blocks/test/fixtures/core__gallery.html b/blocks/test/fixtures/core__gallery.html index 04de21e2d9e31..ec923b2a36043 100644 --- a/blocks/test/fixtures/core__gallery.html +++ b/blocks/test/fixtures/core__gallery.html @@ -1,11 +1,11 @@
      -
    • +
    • title
      • -
    • +
    • title
      diff --git a/blocks/test/fixtures/core__gallery.serialized.html b/blocks/test/fixtures/core__gallery.serialized.html index 1e5052940c378..3d20c8641b1c8 100644 --- a/blocks/test/fixtures/core__gallery.serialized.html +++ b/blocks/test/fixtures/core__gallery.serialized.html @@ -1,11 +1,11 @@
        -
      • +
      • title
        • -
      • +
      • title
        diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index f218da7a81da5..6ddcf087abb80 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -22,7 +22,7 @@ $z-layers: ( '.editor-block-switcher__menu': 2, '.components-popover__close': 2, '.editor-block-mover': 1, - '.blocks-gallery-image__inline-menu': 20, + '.blocks-gallery-item__inline-menu': 20, '.editor-block-settings-menu__popover': 20, // Below the header '.editor-header': 30, '.editor-text-editor__formatting': 30, diff --git a/phpunit/fixtures/long-content.html b/phpunit/fixtures/long-content.html index 35194ee477030..d4b935b510513 100644 --- a/phpunit/fixtures/long-content.html +++ b/phpunit/fixtures/long-content.html @@ -67,9 +67,9 @@

        Visual Editing

        -
        -
        -
        +
        +
        +
        @@ -89,8 +89,8 @@

        Media Rich

        -
        -
        +
        +
        diff --git a/post-content.js b/post-content.js index 9d7ae5a55d6f1..7c3cd133ea6f4 100644 --- a/post-content.js +++ b/post-content.js @@ -85,9 +85,9 @@ window._wpGutenbergPost.content = { '', '
          ', - '
          • ', - '
          • ', - '
          • ', + '
          • ', + '
          • ', + '
          • ', '
        ', '', From 450f716ace6533838e2ee63e6dc2affa39f810ac Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 18 Jan 2018 11:15:01 +0100 Subject: [PATCH 4/6] Try adjusting deprecated attributes Also re-add the deprecated CSS class. --- blocks/library/gallery/index.js | 39 +++++++++++++++++++++++++++++++ blocks/library/gallery/style.scss | 5 ++++ 2 files changed, 44 insertions(+) diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 63e4875d3fa94..ef0961997d6c8 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -180,6 +180,45 @@ registerBlockType( 'core/gallery', { deprecated: [ { + attributes: { + align: { + type: 'string', + default: 'none', + }, + 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', + }, + }, + save( { attributes } ) { const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; return ( diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index 48646855bfb98..96b4f3d508119 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -6,6 +6,7 @@ flex-wrap: wrap; list-style-type: none; + .blocks-gallery-image, .blocks-gallery-item { margin: 8px; display: flex; @@ -26,6 +27,7 @@ } // Cropped + &.is-cropped .blocks-gallery-image, &.is-cropped .blocks-gallery-item { img { flex: 1; @@ -43,16 +45,19 @@ } // Responsive fallback value, 2 columns + & .blocks-gallery-image, & .blocks-gallery-item { width: calc( 100% / 2 - 16px ); } + &.columns-1 .blocks-gallery-image, &.columns-1 .blocks-gallery-item { width: calc(100% / 1 - 16px); } @include break-small { @for $i from 3 through 8 { + &.columns-#{ $i } .blocks-gallery-image, &.columns-#{ $i } .blocks-gallery-item { width: calc(100% / #{ $i } - 16px ); } From 91b250446209fb47bccd76a08896b94db7185f6e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 18 Jan 2018 11:26:34 +0100 Subject: [PATCH 5/6] Gallery Block: Fix deprecated version --- blocks/library/gallery/index.js | 126 ++++++++++++-------------------- 1 file changed, 47 insertions(+), 79 deletions(-) diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index ef0961997d6c8..a891e21969de1 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -17,51 +17,52 @@ import './style.scss'; import { registerBlockType, createBlock } from '../../api'; import { default as GalleryBlock, defaultColumnsNumber } from './block'; +const blockAttributes = { + align: { + type: 'string', + default: 'none', + }, + images: { + type: 'array', + default: [], + source: 'query', + selector: 'ul.wp-block-gallery .blocks-gallery-item 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', + }, +}; + registerBlockType( 'core/gallery', { title: __( 'Gallery' ), description: __( 'Image galleries are a great way to share groups of pictures on your site.' ), icon: 'format-gallery', category: 'common', keywords: [ __( 'images' ), __( 'photos' ) ], - - attributes: { - align: { - type: 'string', - default: 'none', - }, - images: { - type: 'array', - default: [], - source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-item 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', - }, - }, + attributes: blockAttributes, transforms: { from: [ @@ -69,8 +70,8 @@ registerBlockType( 'core/gallery', { type: 'block', isMultiBlock: true, blocks: [ 'core/image' ], - transform: ( blockAttributes ) => { - const validImages = filter( blockAttributes, ( { id, url } ) => id && url ); + transform: ( attributes ) => { + const validImages = filter( attributes, ( { id, url } ) => id && url ); if ( validImages.length > 0 ) { return createBlock( 'core/gallery', { images: validImages.map( ( { id, url, alt } ) => ( { id, url, alt } ) ), @@ -181,41 +182,10 @@ registerBlockType( 'core/gallery', { deprecated: [ { attributes: { - align: { - type: 'string', - default: 'none', - }, + ...blockAttributes, images: { - type: 'array', - default: [], - source: 'query', + ...blockAttributes.images, 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', }, }, @@ -238,11 +208,9 @@ registerBlockType( 'core/gallery', { const img = {; return ( -
      • -
        - { href ? { img } : img } -
        -
        • +
        + { href ? { img } : img } +
        ); } ) }
    • From d04b78dd75a66aa5acf8e82263fb2aaa9ea679c9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 18 Jan 2018 11:38:04 +0100 Subject: [PATCH 6/6] Gallery Block: Fix tests --- blocks/test/fixtures/core__gallery.json | 2 +- blocks/test/fixtures/core__gallery.parsed.json | 2 +- blocks/test/fixtures/core__gallery.serialized.html | 12 ++++-------- blocks/test/fixtures/core__gallery__columns.html | 2 +- blocks/test/fixtures/core__gallery__columns.json | 4 ++-- .../test/fixtures/core__gallery__columns.parsed.json | 2 +- .../fixtures/core__gallery__columns.serialized.html | 10 +++------- 7 files changed, 13 insertions(+), 21 deletions(-) diff --git a/blocks/test/fixtures/core__gallery.json b/blocks/test/fixtures/core__gallery.json index fb6297c656a90..60f85dd327fe7 100644 --- a/blocks/test/fixtures/core__gallery.json +++ b/blocks/test/fixtures/core__gallery.json @@ -18,6 +18,6 @@ "imageCrop": true, "linkTo": "none" }, - "originalContent": "
      \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n
    " + "originalContent": "
      \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n
    " } ] diff --git a/blocks/test/fixtures/core__gallery.parsed.json b/blocks/test/fixtures/core__gallery.parsed.json index a7b0f1e5c12b6..e187acdd51e60 100644 --- a/blocks/test/fixtures/core__gallery.parsed.json +++ b/blocks/test/fixtures/core__gallery.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/gallery", "attrs": null, "innerBlocks": [], - "innerHTML": "\n
      \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n
    \n" + "innerHTML": "\n
      \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n\t
    • \n\t\t
      \n\t\t\t\"title\"\n\t\t
      \n\t
      • \n
    \n" }, { "attrs": {}, diff --git a/blocks/test/fixtures/core__gallery.serialized.html b/blocks/test/fixtures/core__gallery.serialized.html index 3d20c8641b1c8..2e93e66f6c4ae 100644 --- a/blocks/test/fixtures/core__gallery.serialized.html +++ b/blocks/test/fixtures/core__gallery.serialized.html @@ -1,14 +1,10 @@
    • -
      - title -
      -
      • +
      title
      +
    • -
      - title -
      -
      • +
      title
      +
    diff --git a/blocks/test/fixtures/core__gallery__columns.html b/blocks/test/fixtures/core__gallery__columns.html index 78fd5f750274f..24d87615b81a6 100644 --- a/blocks/test/fixtures/core__gallery__columns.html +++ b/blocks/test/fixtures/core__gallery__columns.html @@ -1,5 +1,5 @@ -
      +
      • title diff --git a/blocks/test/fixtures/core__gallery__columns.json b/blocks/test/fixtures/core__gallery__columns.json index 523c94b687e55..d5444c63be8a1 100644 --- a/blocks/test/fixtures/core__gallery__columns.json +++ b/blocks/test/fixtures/core__gallery__columns.json @@ -2,7 +2,7 @@ { "uid": "_uid_0", "name": "core/gallery", - "isValid": false, + "isValid": true, "attributes": { "align": "none", "images": [ @@ -19,6 +19,6 @@ "imageCrop": true, "linkTo": "none" }, - "originalContent": "
          \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n
        " + "originalContent": "
          \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n
        " } ] diff --git a/blocks/test/fixtures/core__gallery__columns.parsed.json b/blocks/test/fixtures/core__gallery__columns.parsed.json index 18c8b174b62d3..8fd100edece69 100644 --- a/blocks/test/fixtures/core__gallery__columns.parsed.json +++ b/blocks/test/fixtures/core__gallery__columns.parsed.json @@ -5,7 +5,7 @@ "columns": "1" }, "innerBlocks": [], - "innerHTML": "\n
          \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n
        \n" + "innerHTML": "\n
          \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n\t
        • \n\t\t
          \n\t\t\t\"title\"\n\t\t
          \n\t
          • \n
        \n" }, { "attrs": {}, diff --git a/blocks/test/fixtures/core__gallery__columns.serialized.html b/blocks/test/fixtures/core__gallery__columns.serialized.html index 9e7bf00dbe853..63a881085e213 100644 --- a/blocks/test/fixtures/core__gallery__columns.serialized.html +++ b/blocks/test/fixtures/core__gallery__columns.serialized.html @@ -1,14 +1,10 @@ -
          +
          • -
            - title -
            +
            title
          • -
            - title -
            +
            title