From cc2ac024261052ee6159bfa6323e8ba74c73c084 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 8 Jun 2021 11:56:36 +0200 Subject: [PATCH 1/3] Try: Menu item placeholder inheritance. --- .../block-library/src/navigation-link/edit.js | 10 ++-- .../src/navigation-link/editor.scss | 46 ++++--------------- 2 files changed, 13 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 50ff5ed4ad236..ab8b44624fe2c 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -430,23 +430,23 @@ export default function NavigationLinkEdit( { switch ( type ) { case 'post': /* translators: label for missing post in navigation link block */ - missingText = __( 'Select a post' ); + missingText = __( 'Select post' ); break; case 'page': /* translators: label for missing page in navigation link block */ - missingText = __( 'Select a page' ); + missingText = __( 'Select page' ); break; case 'category': /* translators: label for missing category in navigation link block */ - missingText = __( 'Select a category' ); + missingText = __( 'Select category' ); break; case 'tag': /* translators: label for missing tag in navigation link block */ - missingText = __( 'Select a tag' ); + missingText = __( 'Select tag' ); break; default: /* translators: label for missing values in navigation link block */ - missingText = __( 'Add a link' ); + missingText = __( 'Add link' ); } return ( diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 971bdbb20bcc4..3a891547db0f2 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -80,49 +80,19 @@ .wp-block-navigation-link__placeholder { position: relative; - // Provide a little margin to show each placeholder as a separate unit. - margin: 2px; - .wp-block-navigation-link__placeholder-text { - font-family: $default-font; - font-size: $default-font-size; - padding-left: 4px; - padding-right: 4px; - + background-image: + linear-gradient(135deg, transparent 10%, currentColor 10%, currentColor 30%, transparent 30%), + linear-gradient(45deg, transparent 30%, currentColor 30%, currentColor 50%, transparent 50%), + linear-gradient(135deg, transparent 50%, currentColor 50%, currentColor 70%, transparent 70%), + linear-gradient(45deg, transparent 70%, currentColor 70%, currentColor 90%, transparent 90%); + background-size: 10px 3px; + background-repeat: repeat-x; + background-position: 0 100%; } // This needs extra specificity. &.wp-block-navigation-link__content { cursor: pointer; } - - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: $radius-block-ui; - opacity: 0.1; - - .is-dark-theme & { - opacity: 0.2; - } - - .is-editing & { - background: currentColor; - } - } -} - -// We had to add extra classes to override the color from -// .editor-styles-wrapper .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content -.wp-block-navigation -.wp-block-navigation-link:not(.is-editing) -.wp-block-navigation-link__content.wp-block-navigation-link__placeholder { - box-shadow: inset 0 0 0 $border-width $gray-700; - border-radius: $radius-block-ui; - color: var(--wp-admin-theme-color); } From f5c72120928119fd608ee52b9d9f7c3c94306e93 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 22 Jun 2021 14:03:19 +0200 Subject: [PATCH 2/3] Simplify and polish the waviness. --- .../src/navigation-link/editor.scss | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 3a891547db0f2..8d4f6781cc775 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -80,15 +80,27 @@ .wp-block-navigation-link__placeholder { position: relative; + // Appear disabled to indicate incompleteness. + opacity: 0.6; + &:hover, + &:focus, + .is-selected > & { + opacity: 1; + } + + // Draw a wavy underline. .wp-block-navigation-link__placeholder-text { + $blur: 10%; + $width: 6%; + $stop1: 30%; + $stop2: 64%; + background-image: - linear-gradient(135deg, transparent 10%, currentColor 10%, currentColor 30%, transparent 30%), - linear-gradient(45deg, transparent 30%, currentColor 30%, currentColor 50%, transparent 50%), - linear-gradient(135deg, transparent 50%, currentColor 50%, currentColor 70%, transparent 70%), - linear-gradient(45deg, transparent 70%, currentColor 70%, currentColor 90%, transparent 90%); - background-size: 10px 3px; - background-repeat: repeat-x; + linear-gradient(45deg, transparent ($stop1 - $blur), currentColor $stop1, currentColor ($stop1 + $width), transparent ($stop1 + $width + $blur)), + linear-gradient(135deg, transparent ($stop2 - $blur), currentColor $stop2, currentColor ($stop2 + $width), transparent ($stop2 + $width + $blur)); background-position: 0 100%; + background-size: 6px 3px; + background-repeat: repeat-x; } // This needs extra specificity. From 284b5a7bdf1be204a3911c1ac354e7244ac6d2fa Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 8 Jul 2021 09:47:44 +0200 Subject: [PATCH 3/3] Remove opacity. --- packages/block-library/src/navigation-link/editor.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 8d4f6781cc775..a720088d055dd 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -80,14 +80,6 @@ .wp-block-navigation-link__placeholder { position: relative; - // Appear disabled to indicate incompleteness. - opacity: 0.6; - &:hover, - &:focus, - .is-selected > & { - opacity: 1; - } - // Draw a wavy underline. .wp-block-navigation-link__placeholder-text { $blur: 10%;