Skip to content

Button: Add __next40pxDefaultSize in block-editor 6 #65742

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

Merged
mirka merged 5 commits into from
Oct 1, 2024
Merged

Button: Add __next40pxDefaultSize in block-editor 6 #65742

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
42c3737
Fix in Skip to selected block
mirka Sep 30, 2024
a4ad907
Fix in Tool selector
mirka Sep 30, 2024
366204d
Fix in URLInputButton
mirka Sep 30, 2024
49f0f12
Fix in URLInput
mirka Sep 30, 2024
398e2d6
Remove dead code in FlexLayoutVerticalAlignmentControl
mirka Sep 30, 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
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/skip-to-selected-block/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ export default function SkipToSelectedBlock() {

return selectedBlockClientId ? (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

Insert a Paragraph block, and hit Tab all the way through the block inspector sidebar until this skip button pops up.

Before After
Skip to selected block button, before Skip to selected block button, after

variant="secondary"
className="block-editor-skip-to-selected-block"
onClick={ onClick }
Expand Down
9 changes: 0 additions & 9 deletions packages/block-editor/src/components/skip-to-selected-block/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,9 @@
top: -9999em;

&:focus {
height: auto;
width: auto;
display: block;
font-size: 14px;
font-weight: 600;
padding: 15px 23px 14px;
background: #f1f1f1;
color: var(--wp-admin-theme-color);
line-height: normal;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
text-decoration: none;
outline: none;
z-index: z-index(".skip-to-selected-block");
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

I removed some arbitrary and/or seemingly unnecessary style overrides. Maybe we can also remove the font size and weight, but left those as is for now.

Copy link
Contributor

@ciampo ciampo Sep 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

could we remove the background styles too?

Copy link
Member Author

@mirka mirka Oct 1, 2024

Choose a reason for hiding this comment

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

I can kind of see how someone would want a background color here, given that the button floats above a white background. I'd say a complete reconsideration of the remaining overrides (font size, weight, background) is a separate issue.

}
}
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/tool-selector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@ function ToolSelector( props, ref ) {
<Dropdown
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="compact"
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

In the app, the size="compact" is already passed from the consumer, but let's add it to the component itself as well.

Tool selector button

{ ...props }
ref={ ref }
icon={ mode === 'navigation' ? editIcon : selectIcon }
Expand Down
28 changes: 16 additions & 12 deletions packages/block-editor/src/components/url-input/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Button } from '@wordpress/components';
import {
Button,
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
} from '@wordpress/components';
import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';

/**
Expand Down Expand Up @@ -38,8 +41,7 @@ class URLInputButton extends Component {
return (
<div className="block-editor-url-input__button">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
size="compact"
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

This isn't used in the app anymore, so I tested with a story.

diff --git a/packages/block-editor/src/components/url-input/stories/index.story.js b/packages/block-editor/src/components/url-input/stories/index.story.js
new file mode 100644
index 0000000000..68a5bc360b
--- /dev/null
+++ b/packages/block-editor/src/components/url-input/stories/index.story.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import URLInputButton from '../button';
+
+export default { title: 'BlockEditor/URLInputButton' };
+
+export const Default = () => {
+	return <URLInputButton />;
+};
Before After
URLInputButton, before URLInputButton, after

I doubt anyone uses this anymore, since the styles are kind of broken/outdated already. I changed it to use the same suffix UI pattern as the other similar URL controls.

icon={ link }
label={ buttonLabel }
onClick={ this.toggle }
Expand All @@ -53,8 +55,7 @@ class URLInputButton extends Component {
>
<div className="block-editor-url-input__button-modal-line">
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
className="block-editor-url-input__back"
icon={ arrowLeft }
label={ __( 'Close' ) }
Expand All @@ -63,13 +64,16 @@ class URLInputButton extends Component {
<URLInput
value={ url || '' }
onChange={ onChange }
/>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
icon={ keyboardReturn }
label={ __( 'Submit' ) }
type="submit"
suffix={
<InputControlSuffixWrapper variant="control">
<Button
size="small"
icon={ keyboardReturn }
label={ __( 'Submit' ) }
type="submit"
/>
</InputControlSuffixWrapper>
}
/>
</div>
</form>
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/url-input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -540,8 +540,7 @@ class URLInput extends Component {
>
{ suggestions.map( ( suggestion, index ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

Insert a Paragraph block, select a string range and click the Link button in the block toolbar. I'm not sure what conditions are needed to reach this code naturally — it's not what you normally see in a URLInput in Gutenberg. To force the condition, you can comment out the block with the if ( isFunction( renderSuggestions ) ) conditional, a few lines above this.

Before After
URLInput, before URLInput, after

{ ...buildSuggestionItemProps( suggestion, index ) }
key={ suggestion.id }
className={ clsx(
Expand Down
6 changes: 0 additions & 6 deletions packages/block-editor/src/components/url-input/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,4 @@ $input-size: 300px;
flex-shrink: 1;
min-width: 0;
align-items: flex-start;

.components-button {
flex-shrink: 0;
width: $button-size;
height: $button-size;
}
Comment on lines -112 to -117
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

This used to apply in the URLInputButton. No longer seems necessary.

}
63 changes: 10 additions & 53 deletions packages/block-editor/src/layouts/flex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
arrowDown,
} from '@wordpress/icons';
import {
Button,
ToggleControl,
Flex,
FlexItem,
Expand Down Expand Up @@ -110,7 +109,6 @@ export default {
<FlexLayoutVerticalAlignmentControl
layout={ layout }
onChange={ onChange }
isToolbar
/>
) }
</BlockControls>
Expand Down Expand Up @@ -190,11 +188,7 @@ export default {
},
};

function FlexLayoutVerticalAlignmentControl( {
layout,
onChange,
isToolbar = false,
} ) {
function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
const { orientation = 'horizontal' } = layout;

const defaultVerticalAlignment =
Expand All @@ -210,54 +204,17 @@ function FlexLayoutVerticalAlignmentControl( {
verticalAlignment: value,
} );
};
if ( isToolbar ) {
return (
<BlockVerticalAlignmentControl
onChange={ onVerticalAlignmentChange }
value={ verticalAlignment }
controls={
orientation === 'horizontal'
? [ 'top', 'center', 'bottom', 'stretch' ]
: [ 'top', 'center', 'bottom', 'space-between' ]
}
/>
);
}

const verticalAlignmentOptions = [
{
value: 'flex-start',
label: __( 'Align items top' ),
},
{
value: 'center',
label: __( 'Align items center' ),
},
{
value: 'flex-end',
label: __( 'Align items bottom' ),
},
];

return (
<fieldset className="block-editor-hooks__flex-layout-vertical-alignment-control">
Copy link
Member Author

@mirka mirka Sep 30, 2024

Choose a reason for hiding this comment

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

This FlexLayoutVerticalAlignmentControl component is only used in this file, and only in the isToolbar={ true } case. This ! isToolbar condition is never reached. I also confirmed with a temporary story in Storybook that the styles/functionality in this code path is currently broken. Let's just remove the dead code.

<legend>{ __( 'Vertical alignment' ) }</legend>
<div>
{ verticalAlignmentOptions.map( ( value, icon, label ) => {
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
key={ value }
label={ label }
icon={ icon }
isPressed={ verticalAlignment === value }
onClick={ () => onVerticalAlignmentChange( value ) }
/>
);
} ) }
</div>
</fieldset>
<BlockVerticalAlignmentControl
onChange={ onVerticalAlignmentChange }
value={ verticalAlignment }
controls={
orientation === 'horizontal'
? [ 'top', 'center', 'bottom', 'stretch' ]
: [ 'top', 'center', 'bottom', 'space-between' ]
}
/>
);
}

Expand Down