Skip to content

Commit

Permalink
Add: Buttons block (#17352)
Browse files Browse the repository at this point in the history
* Add: Buttons block

* Used LinkControl, Removed logic to insert block right away (it is not part of InnerBlocks), removed toolbar movers (they are now part of InnerBlocks)

* Make UX closer to navigation block

* Update tests

* Use jsx string for property
  • Loading branch information
jorgefilipecosta authored Jan 3, 2020
1 parent 431f76c commit a74921d
Show file tree
Hide file tree
Showing 20 changed files with 361 additions and 34 deletions.
119 changes: 104 additions & 15 deletions packages/block-library/src/button/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,50 @@
* External dependencies
*/
import classnames from 'classnames';
import { escape } from 'lodash';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
useCallback,
useEffect,
useState,
} from '@wordpress/element';
import {
compose,
withInstanceId,
} from '@wordpress/compose';
import {
KeyboardShortcuts,
PanelBody,
RangeControl,
TextControl,
ToggleControl,
withFallbackStyles,
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import {
BlockControls,
__experimentalUseGradient,
ContrastChecker,
InspectorControls,
__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
RichText,
URLInput,
withColors,
__experimentalLinkControl as LinkControl,
} from '@wordpress/block-editor';
import {
LEFT,
RIGHT,
UP,
DOWN,
BACKSPACE,
ENTER,
rawShortcut,
displayShortcut,
} from '@wordpress/keycodes';

const { getComputedStyle } = window;

Expand Down Expand Up @@ -72,6 +88,85 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
);
}

const handleLinkControlOnKeyDown = ( event ) => {
const { keyCode } = event;

if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( keyCode ) > -1 ) {
// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
event.stopPropagation();
}
};

const handleLinkControlOnKeyPress = ( event ) => {
event.stopPropagation();
};

function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onToggleOpenInNewTab } ) {
const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
useEffect(
() => {
if ( ! isSelected ) {
setIsURLPickerOpen( false );
}
},
[ isSelected ]
);
const openLinkControl = () => {
setIsURLPickerOpen( true );
};
const linkControl = isURLPickerOpen && (
<LinkControl
className="wp-block-navigation-link__inline-link-input"
onKeyDown={ handleLinkControlOnKeyDown }
onKeyPress={ handleLinkControlOnKeyPress }
currentLink={ ! url && ! title ? null : { url, title } }
onLinkChange={ ( { title: newTitle = '', url: newURL = '' } ) => {
setAttributes( {
title: escape( newTitle ),
url: newURL,
} );
} }
currentSettings={ [
{
id: 'opensInNewTab',
title: __( 'Open in new tab' ),
checked: opensInNewTab,
},
] }
onSettingsChange={ ( setting, value ) => {
if ( setting === 'opensInNewTab' ) {
onToggleOpenInNewTab( value );
}
} }
onClose={ () => {
setIsURLPickerOpen( false );
} }
/>
);
return (
<>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
name="link"
icon="admin-links"
title={ __( 'Link' ) }
shortcut={ displayShortcut.primary( 'k' ) }
onClick={ openLinkControl }
/>
</ToolbarGroup>
</BlockControls>
<KeyboardShortcuts
bindGlobal
shortcuts={ {
[ rawShortcut.primary( 'k' ) ]: openLinkControl,
} }
/>
{ linkControl }
</>
);
}

function ButtonEdit( {
attributes,
backgroundColor,
Expand Down Expand Up @@ -150,18 +245,13 @@ function ButtonEdit( {
borderRadius: borderRadius ? borderRadius + 'px' : undefined,
} }
/>
<URLInput
label={ __( 'Link' ) }
className="wp-block-button__inline-link"
value={ url }
/* eslint-disable jsx-a11y/no-autofocus */
// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
autoFocus={ false }
/* eslint-enable jsx-a11y/no-autofocus */
onChange={ ( value ) => setAttributes( { url: value } ) }
disableSuggestions={ ! isSelected }
isFullWidth
hasBorder
<URLPicker
title={ title }
url={ url }
setAttributes={ setAttributes }
isSelected={ isSelected }
opensInNewTab={ linkTarget === '_blank' }
onToggleOpenInNewTab={ onToggleOpenInNewTab }
/>
<InspectorControls>
<PanelColorGradientSettings
Expand Down Expand Up @@ -215,7 +305,6 @@ function ButtonEdit( {
}

export default compose( [
withInstanceId,
withColors( 'backgroundColor', { textColor: 'color' } ),
applyFallbackStyles,
] )( ButtonEdit );
1 change: 1 addition & 0 deletions packages/block-library/src/button/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const settings = {
align: true,
alignWide: false,
},
parent: [ 'core/buttons' ],
styles: [
{ name: 'fill', label: __( 'Fill' ), isDefault: true },
{ name: 'outline', label: __( 'Outline' ) },
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/buttons/block.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "core/buttons",
"category": "layout",
"attributes": {}
}
30 changes: 30 additions & 0 deletions packages/block-library/src/buttons/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* WordPress dependencies
*/
import { InnerBlocks } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import { name as buttonBlockName } from '../button/';

const ALLOWED_BLOCKS = [ buttonBlockName ];
const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
const UI_PARTS = {
hasSelectedUI: false,
};

function ButtonsEdit( { className } ) {
return (
<div className={ className }>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ BUTTONS_TEMPLATE }
__experimentalUIParts={ UI_PARTS }
__experimentalMoverDirection="horizontal"
/>
</div>
);
}

export default ButtonsEdit;
36 changes: 36 additions & 0 deletions packages/block-library/src/buttons/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.wp-block-buttons .wp-block.block-editor-block-list__block[data-type="core/button"] {
display: inline-block;
width: auto;
}

.wp-block-buttons {
div[data-type="core/button"] div[data-block] {
display: block;
}

&[data-align="center"] .block-editor-block-list__layout {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}

&[data-align="right"] .block-editor-block-list__layout {
display: flex;
justify-content: flex-end;
}

.block-list-appender {
display: inline-block !important;
margin: 0;
}

.block-editor-block-list__layout > div:last-child {
display: inline-block;
}

.block-editor-button-block-appender {
background: none;
outline: none;
}
}
8 changes: 8 additions & 0 deletions packages/block-library/src/buttons/icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* WordPress dependencies
*/
import { G, Path, SVG } from '@wordpress/components';

export default (
<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" /></G></SVG>
);
29 changes: 29 additions & 0 deletions packages/block-library/src/buttons/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
import save from './save';

const { name } = metadata;

export { metadata, name };

export const settings = {
title: __( 'Buttons' ),
description: __( 'Prompt visitors to take action with a group of button-style links.' ),
icon,
keywords: [ __( 'link' ) ],
supports: {
align: true,
alignWide: false,
},
edit,
save,
};
12 changes: 12 additions & 0 deletions packages/block-library/src/buttons/save.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { InnerBlocks } from '@wordpress/block-editor';

export default function save() {
return (
<div>
<InnerBlocks.Content />
</div>
);
}
7 changes: 7 additions & 0 deletions packages/block-library/src/buttons/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.wp-block-buttons .wp-block-button {
display: inline-block;
margin: $grid-size-small;
}
.wp-block-buttons.aligncenter {
text-align: center;
}
1 change: 1 addition & 0 deletions packages/block-library/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import "./audio/editor.scss";
@import "./block/editor.scss";
@import "./button/editor.scss";
@import "./buttons/editor.scss";
@import "./categories/editor.scss";
@import "./code/editor.scss";
@import "./columns/editor.scss";
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import * as quote from './quote';
import * as gallery from './gallery';
import * as archives from './archives';
import * as audio from './audio';
import * as buttons from './buttons';
import * as button from './button';
import * as calendar from './calendar';
import * as categories from './categories';
Expand Down Expand Up @@ -111,6 +112,7 @@ export const registerCoreBlocks = () => {
archives,
audio,
button,
buttons,
calendar,
categories,
code,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/style.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "./audio/style.scss";
@import "./button/style.scss";
@import "./buttons/style.scss";
@import "./calendar/style.scss";
@import "./categories/style.scss";
@import "./columns/style.scss";
Expand Down
6 changes: 6 additions & 0 deletions packages/e2e-tests/fixtures/block-transforms.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ export const EXPECTED_TRANSFORMS = {
'Group',
],
},
core__buttons: {
originalBlock: 'Buttons',
availableTransforms: [
'Group',
],
},
core__calendar: {
originalBlock: 'Calendar',
availableTransforms: [
Expand Down
11 changes: 11 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__buttons.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
Loading

0 comments on commit a74921d

Please sign in to comment.