Skip to content

Placeholder component: Replace upload icon with text when rendering labels #44437

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

Open
RahiDroid wants to merge 15 commits into
base: trunk
Choose a base branch
from
Open

Placeholder component: Replace upload icon with text when rendering labels #44437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
78b5795
Fix: Remove restrictive width when showing labels
RahiDroid Sep 25, 2022
4f72486
Feat: Hide placeholder upload icon when showing labels
RahiDroid Sep 25, 2022
fdf7026
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Sep 25, 2022
ff3d4c4
Fix: Inconsistent spacing between children of group
RahiDroid Sep 25, 2022
584a174
Fix: Reduce specificity as it's not required
RahiDroid Sep 25, 2022
f8ce563
Refact: Shorten the button label for site logo
RahiDroid Sep 26, 2022
4fd8298
Refact: Rename 'Add media' => 'Add image'
RahiDroid Sep 28, 2022
4779b0e
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Sep 28, 2022
15dd81f
Fix: Linting error caused by duplicate selectors
RahiDroid Sep 29, 2022
146b81c
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Oct 4, 2022
f12730f
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Nov 14, 2022
1816a72
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Nov 14, 2022
97382ef
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Jan 2, 2023
d8dac7c
Fix: Incorrect margin right causing content overflow
RahiDroid Jan 2, 2023
60f8e91
Chore: Merge branch 'trunk' into fix/a11y-placeholder-block-mover
RahiDroid Jan 2, 2023
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
7 changes: 7 additions & 0 deletions packages/block-editor/src/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,10 @@
@include block-toolbar-button-style__focus();
}
}

// Styles when the 'show button text labels' preference is enabled.
.show-icon-labels {
.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
width: auto;
}
}
1 change: 0 additions & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,6 @@
.block-editor-block-toolbar__block-controls .block-editor-block-mover {
border-left: 1px solid $gray-900;
margin-left: 6px;
margin-right: -6px;
white-space: nowrap;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/post-featured-image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ function PostFeaturedImageDisplay( {
);
}

const label = __( 'Add a featured image' );
const label = __( 'Add image' );
const imageStyles = {
...borderProps.style,
height,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/site-logo/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,7 +535,7 @@ export default function LogoEdit( {
className: classes,
} );

const label = __( 'Add a site logo' );
const label = __( 'Add image' );

return (
<div { ...blockProps }>
Expand Down
8 changes: 3 additions & 5 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 @@ -5,6 +5,8 @@
margin-right: auto;
}

// Provide special styling for the placeholder.
// @todo: this particular minimal style of placeholder could be componentized further.
.wp-block-site-logo {
// Make the block selectable.
a {
Expand All @@ -28,11 +30,7 @@
height: auto;
max-width: 100%;
}
}

// 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 {
// Match the default logo size.
&.is-default-size .components-placeholder {
height: 120px;
Expand Down Expand Up @@ -73,7 +71,7 @@
}

// Style the upload button.
.components-button.components-button {
.components-button {
padding: 0;
display: flex;
justify-content: center;
Expand Down
18 changes: 18 additions & 0 deletions packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,3 +241,21 @@
stroke: currentColor;
opacity: 0.25;
}

// Styles when the 'show button text labels' preference is enabled.
.show-icon-labels {
.block-editor-media-placeholder .components-button.has-icon {
width: auto;
padding: 0 $grid-unit-10;
border-radius: 0;

svg {
display: none;
}

&::after {
content: attr(aria-label);
font-size: $helptext-font-size;
}
}
}
8 changes: 6 additions & 2 deletions packages/components/src/toolbar-group/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@
display: inline-flex;
flex-shrink: 0;
flex-wrap: wrap;
padding-left: $grid-unit-15 * 0.5; // 6px.
padding-right: $grid-unit-15 * 0.5;

// Consistent padding for all immediate children of the group.
> * {
padding-left: $grid-unit-15 * 0.5; // 6px.
padding-right: $grid-unit-15 * 0.5;
}

// Unset for nested toolbar groups. Increase specificity.
& .components-toolbar-group.components-toolbar-group {
Expand Down