From f41e9dfd1363aa9284024bb7f763dc8667d6a42a Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 7 Oct 2020 18:58:56 -0700 Subject: [PATCH 01/12] Do not hide the icons if the URL is not set This prevents the icons disappearing when losing focus and the URL is not set. This causes is a little unexpected and is not how other placeholders behave, for example the image placeholder still shows without an image set and the block not selected. --- .../block-library/src/social-links/editor.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index f5544459d2cc1f..1f01da2bf06fc0 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -47,22 +47,6 @@ min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse. } -// Disappear but show on hover or nav mode focus. -[data-type="core/social-links"] .wp-social-link__is-incomplete { - transition: transform 0.1s ease; - transform-origin: center center; -} - -[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) { - .wp-social-link__is-incomplete { - opacity: 0; - transform: scale(0); - width: 0; - padding: 0; - margin-right: 0; - } -} - // Unconfigured placeholder links are semitransparent. .wp-social-link.wp-social-link__is-incomplete { opacity: 0.5; From 71ff7b64c22d303624b523b45ac290d997c1927e Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 7 Oct 2020 19:40:12 -0700 Subject: [PATCH 02/12] Adds placeholder prop to show if no blocks in list The placeholder prop can hold a component that will show in front of the appender if specified and there are no blocks in the block list. Added to help Social Links render a better placeholder experience. --- packages/block-editor/src/components/block-list/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index f1fba4a7bc4752..ca4b6395a97958 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -30,7 +30,7 @@ const appenderNodesMap = new Map(); */ const BLOCK_ANIMATION_THRESHOLD = 200; -function BlockList( { className, rootClientId, renderAppender }, ref ) { +function BlockList( { className, placeholder rootClientId, renderAppender }, ref ) { const Container = rootClientId ? 'div' : RootContainer; const fallbackRef = useRef(); const wrapperRef = ref || fallbackRef; @@ -45,6 +45,7 @@ function BlockList( { className, rootClientId, renderAppender }, ref ) { ) } > ); } ) } + { blockClientIds.length < 1 && placeholder } Date: Wed, 7 Oct 2020 19:42:11 -0700 Subject: [PATCH 03/12] Add placeholder prop to pass forward to BlockList The placeholder prop accepts a component to render if there are no blocks. The component is shown inline with the appender. This was added to support a better experience for Social Links placeholder. --- packages/block-editor/src/components/inner-blocks/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 48bb8274636aad..44edce33d2a22e 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -48,6 +48,7 @@ function UncontrolledInnerBlocks( props ) { __experimentalAppenderTagName, renderAppender, orientation, + placeholder, } = props; useNestedSettingsUpdate( @@ -88,6 +89,8 @@ function UncontrolledInnerBlocks( props ) { renderAppender={ renderAppender } __experimentalAppenderTagName={ __experimentalAppenderTagName } wrapperRef={ wrapperRef } + className={ classes } + placeholder={ placeholder } /> ); From 536c0c1062a3e93082e5a81788855dc79ae2cae7 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 7 Oct 2020 19:44:25 -0700 Subject: [PATCH 04/12] Add placeholder components when no links specified Improve the default experience for social links when no links are specified. This uses the new placeholder prop in InnerBlocks and BlockList. --- .../block-library/src/social-links/edit.js | 23 ++++++++----------- .../src/social-links/editor.scss | 7 ++++++ 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 44be658e7fbd11..73ae8df13f61f4 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -14,30 +14,25 @@ import { __ } from '@wordpress/i18n'; const ALLOWED_BLOCKS = [ 'core/social-link' ]; -// Template contains the links that show when start. -const TEMPLATE = [ - [ - 'core/social-link', - { service: 'wordpress', url: 'https://wordpress.org' }, - ], - [ 'core/social-link', { service: 'facebook' } ], - [ 'core/social-link', { service: 'twitter' } ], - [ 'core/social-link', { service: 'instagram' } ], - [ 'core/social-link', { service: 'linkedin' } ], - [ 'core/social-link', { service: 'youtube' } ], -]; - export function SocialLinksEdit( props ) { const { attributes: { openInNewTab }, setAttributes, } = props; + + const SocialPlaceholder = ( +
+ Use [+] to add icons. +
+ ); + const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, + orientation: 'horizontal', + placeholder={ SocialPlaceholder } templateLock: false, template: TEMPLATE, - orientation: 'horizontal', __experimentalAppenderTagName: 'li', } ); return ( diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 1f01da2bf06fc0..ba226ee92365db 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -22,6 +22,13 @@ .editor-styles-wrapper .wp-block-social-links { padding: 0; } +.wp-block-social-links__social-placeholder { + background-color: #aaa; + border-radius: 8px; + margin: 8px; + padding: 4px; + font-size: 13px; +} // Polish the Appender. .wp-block-social-links .block-list-appender { From 9312add4e2cb2bc5649fe69fdad3369702219a26 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 9 Oct 2020 08:36:29 -0700 Subject: [PATCH 05/12] Fix issues with rebase/refactor --- packages/block-editor/src/components/block-list/index.js | 3 ++- packages/block-editor/src/components/inner-blocks/index.js | 1 - packages/block-library/src/social-links/edit.js | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index ca4b6395a97958..04e7934793b1ca 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -30,7 +30,7 @@ const appenderNodesMap = new Map(); */ const BLOCK_ANIMATION_THRESHOLD = 200; -function BlockList( { className, placeholder rootClientId, renderAppender }, ref ) { +function BlockList( { className, placeholder, rootClientId, renderAppender }, ref ) { const Container = rootClientId ? 'div' : RootContainer; const fallbackRef = useRef(); const wrapperRef = ref || fallbackRef; @@ -56,6 +56,7 @@ function BlockList( { className, placeholder rootClientId, renderAppender }, ref } function Items( { + placeholder, rootClientId, renderAppender, __experimentalAppenderTagName, diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 44edce33d2a22e..18a38801eb7406 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -89,7 +89,6 @@ function UncontrolledInnerBlocks( props ) { renderAppender={ renderAppender } __experimentalAppenderTagName={ __experimentalAppenderTagName } wrapperRef={ wrapperRef } - className={ classes } placeholder={ placeholder } /> diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 73ae8df13f61f4..c60b4eb15a3589 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -30,9 +30,8 @@ export function SocialLinksEdit( props ) { const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, orientation: 'horizontal', - placeholder={ SocialPlaceholder } + placeholder: SocialPlaceholder, templateLock: false, - template: TEMPLATE, __experimentalAppenderTagName: 'li', } ); return ( From 17fc942e8696dfdf247356e1e2a7d706a47012d3 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 9 Oct 2020 09:15:27 -0700 Subject: [PATCH 06/12] Prettier formatting autofix --- packages/block-editor/src/components/block-list/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 04e7934793b1ca..002bbcc1e32588 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -30,7 +30,10 @@ const appenderNodesMap = new Map(); */ const BLOCK_ANIMATION_THRESHOLD = 200; -function BlockList( { className, placeholder, rootClientId, renderAppender }, ref ) { +function BlockList( + { className, placeholder, rootClientId, renderAppender }, + ref +) { const Container = rootClientId ? 'div' : RootContainer; const fallbackRef = useRef(); const wrapperRef = ref || fallbackRef; From d44ad00f52c7363a138247feeb33152cbe7ab07b Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 14 Oct 2020 08:37:45 -0700 Subject: [PATCH 07/12] Used blurred faux-icons for placeholder --- .../block-library/src/social-links/edit.js | 4 ++- .../src/social-links/editor.scss | 27 +++++++++++++++---- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index c60b4eb15a3589..864ec6d1786820 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -22,7 +22,9 @@ export function SocialLinksEdit( props ) { const SocialPlaceholder = (
- Use [+] to add icons. +
+
+
); diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index ba226ee92365db..1dd867b72ed4b3 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -22,12 +22,29 @@ .editor-styles-wrapper .wp-block-social-links { padding: 0; } -.wp-block-social-links__social-placeholder { - background-color: #aaa; - border-radius: 8px; - margin: 8px; +.wp-block-social-links__social-placeholder div { + display: inline-block; + margin: 0 8px; padding: 4px; - font-size: 13px; + width: 24px; + height: 24px; + border-radius: 12px; +} + +.wp-block-social-links__social-placeholder__blue { + background-color: #3499cd; + box-shadow: 0 0 8px 8px #3499cd; +} + + +.wp-block-social-links__social-placeholder__pink { + background-color: #f00075; + box-shadow: 0 0 8px 8px #f00075; +} + +.wp-block-social-links__social-placeholder__orange { + background-color: #f90; + box-shadow: 0 0 8px 8px #f90; } // Polish the Appender. From 4b6a7708deab88f798ac6d96ec1a918c4a5c1953 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 14 Oct 2020 08:44:05 -0700 Subject: [PATCH 08/12] Soften the placeholder colors with some Alphaville --- packages/block-library/src/social-links/editor.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 1dd867b72ed4b3..d6d77308c14ab8 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -32,19 +32,19 @@ } .wp-block-social-links__social-placeholder__blue { - background-color: #3499cd; - box-shadow: 0 0 8px 8px #3499cd; + background-color: rgba(52, 153, 205, 0.5); + box-shadow: 0 0 8px 8px rgba(52, 153, 205, 0.5); } .wp-block-social-links__social-placeholder__pink { - background-color: #f00075; - box-shadow: 0 0 8px 8px #f00075; + background-color: rgba(240, 0, 117, 0.5); + box-shadow: 0 0 8px 8px rgba(240, 0, 117, 0.5); } .wp-block-social-links__social-placeholder__orange { - background-color: #f90; - box-shadow: 0 0 8px 8px #f90; + background-color: rgba(255, 153, 0, 0.5); + box-shadow: 0 0 8px 8px rgba(255, 153, 0, 0.5); } // Polish the Appender. From 211a6b7f8eee1059c94c176b8478b122b5376feb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 15 Oct 2020 14:04:48 +0200 Subject: [PATCH 09/12] Polish the placeholder state. --- .../block-library/src/social-links/edit.js | 6 ++-- .../src/social-links/editor.scss | 31 +++++-------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 864ec6d1786820..13ce364c83561b 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -22,9 +22,9 @@ export function SocialLinksEdit( props ) { const SocialPlaceholder = (
-
-
-
+
+
+
); diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index d6d77308c14ab8..dbbab99f619052 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -22,34 +22,19 @@ .editor-styles-wrapper .wp-block-social-links { padding: 0; } -.wp-block-social-links__social-placeholder div { +.wp-block-social-links__social-placeholder .wp-block-social-link { display: inline-block; - margin: 0 8px; - padding: 4px; - width: 24px; - height: 24px; - border-radius: 12px; -} - -.wp-block-social-links__social-placeholder__blue { - background-color: rgba(52, 153, 205, 0.5); - box-shadow: 0 0 8px 8px rgba(52, 153, 205, 0.5); -} - - -.wp-block-social-links__social-placeholder__pink { - background-color: rgba(240, 0, 117, 0.5); - box-shadow: 0 0 8px 8px rgba(240, 0, 117, 0.5); -} - -.wp-block-social-links__social-placeholder__orange { - background-color: rgba(255, 153, 0, 0.5); - box-shadow: 0 0 8px 8px rgba(255, 153, 0, 0.5); + margin: 0 $grid-unit-10 0 0; + padding: $grid-unit-05; + width: 36px; + height: 36px; + border-radius: $radius-round; + opacity: 0.8; } // Polish the Appender. .wp-block-social-links .block-list-appender { - margin: 0; + margin: 0 0 $grid-unit-10 0; display: flex; align-items: center; } From 91a2f20f7d9634a0df3727bb6c3c305296218e02 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 16 Oct 2020 10:09:56 +0200 Subject: [PATCH 10/12] Tweak setup state. --- .../src/social-links/editor.scss | 23 +++++++++++++++++-- .../block-library/src/social-links/style.scss | 2 +- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index dbbab99f619052..281ba69b7c2369 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -22,16 +22,35 @@ .editor-styles-wrapper .wp-block-social-links { padding: 0; } + +// Placeholder/setup state. .wp-block-social-links__social-placeholder .wp-block-social-link { - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; margin: 0 $grid-unit-10 0 0; - padding: $grid-unit-05; width: 36px; height: 36px; border-radius: $radius-round; opacity: 0.8; } +.is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before { + content: ""; + display: block; + width: 18px; + height: 18px; + border-radius: $radius-round; + opacity: 0.8; + background: #ccc; +} + +.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-block-social-link { + border-radius: 9999px; + padding-left: 16px + 12px; + padding-right: 16px + 12px; +} + // Polish the Appender. .wp-block-social-links .block-list-appender { margin: 0 0 $grid-unit-10 0; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 46c3f5ca5e9dcb..7782500c696190 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -20,7 +20,7 @@ display: block; width: 36px; height: 36px; - border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized. + border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized. margin: 0 8px 8px 0; transition: transform 0.1s ease; @include reduce-motion("transition"); From 83542c06bd93bdd78fadcf5179a420cae377d750 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 16 Oct 2020 10:14:48 +0200 Subject: [PATCH 11/12] Fix margin and color issue. --- .../src/social-links/editor.scss | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 281ba69b7c2369..dec1e6fa3634d0 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -24,15 +24,19 @@ } // Placeholder/setup state. -.wp-block-social-links__social-placeholder .wp-block-social-link { - display: inline-flex; - align-items: center; - justify-content: center; - margin: 0 $grid-unit-10 0 0; - width: 36px; - height: 36px; - border-radius: $radius-round; - opacity: 0.8; +.wp-block-social-links__social-placeholder { + display: flex; + + .wp-block-social-link { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0 $grid-unit-10 $grid-unit-10 0; + width: 36px; + height: 36px; + border-radius: $radius-round; + opacity: 0.8; + } } .is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before { @@ -42,7 +46,7 @@ height: 18px; border-radius: $radius-round; opacity: 0.8; - background: #ccc; + background: currentColor; } .is-style-pill-shape .wp-block-social-links__social-placeholder .wp-block-social-link { From 6b71e3c44f62f6f88e4be72bf851bc74b0aee8df Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 16 Oct 2020 09:07:55 -0700 Subject: [PATCH 12/12] Add placeholder prop to InnerBlocks README --- packages/block-editor/src/components/inner-blocks/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index 5eea37c867004b..4cdd0e9b5ffd3e 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -162,5 +162,7 @@ Determines whether the toolbars of _all_ child Blocks (applied deeply, recursive For example, a button block, deeply nested in several levels of block `X` that utilises this property will see the button block's toolbar displayed on block `X`'s toolbar area. +### `placeholder` - +* **Type:** `Function` +* **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example.