Skip to content

Commit

Permalink
Update icons, and add resizing of the search form.
Browse files Browse the repository at this point in the history
  • Loading branch information
apeatling committed Aug 23, 2020
1 parent 893bbee commit 79576e5
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 124 deletions.
6 changes: 5 additions & 1 deletion packages/block-library/src/search/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
"type": "string",
"default": ""
},
"width": {
"type": "number",
"default": 250
},
"buttonText": {
"type": "string"
},
Expand All @@ -26,7 +30,7 @@
}
},
"supports": {
"align": true,
"align": [ "left", "center", "right" ],
"html": false,
"lightBlockWrapper": true
}
Expand Down
230 changes: 133 additions & 97 deletions packages/block-library/src/search/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
ToolbarGroup,
Button,
ToolbarButton,
ResizableBox,
} from '@wordpress/components';
import { search } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
Expand All @@ -34,16 +35,25 @@ import {
toggleLabel,
} from './icons';

export default function SearchEdit( { className, attributes, setAttributes } ) {
export default function SearchEdit( {
className,
attributes,
setAttributes,
toggleSelection,
} ) {
const {
label,
showLabel,
placeholder,
width,
align,
buttonText,
buttonPosition,
buttonUseIcon,
} = attributes;

const MIN_WIDTH = 120;

const getBlockClassNames = () => {
return classnames(
className,
Expand Down Expand Up @@ -81,6 +91,17 @@ export default function SearchEdit( { className, attributes, setAttributes } ) {
}
};

const getResizableSides = () => {
if ( 'button-only' === buttonPosition ) {
return {};
}

return {
right: align === 'right' ? false : true,
left: align === 'right' ? true : false,
};
};

const renderTextField = () => {
return (
<input
Expand Down Expand Up @@ -126,93 +147,95 @@ export default function SearchEdit( { className, attributes, setAttributes } ) {
);
};

return (
<Block.div className={ getBlockClassNames() }>
<BlockControls>
<ToolbarGroup>
const controls = (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
title={ __( 'Toggle Search Label' ) }
icon={ toggleLabel }
onClick={ () => {
setAttributes( {
showLabel: ! showLabel,
} );
} }
className={ showLabel ? 'is-pressed' : undefined }
/>
</ToolbarGroup>

<ToolbarGroup>
<DropdownMenu
icon={ getButtonPositionIcon() }
label={ __( 'Change Button Position' ) }
>
{ ( { onClose } ) => (
<MenuGroup className="wp-block-search__button-position-menu">
<MenuItem
icon={ noButton }
onClick={ () => {
setAttributes( {
buttonPosition: 'no-button',
} );
onClose();
} }
>
{ __( 'No Button' ) }
</MenuItem>
<MenuItem
icon={ buttonOutside }
onClick={ () => {
setAttributes( {
buttonPosition: 'button-outside',
} );
onClose();
} }
>
{ __( 'Button Outside' ) }
</MenuItem>
<MenuItem
icon={ buttonInside }
onClick={ () => {
setAttributes( {
buttonPosition: 'button-inside',
} );
onClose();
} }
>
{ __( 'Button Inside' ) }
</MenuItem>
<MenuItem
icon={ buttonOnly }
onClick={ () => {
setAttributes( {
buttonPosition: 'button-only',
} );
onClose();
} }
>
{ __( 'Button Only' ) }
</MenuItem>
</MenuGroup>
) }
</DropdownMenu>

{ 'no-button' !== buttonPosition && (
<ToolbarButton
title={ __( 'Toggle Search Label' ) }
icon={ toggleLabel }
title={ __( 'Use Button with Icon' ) }
icon={ buttonWithIcon }
onClick={ () => {
setAttributes( {
showLabel: ! showLabel,
buttonUseIcon: ! buttonUseIcon,
} );
} }
className={ showLabel ? 'is-pressed' : undefined }
className={ buttonUseIcon ? 'is-pressed' : undefined }
/>
</ToolbarGroup>

<ToolbarGroup>
<DropdownMenu
icon={ getButtonPositionIcon() }
label={ __( 'Change Button Position' ) }
>
{ ( { onClose } ) => (
<MenuGroup className="wp-block-search__button-position-menu">
<MenuItem
icon={ noButton }
onClick={ () => {
setAttributes( {
buttonPosition: 'no-button',
} );
onClose();
} }
>
{ __( 'No Button' ) }
</MenuItem>
<MenuItem
icon={ buttonOutside }
onClick={ () => {
setAttributes( {
buttonPosition: 'button-outside',
} );
onClose();
} }
>
{ __( 'Button Outside' ) }
</MenuItem>
<MenuItem
icon={ buttonInside }
onClick={ () => {
setAttributes( {
buttonPosition: 'button-inside',
} );
onClose();
} }
>
{ __( 'Button Inside' ) }
</MenuItem>
<MenuItem
icon={ buttonOnly }
onClick={ () => {
setAttributes( {
buttonPosition: 'button-only',
} );
onClose();
} }
>
{ __( 'Button Only' ) }
</MenuItem>
</MenuGroup>
) }
</DropdownMenu>

{ 'no-button' !== buttonPosition && (
<ToolbarButton
title={ __( 'Use Button with Icon' ) }
icon={ buttonWithIcon }
onClick={ () => {
setAttributes( {
buttonUseIcon: ! buttonUseIcon,
} );
} }
className={
buttonUseIcon ? 'is-pressed' : undefined
}
/>
) }
</ToolbarGroup>
</BlockControls>
) }
</ToolbarGroup>
</BlockControls>
);

return (
<Block.div className={ getBlockClassNames() }>
{ controls }

{ showLabel && (
<RichText
Expand All @@ -225,22 +248,35 @@ export default function SearchEdit( { className, attributes, setAttributes } ) {
/>
) }

{ 'button-outside' === buttonPosition && (
<>
{ renderTextField() }
{ renderButton() }
</>
) }

{ 'button-inside' === buttonPosition && (
<div className="wp-block-search__inside-wrapper">
{ renderTextField() }
{ renderButton() }
</div>
) }
<ResizableBox
size={ {
width,
} }
className="wp-block-search__inside-wrapper"
minWidth={ MIN_WIDTH }
bounds={ align === undefined ? 'parent' : 'window' }
enable={ getResizableSides() }
onResizeStop={ ( event, direction, elt, delta ) => {
setAttributes( {
width: parseInt( width + delta.width, 10 ),
} );
toggleSelection( true );
} }
onResizeStart={ () => {
toggleSelection( false );
} }
>
{ ( 'button-inside' === buttonPosition ||
'button-outside' === buttonPosition ) && (
<>
{ renderTextField() }
{ renderButton() }
</>
) }

{ 'button-only' === buttonPosition && renderButton() }
{ 'no-button' === buttonPosition && renderTextField() }
{ 'button-only' === buttonPosition && renderButton() }
{ 'no-button' === buttonPosition && renderTextField() }
</ResizableBox>
</Block.div>
);
}
8 changes: 6 additions & 2 deletions packages/block-library/src/search/editor.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.wp-block-search {
&__input,
&__inside-wrapper {
&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border-radius: $radius-block-ui;
border: 1px solid $dark-gray-200;
color: $dark-gray-placeholder;
Expand All @@ -25,9 +25,13 @@
color: $dark-gray-700;
}

&__inside-wrapper {
.wp-block-search__inside-wrapper {
display: flex;
flex: auto;
flex-wrap: nowrap;
}

&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: $grid-unit-05;

.wp-block-search__input {
Expand Down
Loading

0 comments on commit 79576e5

Please sign in to comment.