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.

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

Add width selector for button block #25999

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 3 additions & 0 deletions packages/block-library/src/button/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@
},
"gradient": {
"type": "string"
},
"width": {
"type": "number"
Copy link
Contributor

Choose a reason for hiding this comment

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

Thinking about possible futures for this block, is this the best data representation? How would we express custom width values without introducing compatibility issues with the current schema? That is, this new width attribute is not any number but actually a percentage represented as 0 <= n <= 100. Would it be better if it were a real number x 0 <= x <= 1 to distinguish from full pixel values like width: 200? Would it be better if termed widthPercentage?

All of these are open questions — I don't have a formed opinion on this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Another possibility here would be to add an additional widthUnit attribute if we decide to introduce custom width as pixel values. The search block takes that approach.

Copy link
Contributor

@apeatling apeatling Oct 29, 2020

Choose a reason for hiding this comment

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

This is the approach the search and cover blocks take, so this should be futureproof for adding a unit in the future.

}
},
"supports": {
Expand Down
43 changes: 42 additions & 1 deletion packages/block-library/src/button/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { useCallback, useState } from '@wordpress/element';
import {
Button,
ButtonGroup,
KeyboardShortcuts,
PanelBody,
RangeControl,
Expand Down Expand Up @@ -70,6 +72,35 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
);
}

function WidthPanel( { selectedWidth, setAttributes } ) {
function handleChange( newWidth ) {
// Check if we are toggling the width off
const width = selectedWidth === newWidth ? undefined : newWidth;

// Update attributes
setAttributes( { width } );
}

return (
<PanelBody title={ __( 'Width settings' ) }>
<ButtonGroup aria-label={ __( 'Button width' ) }>
{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
return (
<Button
key={ widthValue }
isSmall
isPrimary={ widthValue === selectedWidth }
onClick={ () => handleChange( widthValue ) }
>
{ widthValue }%
</Button>
);
} ) }
</ButtonGroup>
</PanelBody>
);
}

function URLPicker( {
isSelected,
url,
Expand Down Expand Up @@ -168,6 +199,7 @@ function ButtonEdit( props ) {
rel,
text,
url,
width,
} = attributes;
const onSetLinkRel = useCallback(
( value ) => {
Expand Down Expand Up @@ -202,7 +234,12 @@ function ButtonEdit( props ) {
return (
<>
<ColorEdit { ...props } />
<div { ...blockProps }>
<div
{ ...blockProps }
className={ classnames( blockProps.className, {
[ `has-custom-width wp-block-button__width-${ width }` ]: width,
} ) }
>
<RichText
placeholder={ placeholder || __( 'Add text…' ) }
value={ text }
Expand Down Expand Up @@ -245,6 +282,10 @@ function ButtonEdit( props ) {
borderRadius={ borderRadius }
setAttributes={ setAttributes }
/>
<WidthPanel
selectedWidth={ width }
setAttributes={ setAttributes }
/>
<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
label={ __( 'Open in new tab' ) }
Expand Down
10 changes: 10 additions & 0 deletions packages/block-library/src/button/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,16 @@
}
}

.wp-button-label__width {
.components-button-group {
display: block;
}

.components-base-control__field {
margin-bottom: 12px;
}
}

// Display "table" is used because the button container should only wrap the content and not takes the full width.
div[data-type="core/button"] {
display: table;
Expand Down
18 changes: 15 additions & 3 deletions packages/block-library/src/button/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,16 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
*/
import getColorAndStyleProps from './color-props';

export default function save( { attributes } ) {
const { borderRadius, linkTarget, rel, text, title, url } = attributes;
export default function save( { attributes, className } ) {
const {
borderRadius,
linkTarget,
rel,
text,
title,
url,
width,
} = attributes;
const colorProps = getColorAndStyleProps( attributes );
const buttonClasses = classnames(
'wp-block-button__link',
Expand All @@ -32,8 +40,12 @@ export default function save( { attributes } ) {
// if it had already been assigned, for the sake of backward-compatibility.
// A title will no longer be assigned for new or updated button block links.

const wrapperClasses = classnames( className, {
[ `has-custom-width wp-block-button__width-${ width }` ]: width,
} );

return (
<div { ...useBlockProps.save() }>
<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
<RichText.Content
tagName="a"
className={ buttonClasses }
Expand Down
26 changes: 25 additions & 1 deletion packages/block-library/src/button/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,31 @@ $blocks-button__height: 3.1em;
}
}

.wp-block-button {
&.has-custom-width {
max-width: none;
.wp-block-button__link {
width: 100%;
}
}

&.wp-block-button__width-25 {
width: 25%;
}

&.wp-block-button__width-50 {
width: 50%;
}

&.wp-block-button__width-75 {
width: 75%;
}

&.wp-block-button__width-100 {
width: 100%;
}
}

// the first selector is required for old buttons markup
.wp-block-button.is-style-squared,
.wp-block-button__link.wp-block-button.is-style-squared {
Expand All @@ -41,7 +66,6 @@ $blocks-button__height: 3.1em;


// the first selector is required for old buttons markup

.wp-block-button.no-border-radius,
.wp-block-button__link.no-border-radius {
border-radius: 0 !important;
Expand Down
8 changes: 5 additions & 3 deletions packages/block-library/src/buttons/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
margin-left: 0;
}

.wp-block[data-align="center"] > .wp-block-buttons {
.wp-block > .wp-block-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
}

.wp-block[data-align="center"] > .wp-block-buttons {
align-items: center;
justify-content: center;
}

.wp-block[data-align="right"] > .wp-block-buttons {
display: flex;
justify-content: flex-end;
}

Expand Down