Skip to content

Commit

Permalink
Button: Add __next40pxDefaultSize in block-editor 6 (#65742)
Browse files Browse the repository at this point in the history
* Fix in Skip to selected block

* Fix in Tool selector

* Fix in URLInputButton

* Fix in URLInput

* Remove dead code in FlexLayoutVerticalAlignmentControl

Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>
  • Loading branch information
4 people authored and gutenbergplugin committed Oct 1, 2024
1 parent 07c7515 commit 716bc73
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 86 deletions.
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
variant="secondary"
className="block-editor-skip-to-selected-block"
onClick={ onClick }
Expand Down
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");
}
}
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/tool-selector/index.js
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"
{ ...props }
ref={ ref }
icon={ mode === 'navigation' ? selectIcon : editIcon }
Expand Down
28 changes: 16 additions & 12 deletions packages/block-editor/src/components/url-input/button.js
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"
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
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
{ ...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
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;
}
}
63 changes: 10 additions & 53 deletions packages/block-editor/src/layouts/flex.js
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">
<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

0 comments on commit 716bc73

Please sign in to comment.