diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js index e766504f0d9f4..53f003a2c34cc 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -52,6 +52,7 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON return ( { @@ -72,6 +80,79 @@ function BorderPanel( { borderRadius = '', setAttributes } ) { ); } +const InlineURLPicker = withInstanceId( + function( { instanceId, isSelected, url, onChange } ) { + const linkId = `wp-block-button__inline-link-${ instanceId }`; + return ( + + + + ); + } +); + +function PopoverURLPicker( { url, onChange } ) { + const [ urlInput, setUrlInput ] = useState( url || '' ); + const [ isPopoverEnable, setIsPopoverEnable ] = useState( true ); + const onSubmit = useCallback( + () => { + onChange( urlInput ); + setIsPopoverEnable( false ); + }, + [ urlInput, onChange ] + ); + if ( ! isPopoverEnable ) { + return null; + } + return ( + + + + ); +} + +function URLPicker( { isSelected, url, setAttributes } ) { + const onChange = useCallback( + ( value ) => setAttributes( { url: value } ), + [ setAttributes ] + ); + const { urlInPopover } = useContext( ButtonEditSettings ); + if ( urlInPopover ) { + return isSelected ? ( + + ) : null; + } + return ( + + ); +} class ButtonEdit extends Component { constructor() { @@ -121,7 +202,6 @@ class ButtonEdit extends Component { fallbackTextColor, setAttributes, className, - instanceId, isSelected, } = this.props; @@ -135,8 +215,6 @@ class ButtonEdit extends Component { url, } = attributes; - const linkId = `wp-block-button__inline-link-${ instanceId }`; - return (
- - setAttributes( { url: value } ) } - disableSuggestions={ ! isSelected } - id={ linkId } - isFullWidth - hasBorder - /> - + { + const buttonBlock = createBlock( buttonBlockName ); + insertBlock( buttonBlock, undefined, clientId ); + }, + [ insertBlock, clientId ] + ); + return useCallback( + () => { + return ( + + ); + }, + [ insertButton ] + ); +} + +function ButtonsEdit( { clientId, className } ) { + const renderAppender = useInsertButton( clientId ); + return ( +
+ + + +
+ ); +} + +export default ButtonsEdit; diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss new file mode 100644 index 0000000000000..4a0863abed14d --- /dev/null +++ b/packages/block-library/src/buttons/editor.scss @@ -0,0 +1,80 @@ +.wp-block-buttons .block-editor-block-list__block[data-type="core/button"] { + display: inline-block; +} + + +.wp-block-buttons { + // 1. Reset margins on immediate innerblocks container. + > .block-editor-inner-blocks > .block-editor-block-list__layout { + margin-left: 0; + margin-right: 0; + } + + // 2. Remove paddings on subsequent immediate children. + > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block { + width: auto; + padding-left: 0; + padding-right: 0; + } + + // 3. Remove margins on subsequent Edit container. + > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit { + margin-left: 0; + margin-right: 0; + } + + // 4. Hide the block outlines. + > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit::before { + content: none; + } + + // 5. Remove vertical margins on subsequent block container. + > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit > [data-block] { + margin-top: 0; + margin-bottom: 0; + } + + // Hide the breadcrumb. + // Hide the mover. + .block-editor-block-list__breadcrumb, + .block-editor-block-mover.block-editor-block-mover { // Needs specificity. + display: none; + } + + .block-editor-inserter { + display: none; + } + + .block-editor-block-list__block[data-type="core/button"] .block-editor-block-alignment-toolbar { + display: none; + } + + .wp-block-button .wp-block-button__link { + margin-top: 0; + } +} + +.block-editor-block-list__block[data-type="core/buttons"] { + div[data-type="core/button"] div[data-block] { + display: block; + } + + .block-editor-block-list__layout { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + &[data-align="center"] .block-editor-block-list__layout { + justify-content: center; + } + + &[data-align="right"] .block-editor-block-list__layout { + justify-content: flex-end; + } + + .block-list-appender { + display: inline-block !important; + margin: 0; + } +} diff --git a/packages/block-library/src/buttons/icon.js b/packages/block-library/src/buttons/icon.js new file mode 100644 index 0000000000000..6e18a60a648fe --- /dev/null +++ b/packages/block-library/src/buttons/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js new file mode 100644 index 0000000000000..6a3ae48b99e56 --- /dev/null +++ b/packages/block-library/src/buttons/index.js @@ -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, +}; diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js new file mode 100644 index 0000000000000..91cb804231d05 --- /dev/null +++ b/packages/block-library/src/buttons/save.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save() { + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss new file mode 100644 index 0000000000000..47fb245ec0024 --- /dev/null +++ b/packages/block-library/src/buttons/style.scss @@ -0,0 +1,7 @@ +.wp-block-buttons .wp-block-button { + display: inline-block; + margin: $grid-size-small; +} +.wp-block-buttons.aligncenter { + text-align: center; +} diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 7e8652b23a3bf..11a5cffdbf8b0 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -1,6 +1,7 @@ @import "./archives/editor.scss"; @import "./audio/editor.scss"; @import "./button/editor.scss"; +@import "./buttons/editor.scss"; @import "./categories/editor.scss"; @import "./code/editor.scss"; @import "./columns/editor.scss"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 67d460b4b4b40..a2a1d01d88dc7 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -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'; @@ -105,6 +106,7 @@ export const registerCoreBlocks = () => { archives, audio, button, + buttons, calendar, categories, code, diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index fd78fcc3b18d1..7105d0788de2b 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -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"; diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js index 1cfd913292dff..40c9817455946 100644 --- a/packages/e2e-tests/fixtures/block-transforms.js +++ b/packages/e2e-tests/fixtures/block-transforms.js @@ -30,6 +30,12 @@ export const EXPECTED_TRANSFORMS = { 'Group', ], }, + core__buttons: { + originalBlock: 'Buttons', + availableTransforms: [ + 'Group', + ], + }, core__calendar: { originalBlock: 'Calendar', availableTransforms: [ diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.html b/packages/e2e-tests/fixtures/blocks/core__buttons.html new file mode 100644 index 0000000000000..e70af7acc72ad --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__buttons.html @@ -0,0 +1,11 @@ + +
+ + + + + + + +
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.json b/packages/e2e-tests/fixtures/blocks/core__buttons.json new file mode 100644 index 0000000000000..044daeb82101a --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__buttons.json @@ -0,0 +1,31 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/buttons", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/button", + "isValid": true, + "attributes": { + "text": "My button 1" + }, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_1", + "name": "core/button", + "isValid": true, + "attributes": { + "text": "My button 2" + }, + "innerBlocks": [], + "originalContent": "" + } + ], + "originalContent": "
\n\t\n\n\t\n
" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json b/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json new file mode 100644 index 0000000000000..b96b1f50db1fc --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json @@ -0,0 +1,43 @@ +[ + { + "blockName": "core/buttons", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/button", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t\n\t", + "innerContent": [ + "\n\t\n\t" + ] + }, + { + "blockName": "core/button", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t\n\t", + "innerContent": [ + "\n\t\n\t" + ] + } + ], + "innerHTML": "\n
\n\t\n\n\t\n
\n", + "innerContent": [ + "\n
\n\t", + null, + "\n\n\t", + null, + "\n
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html new file mode 100644 index 0000000000000..baf0a0226c066 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html @@ -0,0 +1,9 @@ + + +