From 8f3b898acdec9002dc0d23fa55fe6b953e750a50 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 11 Aug 2022 12:27:28 +0200 Subject: [PATCH 1/4] Image: Try different resting state for placeholder, alternate version --- packages/block-library/src/image/edit.js | 14 ++++- packages/block-library/src/image/editor.scss | 62 +++++++++++++++++++- 2 files changed, 72 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 7b426be38e6d8..0edffc278f36f 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -8,7 +8,7 @@ import { get, has, isEmpty, omit, pick } from 'lodash'; * WordPress dependencies */ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; -import { withNotices } from '@wordpress/components'; +import { withNotices, Placeholder } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { BlockAlignmentControl, @@ -28,6 +28,17 @@ import { image as icon } from '@wordpress/icons'; */ import Image from './image'; +const placeholder = ( content ) => { + return ( + + { content } + + ); +}; + /** * Module constants */ @@ -344,6 +355,7 @@ export function ImageEdit( { onSelectURL={ onSelectURL } notices={ noticeUI } onError={ onUploadError } + placeholder={ placeholder } accept="image/*" allowedTypes={ ALLOWED_MEDIA_TYPES } value={ { id, src } } diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 52a8e47198d36..6e5a260aa9390 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -1,3 +1,60 @@ +// Give the featured image placeholder the appearance of a literal image placeholder. +// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity +// to create a new component for placeholders meant to inherit some theme styles. +.wp-block-image.wp-block-image { + // Inherit border radius from style variations. + // @todo: this doesn't work yet, it needs for the radius and border to be applied also in the setup state. + // https://github.com/WordPress/gutenberg/pull/42847 + border-radius: $radius-block-ui; + + .components-placeholder, + .components-resizable-box__container { + border-radius: inherit; + } + + // Style the placeholder. + .wp-block-post-featured-image__placeholder, + .components-placeholder { + // Fade out the diagonal placeholder onselect. + svg { + opacity: 0; + transition: opacity 0.1s linear; + @include reduce-motion("transition"); + } + + .components-button.components-button { + opacity: 1; + transition: opacity 0.1s linear; + @include reduce-motion("transition"); + } + + // Show default placeholder height when not resized. + min-height: 200px; + } + + // Show controls on select. + &:not(.is-selected) { + + .wp-block-post-featured-image__placeholder, + .components-placeholder { + color: currentColor; + background: transparent; + border: none; + box-shadow: none; + } + + svg { + opacity: 0.4; + } + + .components-button.components-button { + opacity: 0; + visibility: hidden; + } + } +} + + figure.wp-block-image:not(.wp-block) { margin: 0; } @@ -14,13 +71,12 @@ figure.wp-block-image:not(.wp-block) { display: inline; } - // Shown while image is being uploaded + // Shown while image is being uploaded. .components-spinner { position: absolute; top: 50%; left: 50%; - margin-top: -9px; - margin-left: -9px; + transform: translate(-50%, -50%); } } From 0fc7715d555634ddc729e2694b6dfd83619e33cc Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 15 Aug 2022 15:53:28 +0200 Subject: [PATCH 2/4] Polish after rebase. --- packages/block-library/src/image/editor.scss | 59 ++++---------------- 1 file changed, 12 insertions(+), 47 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 6e5a260aa9390..3d4421b98e799 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -1,53 +1,18 @@ -// Give the featured image placeholder the appearance of a literal image placeholder. -// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity -// to create a new component for placeholders meant to inherit some theme styles. +// Provide special styling for the placeholder. +// @todo: this particular minimal style of placeholder could be componentized further. .wp-block-image.wp-block-image { - // Inherit border radius from style variations. - // @todo: this doesn't work yet, it needs for the radius and border to be applied also in the setup state. - // https://github.com/WordPress/gutenberg/pull/42847 - border-radius: $radius-block-ui; - - .components-placeholder, - .components-resizable-box__container { - border-radius: inherit; - } - - // Style the placeholder. - .wp-block-post-featured-image__placeholder, - .components-placeholder { - // Fade out the diagonal placeholder onselect. - svg { - opacity: 0; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); - } - - .components-button.components-button { - opacity: 1; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); - } - - // Show default placeholder height when not resized. - min-height: 200px; - } - - // Show controls on select. - &:not(.is-selected) { - - .wp-block-post-featured-image__placeholder, - .components-placeholder { - color: currentColor; - background: transparent; - border: none; - box-shadow: none; - } + // Show legacy Placeholder style on-select. + &.is-selected .components-placeholder { + // Block UI appearance. + color: $gray-900; + background-color: $white; + box-shadow: inset 0 0 0 $border-width $gray-900; + border: none; - svg { - opacity: 0.4; - } + // @todo: this should eventually be overridden by a custom border-radius set in the inspector. + border-radius: $radius-block-ui; - .components-button.components-button { + > svg { opacity: 0; visibility: hidden; } From 306d178ed4001bc595c33d16d8b57d8f5304ec31 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 15 Aug 2022 16:31:00 +0200 Subject: [PATCH 3/4] Try: Minimal styling. --- packages/block-library/src/image/editor.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 3d4421b98e799..a29c8414cb49e 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -1,17 +1,27 @@ // Provide special styling for the placeholder. // @todo: this particular minimal style of placeholder could be componentized further. .wp-block-image.wp-block-image { - // Show legacy Placeholder style on-select. + // Show custom Placeholder style on-select. &.is-selected .components-placeholder { // Block UI appearance. color: $gray-900; background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; border: none; + justify-content: center; + align-items: center; // @todo: this should eventually be overridden by a custom border-radius set in the inspector. border-radius: $radius-block-ui; + .components-placeholder__fieldset { + gap: $grid-unit-15; + } + + .components-button { + margin: 0; + } + > svg { opacity: 0; visibility: hidden; From 814fa5f29694044aa03633296599393d01e3c736 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 17 Aug 2022 14:47:14 +0200 Subject: [PATCH 4/4] Add back the legacy placeholder. --- packages/block-library/src/image/edit.js | 6 +++++ packages/block-library/src/image/editor.scss | 22 +++++++++---------- .../components/src/placeholder/style.scss | 10 +++++++-- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 0edffc278f36f..7e45b27e546c6 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -28,11 +28,17 @@ import { image as icon } from '@wordpress/icons'; */ import Image from './image'; +// Much of this description is duplicated from MediaPlaceholder. const placeholder = ( content ) => { return ( { content } diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index a29c8414cb49e..78afbc543231e 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -1,32 +1,30 @@ // Provide special styling for the placeholder. // @todo: this particular minimal style of placeholder could be componentized further. .wp-block-image.wp-block-image { - // Show custom Placeholder style on-select. + // Show Placeholder style on-select. &.is-selected .components-placeholder { // Block UI appearance. color: $gray-900; background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; border: none; - justify-content: center; - align-items: center; // @todo: this should eventually be overridden by a custom border-radius set in the inspector. border-radius: $radius-block-ui; - .components-placeholder__fieldset { - gap: $grid-unit-15; - } - - .components-button { - margin: 0; - } - > svg { opacity: 0; - visibility: hidden; } } + + // Remove the transition while we still have a legacy placeholder style. + // Otherwise the content jumps between the 1px placeholder border, and any inherited custom + // parent border that may get applied when you deselect. + .components-placeholder__label, + .components-placeholder__instructions, + .components-button { + transition: none; + } } diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index d742354ded43f..7c67c2b1be022 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -185,14 +185,20 @@ // Show placeholder buttons on block selection. // Note that these can't be display: none; or visibility: hidden;, as that breaks the writing flow. + .components-placeholder__label, + .components-placeholder__instructions, .components-button { opacity: 0; transition: opacity 0.1s linear; @include reduce-motion("transition"); } - .is-selected > & .components-button { - opacity: 1; + .is-selected > & { + .components-placeholder__label, + .components-placeholder__instructions, + .components-button { + opacity: 1; + } } // By painting the borders here, we enable them to be replaced by the Border control.