From 23b36e4a9bcc56ec71155b721e27b6b5d051fe0f Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 30 Apr 2021 15:29:29 +1000 Subject: [PATCH 01/21] Add border color, style and width support to image block --- packages/block-library/src/image/block.json | 7 ++++- packages/block-library/src/image/image.js | 33 +++++++++++++-------- packages/block-library/src/image/save.js | 9 +++++- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 25492061048214..4ab6d3a6ebbb41 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -84,9 +84,14 @@ "background": false }, "__experimentalBorder": { + "color": true, "radius": true, + "width": true, + "__experimentalSkipSerialization": true, "__experimentalDefaultControls": { - "radius": true + "color": true, + "radius": true, + "width": true } }, "__experimentalStyle": { diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 52fa307cecac80..98d1a4cfc38599 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -30,6 +30,7 @@ import { __experimentalImageEditor as ImageEditor, __experimentalImageEditingProvider as ImageEditingProvider, __experimentalGetElementClassName, + __experimentalUseBorderProps as useBorderProps, } from '@wordpress/block-editor'; import { useEffect, useMemo, useState, useRef } from '@wordpress/element'; import { __, sprintf, isRTL } from '@wordpress/i18n'; @@ -57,7 +58,19 @@ import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants'; export default function Image( { temporaryURL, - attributes: { + attributes, + setAttributes, + isSelected, + insertBlocksAfter, + onReplace, + onSelectImage, + onSelectURL, + onUploadError, + containerRef, + context, + clientId, +} ) { + const { url = '', alt, caption, @@ -72,18 +85,7 @@ export default function Image( { height, linkTarget, sizeSlug, - }, - setAttributes, - isSelected, - insertBlocksAfter, - onReplace, - onSelectImage, - onSelectURL, - onUploadError, - containerRef, - context, - clientId, -} ) { + } = attributes; const imageRef = useRef(); const captionRef = useRef(); const prevUrl = usePrevious( url ); @@ -429,6 +431,8 @@ export default function Image( { defaultedAlt = __( 'This image has an empty alt attribute' ); } + const borderProps = useBorderProps( attributes ); + let img = ( // Disable reason: Image itself is not meant to be interactive, but // should direct focus to block. @@ -445,6 +449,8 @@ export default function Image( { } ); } } ref={ imageRef } + className={ borderProps.className } + style={ borderProps.style } /> { temporaryURL && } @@ -466,6 +472,7 @@ export default function Image( { if ( canEditImage && isEditingImage ) { img = ( Date: Fri, 30 Apr 2021 16:30:46 +1000 Subject: [PATCH 02/21] Pass image border props to image cropper This is skipped for the rounded block style. --- .../src/components/image-editor/cropper.js | 12 +++++++++--- .../src/components/image-editor/index.js | 2 ++ packages/block-library/src/image/editor.scss | 1 + packages/block-library/src/image/image.js | 3 ++- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/image-editor/cropper.js b/packages/block-editor/src/components/image-editor/cropper.js index c6a005551573be..ed0be17a09b154 100644 --- a/packages/block-editor/src/components/image-editor/cropper.js +++ b/packages/block-editor/src/components/image-editor/cropper.js @@ -23,6 +23,7 @@ export default function ImageCropper( { clientWidth, naturalHeight, naturalWidth, + borderProps, } ) { const { isInProgress, @@ -44,10 +45,15 @@ export default function ImageCropper( { return (
Date: Mon, 9 Aug 2021 16:45:23 +1000 Subject: [PATCH 03/21] Provide baseline border styles for improved visual feedback --- packages/block-library/src/image/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 65072b0050ff02..134ca2c1104114 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -102,3 +102,13 @@ .wp-block-image figure { margin: 0; } + +// Set baseline border styles with zero specificity to improve visual feedback +// when user alters individual border properties via block support UI. +html :where(.wp-block-image img) { + border: 0 solid currentColor; +} + +html :where(.wp-block-image__crop-area) { + border: 0 solid currentColor; +} From 72210415aeb156ccd41e9559936660f575b6594d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 31 Aug 2021 18:15:09 +1000 Subject: [PATCH 04/21] Remove unneeded style now block support applied to img --- packages/block-library/src/image/editor.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index f036689c0f18ee..6c6648632399ad 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -22,10 +22,6 @@ figure.wp-block-image:not(.wp-block) { margin-top: -9px; margin-left: -9px; } - - &:not(.is-style-rounded) > div:not(.components-placeholder) { - border-radius: inherit; - } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image. From 1b92e84a466c4727e910c98b3dbc83519ece271e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 4 Nov 2021 16:59:57 +1000 Subject: [PATCH 05/21] Adjust caption styles for images in a gallery --- packages/block-library/src/gallery/style.scss | 7 ++++++- packages/block-library/src/image/edit.js | 7 ++++++- packages/block-library/src/image/save.js | 4 +++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 70b6c5e70d1c68..08e121807ac77b 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -63,7 +63,12 @@ figure.wp-block-gallery.has-nested-images { } } - &.is-style-rounded { + &.has-custom-border img { + box-sizing: border-box; + } + + &.is-style-rounded, + &.has-custom-border { > div, > a { flex: 1 1 auto; diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 3af2bfe7deffa4..7b426be38e6d85 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { get, has, omit, pick } from 'lodash'; +import { get, has, isEmpty, omit, pick } from 'lodash'; /** * WordPress dependencies @@ -17,6 +17,7 @@ import { MediaPlaceholder, useBlockProps, store as blockEditorStore, + __experimentalUseBorderProps as useBorderProps, } from '@wordpress/block-editor'; import { useEffect, useRef, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -296,10 +297,14 @@ export function ImageEdit( { /> ); + const borderProps = useBorderProps( attributes ); + const classes = classnames( className, { 'is-transient': temporaryURL, 'is-resized': !! width || !! height, [ `size-${ sizeSlug }` ]: sizeSlug, + 'has-custom-border': + !! borderProps.className || ! isEmpty( borderProps.style ), } ); const blockProps = useBlockProps( { diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index a9e3bb68c6543f..872ea980d8cf84 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -32,14 +32,16 @@ export default function save( { attributes } ) { } = attributes; const newRel = isEmpty( rel ) ? undefined : rel; + const borderProps = getBorderClassesAndStyles( attributes ); const classes = classnames( { [ `align${ align }` ]: align, [ `size-${ sizeSlug }` ]: sizeSlug, 'is-resized': width || height, + 'has-custom-border': + !! borderProps.className || ! isEmpty( borderProps.style ), } ); - const borderProps = getBorderClassesAndStyles( attributes ); const imageClasses = classnames( borderProps.className, { [ `wp-image-${ id }` ]: !! id, } ); From de4b7020ad81a67f0a3dda6d8ad1e8433614117b Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 14 Dec 2021 18:22:42 +1000 Subject: [PATCH 06/21] Fix typo --- packages/block-library/src/image/image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 8228fbcff9bd2d..af36d32486b385 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -188,7 +188,7 @@ export default function Image( { // Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural // width and height. This resolves an issue in Safari where the loaded natural - // witdth and height is otherwise lost when switching between alignments. + // width and height is otherwise lost when switching between alignments. // See: https://github.com/WordPress/gutenberg/pull/37210. const { naturalWidth, naturalHeight } = useMemo( () => { return { From a738de96171f5dec9f6b18f9aa328fd76ab2ced4 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 14 Dec 2021 18:33:51 +1000 Subject: [PATCH 07/21] Remove unneeded fallback border styles --- packages/block-library/src/image/style.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 134ca2c1104114..65072b0050ff02 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -102,13 +102,3 @@ .wp-block-image figure { margin: 0; } - -// Set baseline border styles with zero specificity to improve visual feedback -// when user alters individual border properties via block support UI. -html :where(.wp-block-image img) { - border: 0 solid currentColor; -} - -html :where(.wp-block-image__crop-area) { - border: 0 solid currentColor; -} From 35143eb6c3c55a1b6fbc38439a6badb6ad2fb976 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 1 Apr 2022 18:23:03 +1000 Subject: [PATCH 08/21] Try improving application of custom border styles --- packages/block-library/src/image/editor.scss | 5 +++++ packages/block-library/src/image/image.js | 6 ++++-- packages/block-library/src/image/style.scss | 6 ++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 6c6648632399ad..b0def9281974eb 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -22,6 +22,11 @@ figure.wp-block-image:not(.wp-block) { margin-top: -9px; margin-left: -9px; } + + // Allow resizable box to accommodate custom borders on the image. + &.has-custom-border .components-resizable-box__container { + height: auto !important; + } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image. diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index af36d32486b385..1275af2eb2248d 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { get, filter, map, pick, includes } from 'lodash'; +import { get, filter, isEmpty, map, pick, includes } from 'lodash'; /** * WordPress dependencies @@ -433,6 +433,8 @@ export default function Image( { const borderProps = useBorderProps( attributes ); const isRounded = attributes.className?.includes( 'is-style-rounded' ); + const hasCustomBorder = + !! borderProps.className || ! isEmpty( borderProps.style ); let img = ( // Disable reason: Image itself is not meant to be interactive, but @@ -538,7 +540,7 @@ export default function Image( { Date: Mon, 4 Apr 2022 18:30:39 +1000 Subject: [PATCH 09/21] Remove unneeded resizablebox style --- packages/block-library/src/image/editor.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index b0def9281974eb..6c6648632399ad 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -22,11 +22,6 @@ figure.wp-block-image:not(.wp-block) { margin-top: -9px; margin-left: -9px; } - - // Allow resizable box to accommodate custom borders on the image. - &.has-custom-border .components-resizable-box__container { - height: auto !important; - } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image. From 678d024b25e378c4512fd8727561ceec7bd80803 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 4 Apr 2022 18:31:00 +1000 Subject: [PATCH 10/21] Tweak application of border-box sizing --- packages/block-library/src/image/style.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index be859d55c8f202..ff4467b89e385c 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -12,6 +12,12 @@ } } + &.has-custom-border { + img { + box-sizing: border-box; + } + } + &.aligncenter { text-align: center; } @@ -97,12 +103,6 @@ border-radius: 0; } } - - &.has-custom-border { - img { - box-sizing: border-box; - } - } } .wp-block-image figure { From ddb227f2052c99c818c3eaa1da68ab0a2cda28a7 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 30 Apr 2021 17:10:14 +1000 Subject: [PATCH 11/21] Add deprecation for moving border radius and new classname New border block support styles and classes need to be on the inner img element. As a result it makes sense to move the border radius style with them. This requires a deprecation which this commit provides along with new fixtures. .has-custom-border is required to handle images in galleries that have borders. This includes border radii which means we need to retroactively add it to existing image blocks that have that set. --- .../block-library/src/image/deprecated.js | 86 +++++++++++++++++++ ...re__image__deprecated-border-radius-5.html | 3 + ...re__image__deprecated-border-radius-5.json | 20 +++++ ...ge__deprecated-border-radius-5.parsed.json | 20 +++++ ...deprecated-border-radius-5.serialized.html | 3 + 5 files changed, 132 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index 338eac670c5320..9f5aaee4f7d21a 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -31,6 +31,12 @@ const blockAttributes = { source: 'html', selector: 'figcaption', }, + title: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'title', + }, href: { type: 'string', source: 'attribute', @@ -58,6 +64,9 @@ const blockAttributes = { height: { type: 'number', }, + sizeSlug: { + type: 'string', + }, linkDestination: { type: 'string', }, @@ -85,6 +94,83 @@ const blockSupports = { }; const deprecated = [ + // The following deprecation moves existing border radius styles onto the + // inner img element where new border block support styles must be applied. + // It will also add a new `.has-custom-border` class for existing blocks + // with border radii set. This class is required to improve caption position + // and styling when an image within a gallery has a custom border or + // rounded corners. + // + // See: https://github.com/WordPress/gutenberg/pull/31366/ + { + attributes: blockAttributes, + supports: blockSupports, + save( { attributes } ) { + const { + url, + alt, + caption, + align, + href, + rel, + linkClass, + width, + height, + id, + linkTarget, + sizeSlug, + title, + } = attributes; + + const newRel = isEmpty( rel ) ? undefined : rel; + + const classes = classnames( { + [ `align${ align }` ]: align, + [ `size-${ sizeSlug }` ]: sizeSlug, + 'is-resized': width || height, + } ); + + const image = ( + { + ); + + const figure = ( + <> + { href ? ( + + { image } + + ) : ( + image + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } + + ); + + return ( +
+ { figure } +
+ ); + }, + }, { attributes: { ...blockAttributes, diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html new file mode 100644 index 00000000000000..f9ca0510e1af36 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html @@ -0,0 +1,3 @@ + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json new file mode 100644 index 00000000000000..093398e1d54b76 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json @@ -0,0 +1,20 @@ +[ + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", + "alt": "", + "caption": "", + "id": 246, + "sizeSlug": "large", + "linkDestination": "none", + "style": { + "border": { + "radius": "50px" + } + } + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json new file mode 100644 index 00000000000000..4122c71e044696 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json @@ -0,0 +1,20 @@ +[ + { + "blockName": "core/image", + "attrs": { + "id": 246, + "sizeSlug": "large", + "linkDestination": "none", + "style": { + "border": { + "radius": "50px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\"\"
\n", + "innerContent": [ + "\n
\"\"
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html new file mode 100644 index 00000000000000..c91edbc3363f37 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html @@ -0,0 +1,3 @@ + +
+ From c888bf58d5c26132290ed8fa32d6002dcbd484aa Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 4 May 2022 18:17:08 +1000 Subject: [PATCH 12/21] Remove border radius from align wrapper deprecation fixture --- .../blocks/core__image__deprecated-align-wrapper.html | 4 ++-- .../blocks/core__image__deprecated-align-wrapper.json | 7 +------ .../core__image__deprecated-align-wrapper.parsed.json | 11 +++-------- ...e__image__deprecated-align-wrapper.serialized.html | 4 ++-- 4 files changed, 8 insertions(+), 18 deletions(-) diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html index 68626f719fbcdb..8cddf1e7d7c04b 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html @@ -1,3 +1,3 @@ - -
+ +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json index c613b3716e8f0b..ae3bd53950a35b 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json @@ -10,13 +10,8 @@ "id": 13, "width": 358, "height": 164, - "linkDestination": "none", "sizeSlug": "large", - "style": { - "border": { - "radius": "10px" - } - } + "linkDestination": "none" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json index 82c2a2ac866b19..249f11175df421 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json @@ -7,17 +7,12 @@ "width": 358, "height": 164, "sizeSlug": "large", - "linkDestination": "none", - "style": { - "border": { - "radius": "10px" - } - } + "linkDestination": "none" }, "innerBlocks": [], - "innerHTML": "\n
\"\"
\n", + "innerHTML": "\n
\"\"
\n", "innerContent": [ - "\n
\"\"
\n" + "\n
\"\"
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html index 5037f335ad989e..5ba1eb754e83f6 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html @@ -1,3 +1,3 @@ - -
+ +
From 105edd221e5ff9862ac16d311f2a430640879455 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 24 May 2022 14:36:08 +1000 Subject: [PATCH 13/21] Limit the damage done by theme.json and global styles borders --- packages/block-library/src/gallery/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 08e121807ac77b..3f5a462e3206c0 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -22,6 +22,10 @@ figure.wp-block-gallery.has-nested-images { position: relative; flex-direction: column; max-width: 100%; + // Prevents theme.json and global styles borders that apply to the outer + // wrapper from incorrectly enlarging gallery images to a point they + // result in a single column gallery. + box-sizing: border-box; > div, > a { From bf70f6063c208b8e672b421920c53abc701259ab Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 25 May 2022 15:28:56 +1000 Subject: [PATCH 14/21] Add img to Elements API and leverage for image block --- packages/block-library/src/image/editor.scss | 8 ++++++++ packages/block-library/src/image/style.scss | 1 + 2 files changed, 9 insertions(+) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 6c6648632399ad..28808b9b63bd7e 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -91,6 +91,14 @@ figure.wp-block-image:not(.wp-block) { max-width: 100%; width: 100%; overflow: hidden; + box-sizing: border-box; + + // Strip image of border styles while within the cropper. + // We don't yet have access to merged global styles in the block editor + // to reapply them to the image cropper. + .reactEasyCrop_Container > .reactEasyCrop_Image { + border: none; + } } .wp-block-image__crop-icon { diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index ff4467b89e385c..65dd111fc4dfe4 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -3,6 +3,7 @@ height: auto; max-width: 100%; vertical-align: bottom; + box-sizing: border-box; } &:not(.is-style-rounded) { From 6195058c55ebb3678816e4dff095dd8b5c06b127 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 6 Jun 2022 17:35:16 +1000 Subject: [PATCH 15/21] Add img element to api constants --- packages/blocks/src/api/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index fb8580ef30ef0a..59a37c9e7dd177 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -210,6 +210,7 @@ export const __EXPERIMENTAL_ELEMENTS = { h5: 'h5', h6: 'h6', button: '.wp-element-button, .wp-block-button__link', + img: '.wp-block-image__crop-area, img', }; export const __EXPERIMENTAL_PATHS_WITH_MERGE = { From c14511274aa76dc289f831c2ce02c5058a756a93 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 6 Jun 2022 17:41:40 +1000 Subject: [PATCH 16/21] Disable border UI in Global Styles when skipping serialization of support --- .../components/global-styles/border-panel.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js index 71fe69769719ea..03f7d24ed978ca 100644 --- a/packages/edit-site/src/components/global-styles/border-panel.js +++ b/packages/edit-site/src/components/global-styles/border-panel.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor'; +import { getBlockType } from '@wordpress/blocks'; import { __experimentalBorderBoxControl as BorderBoxControl, __experimentalHasSplitBorders as hasSplitBorders, @@ -23,6 +24,11 @@ import { } from './hooks'; export function useHasBorderPanel( name ) { + // When block's skip serialization of borders it generally means they are + // being applied to inner elements of which there isn't a means within + // Global Styles to target. To avoid the appearance of styles being + // misapplied we disable the border panel UI in the Global Styles sidebar. + const disableUI = shouldSkipBorderSerialization( name ); const controls = [ useHasBorderColorControl( name ), useHasBorderRadiusControl( name ), @@ -30,7 +36,7 @@ export function useHasBorderPanel( name ) { useHasBorderWidthControl( name ), ]; - return controls.some( Boolean ); + return ! disableUI && controls.some( Boolean ); } function useHasBorderColorControl( name ) { @@ -65,6 +71,17 @@ function useHasBorderWidthControl( name ) { ); } +function shouldSkipBorderSerialization( name ) { + const blockType = getBlockType( name ); + + if ( ! blockType ) { + return true; + } + + return blockType?.supports?.__experimentalBorder + ?.__experimentalSkipSerialization; +} + function applyFallbackStyle( border ) { if ( ! border ) { return border; From ba1daad508ad5c3ba47494c8bcada7c9b2ec5d41 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 7 Jun 2022 17:06:36 +1000 Subject: [PATCH 17/21] Revert "Disable border UI in Global Styles when skipping serialization of support" This reverts commit 22af3f553958ac8b0dd2013c3c40e617bcd340c2. --- .../components/global-styles/border-panel.js | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js index 03f7d24ed978ca..71fe69769719ea 100644 --- a/packages/edit-site/src/components/global-styles/border-panel.js +++ b/packages/edit-site/src/components/global-styles/border-panel.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor'; -import { getBlockType } from '@wordpress/blocks'; import { __experimentalBorderBoxControl as BorderBoxControl, __experimentalHasSplitBorders as hasSplitBorders, @@ -24,11 +23,6 @@ import { } from './hooks'; export function useHasBorderPanel( name ) { - // When block's skip serialization of borders it generally means they are - // being applied to inner elements of which there isn't a means within - // Global Styles to target. To avoid the appearance of styles being - // misapplied we disable the border panel UI in the Global Styles sidebar. - const disableUI = shouldSkipBorderSerialization( name ); const controls = [ useHasBorderColorControl( name ), useHasBorderRadiusControl( name ), @@ -36,7 +30,7 @@ export function useHasBorderPanel( name ) { useHasBorderWidthControl( name ), ]; - return ! disableUI && controls.some( Boolean ); + return controls.some( Boolean ); } function useHasBorderColorControl( name ) { @@ -71,17 +65,6 @@ function useHasBorderWidthControl( name ) { ); } -function shouldSkipBorderSerialization( name ) { - const blockType = getBlockType( name ); - - if ( ! blockType ) { - return true; - } - - return blockType?.supports?.__experimentalBorder - ?.__experimentalSkipSerialization; -} - function applyFallbackStyle( border ) { if ( ! border ) { return border; From 386c47992db0c3afdd2e3b0a426ef4b7413dfc31 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 7 Jun 2022 17:14:18 +1000 Subject: [PATCH 18/21] Revert "Add img to Elements API and leverage for image block" This reverts commit fa0b753979bbe2bd88ab1cacb3951afc9a2e7202. --- packages/block-library/src/image/editor.scss | 8 -------- packages/block-library/src/image/style.scss | 1 - 2 files changed, 9 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 28808b9b63bd7e..6c6648632399ad 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -91,14 +91,6 @@ figure.wp-block-image:not(.wp-block) { max-width: 100%; width: 100%; overflow: hidden; - box-sizing: border-box; - - // Strip image of border styles while within the cropper. - // We don't yet have access to merged global styles in the block editor - // to reapply them to the image cropper. - .reactEasyCrop_Container > .reactEasyCrop_Image { - border: none; - } } .wp-block-image__crop-icon { diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 65dd111fc4dfe4..ff4467b89e385c 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -3,7 +3,6 @@ height: auto; max-width: 100%; vertical-align: bottom; - box-sizing: border-box; } &:not(.is-style-rounded) { From 1b0d8c020114be70a860c6e2cae36d721bdfb244 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 28 Jun 2022 22:00:10 +1000 Subject: [PATCH 19/21] Update image block to leverage feature level selectors for border styles --- packages/block-library/src/image/block.json | 1 + packages/block-library/src/image/editor.scss | 8 ++++++++ packages/block-library/src/image/style.scss | 8 +------- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 4ab6d3a6ebbb41..ba19aaa9d954d7 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -87,6 +87,7 @@ "color": true, "radius": true, "width": true, + "__experimentalSelector": "img, .wp-block-image__crop-area", "__experimentalSkipSerialization": true, "__experimentalDefaultControls": { "color": true, diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 6c6648632399ad..52a8e47198d362 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -91,6 +91,14 @@ figure.wp-block-image:not(.wp-block) { max-width: 100%; width: 100%; overflow: hidden; + + // This removes the border from the img within the image cropper so it + // can be applied to the cropper itself. This then allows the image to be + // cropped within the visual border providing more accurate editing and + // smoother UX. + .reactEasyCrop_Container .reactEasyCrop_Image { + border: none; + } } .wp-block-image__crop-icon { diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index ff4467b89e385c..e86aa7deef0480 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -3,13 +3,7 @@ height: auto; max-width: 100%; vertical-align: bottom; - } - - &:not(.is-style-rounded) { - > a, - img { - border-radius: inherit; - } + box-sizing: border-box; } &.has-custom-border { From c189f988891800062f73385f98ca8d916fe39f65 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 1 Jul 2022 18:42:52 +1000 Subject: [PATCH 20/21] Fix rebase issue after revert of img element --- packages/blocks/src/api/constants.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 59a37c9e7dd177..fb8580ef30ef0a 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -210,7 +210,6 @@ export const __EXPERIMENTAL_ELEMENTS = { h5: 'h5', h6: 'h6', button: '.wp-element-button, .wp-block-button__link', - img: '.wp-block-image__crop-area, img', }; export const __EXPERIMENTAL_PATHS_WITH_MERGE = { From 24f4d0ef934533ae3538efdd1c457d26c66e5100 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 5 Jul 2022 17:56:56 +1000 Subject: [PATCH 21/21] Override clearing of img borders in wp-admin by core --- packages/block-library/src/image/style.scss | 36 +++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index e86aa7deef0480..72ff28b93b67c2 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -97,6 +97,42 @@ border-radius: 0; } } + + // The following is required to overcome WP Core applying styles that clear + // img borders with a higher specificity than those added by the border + // block support to provide a default border-style of solid when a border + // color or width has been set. + :where(.has-border-color) { + border-style: solid; + } + :where([style*="border-top-color"]) { + border-top-style: solid; + } + :where([style*="border-right-color"]) { + border-right-style: solid; + } + :where([style*="border-bottom-color"]) { + border-bottom-style: solid; + } + :where([style*="border-left-color"]) { + border-left-style: solid; + } + + :where([style*="border-width"]) { + border-style: solid; + } + :where([style*="border-top-width"]) { + border-top-style: solid; + } + :where([style*="border-right-width"]) { + border-right-style: solid; + } + :where([style*="border-bottom-width"]) { + border-bottom-style: solid; + } + :where([style*="border-left-width"]) { + border-left-style: solid; + } } .wp-block-image figure {