diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js new file mode 100644 index 0000000000000..dfa919c868765 --- /dev/null +++ b/blocks/library/button/index.js @@ -0,0 +1,109 @@ +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlock, query } from 'api'; +import Editable from 'components/editable'; +import IconButton from '../../../editor/components/icon-button'; + +const { attr, children } = query; + +/** + * Returns an attribute setter with behavior that if the target value is + * already the assigned attribute value, it will be set to undefined. + * + * @param {string} align Alignment value + * @return {Function} Attribute setter + */ +function applyOrUnset( align ) { + return ( attributes, setAttributes ) => { + const nextAlign = attributes.align === align ? undefined : align; + setAttributes( { align: nextAlign } ); + }; +} + +registerBlock( 'core/button', { + title: wp.i18n.__( 'Button' ), + + icon: 'marker', + + category: 'common', + + attributes: { + url: attr( 'a', 'href' ), + title: attr( 'a', 'title' ), + text: children( 'a' ), + align: ( node ) => ( node.className.match( /\balign(\S+)/ ) || [] )[ 1 ] + }, + + controls: [ + { + icon: 'align-left', + title: wp.i18n.__( 'Align left' ), + isActive: ( { align } ) => 'left' === align, + onClick: applyOrUnset( 'left' ) + }, + { + icon: 'align-center', + title: wp.i18n.__( 'Align center' ), + isActive: ( { align } ) => 'center' === align, + onClick: applyOrUnset( 'center' ) + }, + { + icon: 'align-right', + title: wp.i18n.__( 'Align right' ), + isActive: ( { align } ) => 'right' === align, + onClick: applyOrUnset( 'right' ) + } + ], + + getEditWrapperProps( attributes ) { + const { align } = attributes; + if ( 'left' === align || 'right' === align || 'center' === align ) { + return { 'data-align': align }; + } + }, + + edit( { attributes, setAttributes, focus, setFocus } ) { + const { text, url, title } = attributes; + + return ( + + setAttributes( { text: value } ) } + /> + { focus && +
event.preventDefault() }> + setAttributes( { url: event.target.value } ) } + placeholder={ wp.i18n.__( 'Paste URL or type' ) } + /> + + + } +
+ ); + }, + + save( { attributes } ) { + const { url, text, title, align = 'none' } = attributes; + + return ( +
+ + { text } + +
+ ); + } +} ); diff --git a/blocks/library/button/style.scss b/blocks/library/button/style.scss new file mode 100644 index 0000000000000..9c650594a4bd2 --- /dev/null +++ b/blocks/library/button/style.scss @@ -0,0 +1,61 @@ +.blocks-button { + font-family: $default-font; + display: inline-block; + text-decoration: none; + font-size: 17px; + line-height: 1.5; + margin: 0; + padding: 6px 14px; + cursor: default; + border-width: 1px; + border-style: solid; + border-radius: 2px; + white-space: nowrap; + box-sizing: border-box; + background: $blue-medium; + color: $white; + border-color: $blue-wordpress; + vertical-align: top; + position: relative; + + &:hover { + color: $white; + } + + .editable-format-toolbar__link-modal { + top: -1px; + left: calc( 100% + 12px ); + } +} + +.blocks-button__link { + position: absolute; + right: -32px; + top: 5px; + color: $dark-gray-500; + text-decoration: none; + + &:hover { + color: $dark-gray-300; + } + + .dashicon { + vertical-align: middle; + } +} + +.editor-visual-editor__block[data-type="core/button"] { + &[data-align="center"] { + text-align: center; + } + + &[data-align="right"] { + text-align: right; + + .editable-format-toolbar__link-modal { + top: -1px; + left: auto; + right: calc( 100% + 12px ); + } + } +} diff --git a/blocks/library/index.js b/blocks/library/index.js index 4c2d81d114e10..9a0e2eaa95540 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -6,3 +6,4 @@ import './text'; import './list'; import './quote'; import './separator'; +import './button'; diff --git a/post-content.js b/post-content.js index bbadbcddb7b80..b0285e4bb022e 100644 --- a/post-content.js +++ b/post-content.js @@ -8,6 +8,10 @@ window._wpGutenbergPost = { '

1.0 Is The Loneliest Number

', '', + '', + '
Gutenberg on GitHub
', + '', + '', '

I imagine prior to the launch of the iPod, or the iPhone, there were teams saying the same thing: the copy + paste guys are so close to being ready and we know Walt Mossberg is going to ding us for this so let\'s just not ship to the manufacturers in China for just a few more weeks… The Apple teams were probably embarrassed. But if you\'re not embarrassed when you ship your first version you waited too long.

', '',