From a520aa1a0792770c86677dd223a42020fd557c10 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 7 Sep 2021 13:52:50 +1200 Subject: [PATCH 1/6] Add gap support to the gallery block --- packages/block-library/src/gallery/block.json | 8 +++++++- packages/block-library/src/gallery/style.scss | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 2f70b440f3a4d..0dbcab56e34b9 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -100,7 +100,13 @@ }, "supports": { "anchor": true, - "align": true + "align": true, + "spacing": { + "blockGap": true, + "__experimentalDefaultControls": { + "blockGap": true + } + } }, "editorStyle": "wp-block-gallery-editor", "style": "wp-block-gallery" diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index df7cf0634405e..f2df91b17a1cb 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -3,6 +3,10 @@ // Styles for current version of gallery block. .wp-block-gallery.has-nested-images { + --gallery-block--gutter-size: var( + --wp--style--block-gap, + $blocks-block__margin + ); display: flex; flex-wrap: wrap; // Need bogus :not(#individual-image) to override long :not() From a1ca116568b1b1bcc79f98241cbf4c9502562cbb Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 8 Sep 2021 10:22:23 +1200 Subject: [PATCH 2/6] Tidy up the css var declarations --- packages/block-library/src/gallery/style.scss | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index f2df91b17a1cb..b38ced60103d6 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -3,23 +3,24 @@ // Styles for current version of gallery block. .wp-block-gallery.has-nested-images { - --gallery-block--gutter-size: var( - --wp--style--block-gap, - $blocks-block__margin - ); + --gallery-block--gutter-size: + var( + --wp--style--block-gap, + $grid-unit-20 + ); display: flex; flex-wrap: wrap; // Need bogus :not(#individual-image) to override long :not() // specificity chain on default image block on front end. figure.wp-block-image:not(#individual-image) { // Add space between thumbnails, and unset right most thumbnails later. - margin: 0 var(--gallery-block--gutter-size, #{$grid-unit-20}) var(--gallery-block--gutter-size, #{$grid-unit-20}) 0; + margin: 0 var(--gallery-block--gutter-size) var(--gallery-block--gutter-size) 0; &:last-of-type:not(#individual-image) { margin-right: 0; } - width: calc(50% - (var(--gallery-block--gutter-size, #{$grid-unit-20}) / 2)); + width: calc(50% - (var(--gallery-block--gutter-size) / 2)); &:nth-of-type(even) { margin-right: 0; @@ -98,11 +99,11 @@ margin-top: 0; margin-bottom: auto; img { - margin-bottom: var(--gallery-block--gutter-size, #{$grid-unit-20}); + margin-bottom: var(--gallery-block--gutter-size); } figcaption { - bottom: var(--gallery-block--gutter-size, #{$grid-unit-20}); + bottom: var(--gallery-block--gutter-size); } } } @@ -133,14 +134,14 @@ @include break-small { @for $i from 3 through 8 { &.columns-#{ $i } figure.wp-block-image:not(#individual-image) { - margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); - width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{math.div($i - 1, $i)})); + margin-right: var(--gallery-block--gutter-size); + width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size) * #{math.div($i - 1, $i)})); } // Prevent collapsing margin while sibling is being dragged. &.columns-#{$i} figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) { - margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); + margin-right: var(--gallery-block--gutter-size); } } // Unset the right margin on every rightmost gallery item to ensure center balance. @@ -152,7 +153,7 @@ // If number of columns not explicitly set default to 3 columns if 3 or more images. &.columns-default { figure.wp-block-image:not(#individual-image) { - margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); + margin-right: var(--gallery-block--gutter-size); width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * #{math.div(2, 3)})); } figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) { From 0a7ee1324fc44a4542e5e679f217338227a037fc Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 8 Sep 2021 10:30:51 +1200 Subject: [PATCH 3/6] Fix linting --- packages/block-library/src/gallery/style.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index b38ced60103d6..aa1fcb0a848ac 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -3,11 +3,7 @@ // Styles for current version of gallery block. .wp-block-gallery.has-nested-images { - --gallery-block--gutter-size: - var( - --wp--style--block-gap, - $grid-unit-20 - ); + --gallery-block--gutter-size: var(--wp--style--block-gap, $grid-unit-20); display: flex; flex-wrap: wrap; // Need bogus :not(#individual-image) to override long :not() From f3b02fc9c5e88b810b030055fa2629aa4b36e7cd Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 8 Sep 2021 11:15:11 +1200 Subject: [PATCH 4/6] Remove the tools panel from V1 of the gallery --- packages/block-library/src/gallery/v1/edit.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js index 3f0d21277f8cc..5806829ca91b7 100644 --- a/packages/block-library/src/gallery/v1/edit.js +++ b/packages/block-library/src/gallery/v1/edit.js @@ -94,6 +94,18 @@ function GalleryEdit( props ) { blockEditorStore ); + // Remove the tools panel for v1 Gallery so we only have to support + // any new dimension settings, etc. for the new gallery format. + const toolsPanel = document.getElementsByClassName( + 'components-tools-panel' + )[ 0 ]; + + useEffect( () => { + if ( toolsPanel && isSelected ) { + toolsPanel.style.display = 'none'; + } + }, [ toolsPanel ] ); + const { imageSizes, mediaUpload, From f374a4626d03d51a0d00a166cdf4a6ae5bde5eb0 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 8 Sep 2021 16:54:58 +1200 Subject: [PATCH 5/6] Fixes from code review --- packages/block-library/src/gallery/style.scss | 2 +- packages/block-library/src/gallery/v1/edit.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index aa1fcb0a848ac..5061f3c4b90e2 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -3,7 +3,7 @@ // Styles for current version of gallery block. .wp-block-gallery.has-nested-images { - --gallery-block--gutter-size: var(--wp--style--block-gap, $grid-unit-20); + --gallery-block--gutter-size: var(--wp--style--block-gap, #{$grid-unit-20}); display: flex; flex-wrap: wrap; // Need bogus :not(#individual-image) to override long :not() diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js index 5806829ca91b7..f6ed4c75f574f 100644 --- a/packages/block-library/src/gallery/v1/edit.js +++ b/packages/block-library/src/gallery/v1/edit.js @@ -96,9 +96,9 @@ function GalleryEdit( props ) { // Remove the tools panel for v1 Gallery so we only have to support // any new dimension settings, etc. for the new gallery format. - const toolsPanel = document.getElementsByClassName( - 'components-tools-panel' - )[ 0 ]; + const toolsPanel = document.querySelector( + '.block-editor-block-inspector .components-tools-panel' + ); useEffect( () => { if ( toolsPanel && isSelected ) { From 8c279103dc981f25eda39481fe5e56a9cf618cd4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 9 Sep 2021 16:13:16 +1200 Subject: [PATCH 6/6] Switch to using gap instead of right margin --- 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 5061f3c4b90e2..f0691fd9c4c50 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -3,24 +3,21 @@ // Styles for current version of gallery block. .wp-block-gallery.has-nested-images { - --gallery-block--gutter-size: var(--wp--style--block-gap, #{$grid-unit-20}); + --gallery-block--gap: var(--wp--style--block-gap, #{$grid-unit-20}); display: flex; + gap: var(--gallery-block--gap); flex-wrap: wrap; // Need bogus :not(#individual-image) to override long :not() // specificity chain on default image block on front end. figure.wp-block-image:not(#individual-image) { // Add space between thumbnails, and unset right most thumbnails later. - margin: 0 var(--gallery-block--gutter-size) var(--gallery-block--gutter-size) 0; + margin: 0; &:last-of-type:not(#individual-image) { margin-right: 0; } - width: calc(50% - (var(--gallery-block--gutter-size) / 2)); - - &:nth-of-type(even) { - margin-right: 0; - } + width: calc(50% - (var(--gallery-block--gap) / 2)); } figure.wp-block-image { @@ -95,11 +92,11 @@ margin-top: 0; margin-bottom: auto; img { - margin-bottom: var(--gallery-block--gutter-size); + margin-bottom: var(--gallery-block--gap); } figcaption { - bottom: var(--gallery-block--gutter-size); + bottom: var(--gallery-block--gap); } } } @@ -122,7 +119,6 @@ } &.columns-1 figure.wp-block-image:not(#individual-image) { - margin-right: 0; width: 100%; } @@ -130,35 +126,21 @@ @include break-small { @for $i from 3 through 8 { &.columns-#{ $i } figure.wp-block-image:not(#individual-image) { - margin-right: var(--gallery-block--gutter-size); - width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size) * #{math.div($i - 1, $i)})); - - } + width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gap) * #{math.div($i - 1, $i)})); - // Prevent collapsing margin while sibling is being dragged. - &.columns-#{$i} figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) { - margin-right: var(--gallery-block--gutter-size); - } - } - // Unset the right margin on every rightmost gallery item to ensure center balance. - @for $column-count from 1 through 8 { - &.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) { - margin-right: 0; } } + // If number of columns not explicitly set default to 3 columns if 3 or more images. &.columns-default { figure.wp-block-image:not(#individual-image) { - margin-right: var(--gallery-block--gutter-size); - width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * #{math.div(2, 3)})); - } - figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) { - margin-right: 0; + width: calc(33.33% - (var(--gallery-block--gap) * #{math.div(2, 3)})); } + // If only 2 child images use 2 columns. figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) { - width: calc(50% - (var(--gallery-block--gutter-size, 16px) * 0.5)); + width: calc(50% - (var(--gallery-block--gap) * 0.5)); } // For a single image set to 100%. figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {