From a8b3bea81136b864e826eb96b807669e9dd254c8 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 27 Oct 2021 16:10:31 -0400 Subject: [PATCH 1/3] Update method for spacing in CircularOptionPicker --- .../components/colors-gradients/style.scss | 19 +------------------ .../src/circular-option-picker/style.scss | 8 +++----- 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index c3070aa53106b2..fe2e7fa988165c 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -19,29 +19,12 @@ display: none; } - // Must equal $color-palette-circle-size from: - // @wordpress/components/src/circular-option-picker/style.scss - $swatch-size: 28px; - - // Optimize fit of six swatches per line using calc() to create variable - // spacing that mimics a "justified/space-between" layout and works with - // or without scrollbars @media screen and (min-width: $break-medium) { - // Overrides the default negative margin .components-circular-option-picker__swatches { - margin-right: 0; - } - // Figures the spacing - .components-circular-option-picker__option-wrapper { - margin-right: calc((100% - (#{$swatch-size} * 6)) / 5); - } - // Removes the right margin on every sixth swatch - .components-circular-option-picker__option-wrapper:nth-child(6n + 6) { - margin-right: 0; + justify-content: space-between; } } - // This shouldn't be needed but there's a rule in the inspector controls // overriding this causing too much spacing. // That generic rule should ideally be removed. diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index 49bd4a34298f40..8b764cccfb8ec7 100644 --- a/packages/components/src/circular-option-picker/style.scss +++ b/packages/components/src/circular-option-picker/style.scss @@ -11,10 +11,10 @@ $color-palette-circle-spacing: 12px; justify-content: flex-end; } - // Effectively negates the end swatch spacing to keep the swatches - // from wrapping before necessary. .components-circular-option-picker__swatches { - margin-right: -$color-palette-circle-spacing; + display: flex; + flex-wrap: wrap; + gap: $color-palette-circle-spacing; } } @@ -22,8 +22,6 @@ $color-palette-circle-spacing: 12px; display: inline-block; height: $color-palette-circle-size; width: $color-palette-circle-size; - margin-right: $color-palette-circle-spacing; - margin-bottom: $color-palette-circle-spacing; vertical-align: top; transform: scale(1); transition: 100ms transform ease; From ef12fb709dd2547f13395c6d5b8d2b388412748d Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 27 Oct 2021 17:41:10 -0400 Subject: [PATCH 2/3] left-align last row with grid --- .../block-editor/src/components/colors-gradients/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index fe2e7fa988165c..38106d39b830a9 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -21,7 +21,8 @@ @media screen and (min-width: $break-medium) { .components-circular-option-picker__swatches { - justify-content: space-between; + display: grid; + grid-template-columns: repeat(6, 1fr); } } From 73baba915fe42a27cea78558de27d49fd71168d7 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 27 Oct 2021 18:08:44 -0400 Subject: [PATCH 3/3] Err on the side of matching the old behavior exactly --- .../src/components/colors-gradients/style.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 38106d39b830a9..cf72b32b43f86d 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -19,10 +19,15 @@ display: none; } + // Must equal $color-palette-circle-size from: + // @wordpress/components/src/circular-option-picker/style.scss + $swatch-size: 28px; + @media screen and (min-width: $break-medium) { .components-circular-option-picker__swatches { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-template-columns: repeat(6, $swatch-size); + justify-content: space-between; } }