Skip to content

Commit

Permalink
Placeholder: Refactor and simplify dashed placeholders used for Featu…
Browse files Browse the repository at this point in the history 
…red Image & Site Logo (#43228)

* Site Logo: simplify, reuse, and fix a border radius issue.

* Simplify for Featured Image.

* Enable borders to be visible on placeholders.
  • Loading branch information
@jasmussen
jasmussen committed Aug 15, 2022
1 parent 76c0193 commit 82615c0
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 139 deletions.
62 changes: 9 additions & 53 deletions packages/block-library/src/post-featured-image/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,20 @@
// 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-post-featured-image.wp-block-post-featured-image {
// Inherit border radius from style variations.
.components-placeholder,
.components-resizable-box__container {
border-radius: inherit;
}

// Style the placeholder.
.wp-block-post-featured-image__placeholder,
.components-placeholder {
justify-content: center;
align-items: center;
box-shadow: none;
padding: 0;

// Hide the upload button, as it's also available in the media library.
.components-form-file-upload {
display: none;
}

// Position the spinner.
.components-placeholder__preview {
position: absolute;
top: $grid-unit-05;
right: $grid-unit-05;
bottom: $grid-unit-05;
left: $grid-unit-05;
background: rgba($white, 0.8);
display: flex;
align-items: center;
justify-content: center;
}

// Draw the dashed outline.
// By setting the dashed border to currentColor, we ensure it's visible
// against any background color.
color: currentColor;
background: transparent;

// Style the upload button.
.components-placeholder__fieldset {
width: auto;
}

.components-button.components-button {
color: inherit;
padding: 0;
display: flex;
justify-content: center;
Expand All @@ -55,16 +23,14 @@
height: $grid-unit-60;
border-radius: 50%;
position: relative;
visibility: hidden;

// Animation.
background: transparent;
transition: all 0.1s linear;
@include reduce-motion("transition");
}

.components-button.components-button > svg {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;

> svg {
color: inherit;
}
}

// Show default placeholder height when not resized.
Expand All @@ -80,16 +46,6 @@
height: 100%;
width: 100%;
}

// Show upload button on block selection.
&.is-selected .components-button.components-button {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;
opacity: 1;
visibility: visible;
}
}

div[data-type="core/post-featured-image"] {
Expand Down
74 changes: 8 additions & 66 deletions packages/block-library/src/site-logo/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,8 @@
}

// Provide special styling for the placeholder.
// @todo: this particular minimal style of placeholder could be componentized further.
.wp-block-site-logo.wp-block-site-logo {
// Inherit border radius from style variations.
.components-placeholder,
.components-resizable-box__container {
border-radius: inherit;
}

// Match the default logo size.
&.is-default-size .components-placeholder {
height: 120px;
Expand All @@ -46,10 +41,8 @@

// Style the placeholder.
.components-placeholder {
display: flex;
justify-content: center;
align-items: center;
box-shadow: none;
padding: 0;

// Provide a minimum size for the placeholder, for when the logo is resized.
Expand All @@ -66,52 +59,13 @@
display: none;
}

// Position the spinner.
.components-placeholder__preview {
position: absolute;
top: $grid-unit-05;
right: $grid-unit-05;
bottom: $grid-unit-05;
left: $grid-unit-05;
background: rgba($white, 0.8);
display: flex;
align-items: center;
justify-content: center;
}

// Hide items.
.components-drop-zone__content-text {
display: none;
}

// Draw the dashed outline.
// By setting the dashed border to currentColor, we ensure it's visible
// 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 {
width: auto;
}

.components-button.components-button {
color: inherit;
padding: 0;
display: flex;
justify-content: center;
Expand All @@ -120,26 +74,14 @@
height: $grid-unit-60;
border-radius: 50%;
position: relative;
visibility: hidden;

// Animation.
background: transparent;
transition: all 0.1s linear;
@include reduce-motion("transition");
}

.components-button.components-button > svg {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;
}
}

// Show upload button on block selection.
&.is-selected .components-button.components-button {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;
opacity: 1;
visibility: visible;
> svg {
color: inherit;
}
}
}
}
71 changes: 51 additions & 20 deletions packages/components/src/placeholder/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,6 @@
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.

&.has-illustration {
background: none;
border: none;
box-shadow: none;
min-width: 100px;
}
}

.components-placeholder__error,
Expand Down Expand Up @@ -112,11 +105,6 @@
width: 100%;
}

.components-placeholder__preview img {
margin: 3%;
width: 50%;
}

.components-placeholder__fieldset .components-button {
margin-right: $grid-unit-15;
margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
Expand Down Expand Up @@ -175,18 +163,61 @@
}
}

// Style the placeholder illustration.
.components-placeholder__illustration {

/**
* Dashed style placeholders
*/

// @todo
// These styles are only applied after the has-illustration gets added.
// This is mainly an issue in terms of Site Logo which has a brief flash of the square placeholder.
.components-placeholder.has-illustration {
color: inherit;
border-radius: inherit;
display: flex;
box-shadow: none;
background: none;
min-width: 100px;

.components-placeholder__fieldset {
width: auto;
}

// Show placeholder buttons on block selection.
.components-button {
visibility: hidden;
opacity: 0;
transition: opacity 0.1s linear;
@include reduce-motion("transition");
}

.is-selected > & .components-button {
opacity: 1;
visibility: visible;
}

// By painting the borders here, we enable them to be replaced by the Border control.
border: $border-width dashed currentColor;
box-sizing: border-box;
overflow: hidden;
}

// Position the spinner.
// @todo these rules should ideally live with the spinner component itself.
.components-placeholder__preview {
display: flex;
justify-content: center;
}

.components-placeholder__illustration {
box-sizing: content-box;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
stroke: currentColor;
stroke-dasharray: 3;
opacity: 0.4;
border-width: inherit;
border-style: inherit;
}

0 comments on commit 82615c0

Please sign in to comment.