From 2898e4854bcf78fdb8c6fe7741a025269234cad2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 8 Jun 2022 17:57:09 +0100 Subject: [PATCH] Placeholder: Add an illustration option to the Placeholder component --- .../block-library/src/cover/edit/index.js | 22 +++------- packages/block-library/src/cover/editor.scss | 13 ------ .../src/post-featured-image/edit.js | 44 ++++++------------- .../src/post-featured-image/editor.scss | 29 ------------ packages/block-library/src/site-logo/edit.js | 15 +------ .../block-library/src/site-logo/editor.scss | 14 ------ packages/components/src/placeholder/README.md | 13 +++--- packages/components/src/placeholder/index.js | 37 +++++++++++----- .../components/src/placeholder/style.scss | 23 ++++++++++ 9 files changed, 77 insertions(+), 133 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 4a381daf3de16..ef53e6f6a1582 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -10,7 +10,7 @@ import namesPlugin from 'colord/plugins/names'; */ import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { useEffect, useRef } from '@wordpress/element'; -import { Spinner } from '@wordpress/components'; +import { Placeholder, Spinner } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withColors, @@ -24,7 +24,6 @@ import { import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { isBlobURL } from '@wordpress/blob'; -import { SVG, Path } from '@wordpress/primitives'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -47,18 +46,6 @@ import ResizableCover from './resizable-cover'; extend( [ namesPlugin ] ); -const placeholderIllustration = ( - - - -); - function getInnerBlocksTemplate( attributes ) { return [ [ @@ -360,9 +347,10 @@ function CoverEdit( { ) } { ! url && useFeaturedImage && ( -
- { placeholderIllustration } -
+ ) } { url && diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 075b3dd1488af..cd421ddb66848 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -69,19 +69,6 @@ right: 0; bottom: 0; left: 0; - - // Style the placeholder illustration. - .components-placeholder__illustration { - position: absolute; - left: 0; - width: 100%; - height: 100%; - stroke: currentColor; - stroke-dasharray: 3; - opacity: 0.4; - } - - border: $border-width dashed currentColor; } } diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index a133b8846a4ee..2e767c57b6a89 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -20,7 +20,6 @@ import { } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { upload } from '@wordpress/icons'; -import { SVG, Path } from '@wordpress/primitives'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -28,24 +27,18 @@ import { store as noticesStore } from '@wordpress/notices'; */ import DimensionControls from './dimension-controls'; -const placeholderIllustration = ( - - - -); - const ALLOWED_MEDIA_TYPES = [ 'image' ]; -const placeholderChip = ( -
- { placeholderIllustration } -
-); + +const placeholder = ( content ) => { + return ( + + { content } + + ); +}; function getMediaSourceUrlBySizeSlug( media, slug ) { return ( @@ -101,15 +94,6 @@ function PostFeaturedImageDisplay( { style: { width, height }, } ); - const placeholder = ( content ) => { - return ( - - { placeholderIllustration } - { content } - - ); - }; - const onSelectImage = ( value ) => { if ( value?.id ) { setFeaturedImage( value.id ); @@ -153,7 +137,7 @@ function PostFeaturedImageDisplay( { return ( <> { controls } -
{ placeholderChip }
+
{ placeholder() }
); } @@ -187,7 +171,7 @@ function PostFeaturedImageDisplay( { } else { // We have a Featured image so show a Placeholder if is loading. image = ! media ? ( - placeholderChip + placeholder() ) : ( { placeholderChip }; + return
{ placeholder() }
; } return ; } diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss index 31a77623c335c..07ed82bf8d64c 100644 --- a/packages/block-library/src/post-featured-image/editor.scss +++ b/packages/block-library/src/post-featured-image/editor.scss @@ -39,21 +39,6 @@ // against any background color. color: currentColor; background: transparent; - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: $border-width dashed currentColor; - opacity: 0.4; - pointer-events: none; - - // Inherit border radius from style variations. - border-radius: inherit; - } // Style the upload button. .components-placeholder__fieldset { @@ -82,20 +67,6 @@ color: $white; } - // Style the placeholder illustration. - .components-placeholder__illustration { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - stroke: currentColor; - stroke-dasharray: 3; - opacity: 0.4; - } - // Show default placeholder height when not resized. min-height: 200px; } diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index a08e3520af4b3..176feed44e126 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -40,7 +40,6 @@ import { import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { crop, upload } from '@wordpress/icons'; -import { SVG, Path } from '@wordpress/primitives'; import { store as noticesStore } from '@wordpress/notices'; /** @@ -520,20 +519,8 @@ export default function LogoEdit( { - { - - - - } { content } ); diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index ca27e1093b7b1..a6f38428864d4 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -131,20 +131,6 @@ .components-button.components-button > svg { color: $white; } - - // Style the placeholder illustration. - .components-placeholder__illustration { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - stroke: currentColor; - stroke-dasharray: 3; - opacity: 0.4; - } } // Show upload button on block selection. diff --git a/packages/components/src/placeholder/README.md b/packages/components/src/placeholder/README.md index 759883cf35835..85224ca9d2352 100644 --- a/packages/components/src/placeholder/README.md +++ b/packages/components/src/placeholder/README.md @@ -11,9 +11,10 @@ const MyPlaceholder = () => ; ### Props -| Name | Type | Default | Description | -| ---------------- | ------------------- | ----------- | ----------------------------------------------------------------- | -| `icon` | `string, WPElement` | `undefined` | If provided, renders an icon next to the label. | -| `label` | `string` | `undefined` | Renders a label for the placeholder. | -| `instructions` | `string` | `undefined` | Renders instruction text below label. | -| `isColumnLayout` | `bool` | `false` | Changes placeholder children layout from flex-row to flex-column. | +| Name | Type | Default | Description | +| ---------------- | ------------------- | ----------- | ----------------------------------------------------------------- | +| `icon` | `string, WPElement` | `undefined` | If provided, renders an icon next to the label. | +| `label` | `string` | `undefined` | Renders a label for the placeholder. | +| `instructions` | `string` | `undefined` | Renders instruction text below label. | +| `isColumnLayout` | `bool` | `false` | Changes placeholder children layout from flex-row to flex-column. | +| `withIllustration`| `bool` | `false` | Outputs a placeholder illustration. | diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js index a5a88757249ab..a4555135f331a 100644 --- a/packages/components/src/placeholder/index.js +++ b/packages/components/src/placeholder/index.js @@ -7,24 +7,38 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useResizeObserver } from '@wordpress/compose'; +import { SVG, Path } from '@wordpress/primitives'; /** * Internal dependencies */ import Icon from '../icon'; +const PlaceholderIllustration = ( + + + +); + /** * Renders a placeholder. Normally used by blocks to render their empty state. * - * @param {Object} props The component props. - * @param {WPIcon} props.icon An icon rendered before the label. - * @param {WPElement} props.children Children to be rendered. - * @param {string} props.label Title of the placeholder. - * @param {string} props.instructions Instructions of the placeholder. - * @param {string} props.className Class to set on the container div. - * @param {Object} props.notices A rendered notices list. - * @param {Object} props.preview Preview to be rendered in the placeholder. - * @param {boolean} props.isColumnLayout Whether a column layout should be used. + * @param {Object} props The component props. + * @param {WPIcon} props.icon An icon rendered before the label. + * @param {WPElement} props.children Children to be rendered. + * @param {string} props.label Title of the placeholder. + * @param {string} props.instructions Instructions of the placeholder. + * @param {string} props.className Class to set on the container div. + * @param {Object} props.notices A rendered notices list. + * @param {Object} props.preview Preview to be rendered in the placeholder. + * @param {boolean} props.isColumnLayout Whether a column layout should be used. + * @param {boolean} props.withIllustration Whether to add an illustration to the placeholder. * * @return {Object} The rendered placeholder. */ @@ -37,6 +51,7 @@ function Placeholder( { notices, preview, isColumnLayout, + withIllustration, ...additionalProps } ) { const [ resizeListener, { width } ] = useResizeObserver(); @@ -55,13 +70,15 @@ function Placeholder( { const classes = classnames( 'components-placeholder', className, - modifierClassNames + modifierClassNames, + withIllustration ? 'has-illustration' : null ); const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout, } ); return (
+ { withIllustration ? PlaceholderIllustration : null } { resizeListener } { notices } { preview && ( diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 4941d20ad40ed..d74fd7cdde9bb 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -30,6 +30,13 @@ .components-base-control__label { font-size: $default-font-size; } + + &.has-illustration { + background: none; + border: none; + box-shadow: none; + min-width: 100px; + } } .components-placeholder__error, @@ -171,3 +178,19 @@ } } } + +// Style the placeholder illustration. +.components-placeholder__illustration { + border: $border-width dashed currentColor; + box-sizing: border-box; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + stroke: currentColor; + stroke-dasharray: 3; + opacity: 0.4; +}