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

Jump to bottom

Fix: Button Replace remaining 40px default size violations [Block Editor 4] #65257

Merged
merged 6 commits into from
Sep 18, 2024
Merged

Fix: Button Replace remaining 40px default size violations [Block Editor 4] #65257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
80c4868
fix: Inserter lightbox's button to use 40px default size.
vipul0425 Sep 12, 2024
c95264c
fix: Pattern Explorer Sidebar's button to use 40px default size.
vipul0425 Sep 12, 2024
e07939a
fix: Block Pattern's button to use 40px default size.
vipul0425 Sep 12, 2024
d676df4
fix: Media Preview's button to use 40px default size.
vipul0425 Sep 12, 2024
7f74f1b
fix: Media Tab's button to use 40px default size.
vipul0425 Sep 12, 2024
c82b451
fix: Quick Inserter's button to use 40px default size.
vipul0425 Sep 12, 2024
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
6 changes: 1 addition & 5 deletions packages/block-editor/src/components/inserter-listbox/item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,7 @@ function InserterListboxItem(
return children( propsWithTabIndex );
}
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
{ ...propsWithTabIndex }
>
<Button __next40pxDefaultSize { ...propsWithTabIndex }>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom style height: auto is causing it to be 90px, so __next40pxDefaultSize has no effect in this case. I have not changed the styles as it was looking good. Let me know if anything needs to be changed.

inserter-lightbox-button-before

{ children }
</Button>
);
Expand Down
3 changes: 1 addition & 2 deletions .../block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ function PatternCategoriesList( {
{ patternCategories.map( ( { name, label } ) => {
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@vipul0425 vipul0425 Sep 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
block-pattern-explorer-before pattern-explorer-sidebar-after

key={ name }
label={ label }
className={ `${ baseClassName }__categories-list__item` }
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/inserter/block-patterns-tab/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,7 @@ function BlockPatternsTab( {
{ children }
</CategoryTabs>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
block-patterns-tab-explore-before block-patterns-tab-explore-after

className="block-editor-inserter__patterns-explore-button"
onClick={ () => setShowPatternsExplorer( true ) }
variant="secondary"
Expand Down
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/inserter/media-tab/media-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
>
<FlexItem>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
variant="tertiary"
onClick={ onClose }
>
Expand All @@ -110,8 +109,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
</FlexItem>
<FlexItem>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
media-preview-insert-before media-preview-insert-after

variant="primary"
onClick={ onSubmit }
>
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/inserter/media-tab/media-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,7 @@ function MediaTab( {
allowedTypes={ ALLOWED_MEDIA_TYPES }
render={ ( { open } ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
media-tab-button-before media-tab-button-after

onClick={ ( event ) => {
// Safari doesn't emit a focus event on button elements when
// clicked and we need to manually focus the button here.
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/inserter/quick-inserter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,7 @@ export default function QuickInserter( {

{ setInserterIsOpened && (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have removed the custom CSS for height as it was overriding the default size styles. Let me know if any further changes are needed.

Thanks 🙇

Before After
quick-inserter-before quick-inserter-after

className="block-editor-inserter__quick-inserter-expand"
onClick={ onBrowseAll }
aria-label={ __(
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,6 @@ $block-inserter-tabs-height: 44px;
background: $gray-900;
color: $white;
width: 100%;
height: ($button-size + $grid-unit-10);
border-radius: 0;

&:hover {
Expand Down
Loading