Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Placeholder: Refactor and simplify dashed placeholders used for Featured Image & Site Logo #43228

Merged
merged 3 commits into from
Aug 15, 2022
Merged

Placeholder: Refactor and simplify dashed placeholders used for Featured Image & Site Logo #43228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb8a35a
Site Logo: simplify, reuse, and fix a border radius issue.
jasmussen Aug 15, 2022
f0e7f28
Simplify for Featured Image.
jasmussen Aug 15, 2022
bc07177
Enable borders to be visible on placeholders.
jasmussen Aug 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 9 additions & 53 deletions packages/block-library/src/post-featured-image/editor.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}