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

Fix: Button Replace remaining 40px default size violations [Block Directory] #65467

Merged
merged 5 commits into from
Sep 25, 2024
Merged

Fix: Button Replace remaining 40px default size violations [Block Directory] #65467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a0995a9
fix: The button height for install button and keep as HTML.
vipul0425 Sep 18, 2024
5bd414a
Refactor downloadable list item to vanilla button
ciampo Sep 25, 2024
c6fa86e
Merge branch 'trunk' into feat/issue-65018-block-dir
ciampo Sep 25, 2024
16fad15
Remove unnecessary comment
ciampo Sep 25, 2024
9029893
Update package-lock.json
ciampo Sep 25, 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: 4 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/block-directory/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"@wordpress/plugins": "file:../plugins",
"@wordpress/private-apis": "file:../private-apis",
"@wordpress/url": "file:../url",
"change-case": "^4.1.2"
"change-case": "^4.1.2",
"clsx": "^2.1.1"
},
"peerDependencies": {
"react": "^18.0.0",
Expand Down
137 changes: 70 additions & 67 deletions packages/block-directory/src/components/downloadable-block-list-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import {
Button,
Tooltip,
Spinner,
VisuallyHidden,
Composite,
Expand Down Expand Up @@ -89,77 +94,75 @@ function DownloadableBlockListItem( { item, onClick } ) {
statusText = __( 'Installing…' );
}

const itemLabel = getDownloadableBlockLabel( item, {
hasNotice,
isInstalled,
isInstalling,
} );

return (
<Composite.Item
render={
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
accessibleWhenDisabled
type="button"
role="option"
className="block-directory-downloadable-block-list-item"
isBusy={ isInstalling }
onClick={ ( event ) => {
event.preventDefault();
onClick();
} }
label={ getDownloadableBlockLabel( item, {
hasNotice,
isInstalled,
isInstalling,
} ) }
showTooltip
tooltipPosition="top center"
/>
}
disabled={ isInstalling || ! isInstallable }
>
<div className="block-directory-downloadable-block-list-item__icon">
<DownloadableBlockIcon icon={ icon } title={ title } />
{ isInstalling ? (
<span className="block-directory-downloadable-block-list-item__spinner">
<Spinner />
</span>
) : (
<BlockRatings rating={ rating } />
<Tooltip placement="top" text={ itemLabel }>
<Composite.Item
className={ clsx(
'block-directory-downloadable-block-list-item',
isInstalling && 'is-installing'
) }
</div>
<span className="block-directory-downloadable-block-list-item__details">
<span className="block-directory-downloadable-block-list-item__title">
{ createInterpolateElement(
sprintf(
/* translators: %1$s: block title, %2$s: author name. */
__( '%1$s <span>by %2$s</span>' ),
decodeEntities( title ),
author
),
{
span: (
<span className="block-directory-downloadable-block-list-item__author" />
accessibleWhenDisabled
disabled={ isInstalling || ! isInstallable }
onClick={ ( event ) => {
event.preventDefault();
onClick();
} }
aria-label={ itemLabel }
type="button"
role="option"
>
<div className="block-directory-downloadable-block-list-item__icon">
<DownloadableBlockIcon icon={ icon } title={ title } />
{ isInstalling ? (
<span className="block-directory-downloadable-block-list-item__spinner">
<Spinner />
</span>
) : (
<BlockRatings rating={ rating } />
) }
</div>
<span className="block-directory-downloadable-block-list-item__details">
<span className="block-directory-downloadable-block-list-item__title">
{ createInterpolateElement(
sprintf(
/* translators: %1$s: block title, %2$s: author name. */
__( '%1$s <span>by %2$s</span>' ),
decodeEntities( title ),
author
),
}
{
span: (
<span className="block-directory-downloadable-block-list-item__author" />
),
}
) }
</span>
{ hasNotice ? (
<DownloadableBlockNotice block={ item } />
) : (
<>
<span className="block-directory-downloadable-block-list-item__desc">
{ !! statusText
? statusText
: decodeEntities( description ) }
</span>
{ isInstallable &&
! ( isInstalled || isInstalling ) && (
<VisuallyHidden>
{ __( 'Install block' ) }
</VisuallyHidden>
) }
</>
) }
</span>
{ hasNotice ? (
<DownloadableBlockNotice block={ item } />
) : (
<>
<span className="block-directory-downloadable-block-list-item__desc">
{ !! statusText
? statusText
: decodeEntities( description ) }
</span>
{ isInstallable &&
! ( isInstalled || isInstalling ) && (
<VisuallyHidden>
{ __( 'Install block' ) }
</VisuallyHidden>
) }
</>
) }
</span>
</Composite.Item>
</Composite.Item>
</Tooltip>
);
}

Expand Down
33 changes: 23 additions & 10 deletions packages/block-directory/src/components/downloadable-block-list-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,42 @@
.block-directory-downloadable-block-list-item {
padding: $grid-unit-15;
& + & {
margin-top: $grid-unit-05;
}

display: grid;
grid-template-columns: auto 1fr;

width: 100%;
height: auto;
padding: $grid-unit-15;
margin: 0;

appearance: none;
background: none;
border: 0;
text-align: left;
display: grid;
grid-template-columns: auto 1fr;
transition: box-shadow 0.1s linear;

// The item contains absolutely positioned items.
// Set `position: relative` on the parent to prevent overflow issues
// in scroll containers.
// See: https://github.com/WordPress/gutenberg/issues/63384
position: relative;


&:not([aria-disabled="true"]) {
cursor: pointer;
}

&:hover {
@include button-style__focus();
}

&.is-busy {
background: transparent;
&[data-focus-visible] {
@include button-style__focus();
}

&.is-installing {
.block-directory-downloadable-block-list-item__author {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
Expand All @@ -33,11 +51,6 @@
word-wrap: normal !important;
}
}

&:disabled,
&[aria-disabled] {
opacity: 1;
}
}

.block-directory-downloadable-block-list-item__icon {
Expand Down
3 changes: 0 additions & 3 deletions packages/block-directory/src/components/downloadable-blocks-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,3 @@
margin-top: 0;
}

.block-directory-downloadable-blocks-panel button {
margin-top: $grid-unit-05;
}
3 changes: 1 addition & 2 deletions packages/block-directory/src/plugins/get-install-missing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,7 @@ const ModifiedWarning = ( { originalBlock, ...props } ) => {
);
actions.push(
<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
keep-as-html-before html-after

key="convert"
onClick={ convertToHTML }
variant="tertiary"
Expand Down
3 changes: 1 addition & 2 deletions packages/block-directory/src/plugins/get-install-missing/install-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ export default function InstallButton( { attributes, block, clientId } ) {

return (
<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
install-block-before install-after

onClick={ () =>
installBlockType( block ).then( ( success ) => {
if ( success ) {
Expand Down
Loading