From 8cb66241b9fb11b478496dd1ec19f65d4d87ba3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 7 Jul 2017 00:04:07 +0100 Subject: [PATCH 1/6] Create UrlInput component. --- blocks/url-input/index.js | 48 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 blocks/url-input/index.js diff --git a/blocks/url-input/index.js b/blocks/url-input/index.js new file mode 100644 index 0000000000000..3e0748c4095c4 --- /dev/null +++ b/blocks/url-input/index.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { __ } from 'i18n'; +import { Component } from 'element'; +import { IconButton } from 'components'; + +class UrlInput extends Component { + constructor() { + super( ...arguments ); + this.expand = this.expand.bind( this ); + this.state = { + expanded: false, + }; + } + + expand() { + this.setState( { expanded: true } ); + } + + render() { + const { url, onChange } = this.props; + const { expanded } = this.state; + + return ( +
+ + { ( expanded || url ) && +
event.preventDefault() }> + + + + } +
+ ); + } +} + +export default UrlInput; From 32a991d6e47f49b4533b88683dc6f39ea50c3596 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 7 Jul 2017 00:04:29 +0100 Subject: [PATCH 2/6] Add support for href value to image blocks. --- blocks/library/image/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index 187643daba69c..8dddddee0f65c 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -16,6 +16,7 @@ import TextControl from '../../inspector-controls/text-control'; import BlockControls from '../../block-controls'; import BlockAlignmentToolbar from '../../block-alignment-toolbar'; import BlockDescription from '../../block-description'; +import UrlInput from '../../url-input'; const { attr, children } = query; @@ -30,6 +31,7 @@ registerBlockType( 'core/image', { url: attr( 'img', 'src' ), alt: attr( 'img', 'alt' ), caption: children( 'figcaption' ), + href: attr( 'a', 'href' ), }, transforms: { @@ -57,13 +59,14 @@ registerBlockType( 'core/image', { }, edit( { attributes, setAttributes, focus, setFocus, className } ) { - const { url, alt, caption, align, id } = attributes; + const { url, alt, caption, align, id, href } = attributes; const updateAlt = ( newAlt ) => setAttributes( { alt: newAlt } ); const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); const onSelectImage = ( media ) => { setAttributes( { url: media.url, alt: media.alt, caption: media.caption, id: media.id } ); }; const uploadButtonProps = { isLarge: true }; + const onSetHref = ( event ) => setAttributes( { href: event.target.value } ); const controls = ( focus && ( @@ -88,6 +91,7 @@ registerBlockType( 'core/image', { + ) @@ -149,17 +153,22 @@ registerBlockType( 'core/image', { }, save( { attributes } ) { - const { url, alt, caption, align = 'none' } = attributes; + const { url, alt, caption, align = 'none', href } = attributes; const needsWrapper = [ 'wide', 'full' ].indexOf( align ) !== -1; // If there's no caption set only save the image element. if ( ! needsWrapper && ( ! caption || ! caption.length ) ) { - return {; + return href + ? { + : {; } return (
- { + { href + ? { + : { + } { caption && !! caption.length &&
{ caption }
}
); From 16d529594f1fb1d616d7881480828a73be70f653 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 7 Jul 2017 10:13:29 +0200 Subject: [PATCH 3/6] Polish link input positioning. --- blocks/library/image/style.scss | 7 +++++++ blocks/url-input/index.js | 18 +++++++++++++++--- blocks/url-input/style.scss | 3 +++ 3 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 blocks/url-input/style.scss diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 7e582a4eddd04..e239e5e125881 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -6,3 +6,10 @@ width: 100%; } } + +.editor-visual-editor__block[data-type="core/image"] { + .editable-format-toolbar__link-modal { + top: $block-controls-height - 2; + left: 0; + } +} diff --git a/blocks/url-input/index.js b/blocks/url-input/index.js index 3e0748c4095c4..426743acaec70 100644 --- a/blocks/url-input/index.js +++ b/blocks/url-input/index.js @@ -1,6 +1,12 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ +import './style.scss'; import { __ } from 'i18n'; import { Component } from 'element'; import { IconButton } from 'components'; @@ -23,8 +29,14 @@ class UrlInput extends Component { const { expanded } = this.state; return ( -
- +
  • + { ( expanded || url ) &&
    } -
    • + ); } } diff --git a/blocks/url-input/style.scss b/blocks/url-input/style.scss new file mode 100644 index 0000000000000..62344f564f028 --- /dev/null +++ b/blocks/url-input/style.scss @@ -0,0 +1,3 @@ +ul.components-toolbar > li.components-url-input { + position: inherit; // let the dialog position according to parent +} From 4c20e5eba8a7c84f9bae1b8fd1e84a1bec12ac00 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 7 Jul 2017 10:48:54 +0200 Subject: [PATCH 4/6] Push some more polish --- blocks/library/image/style.scss | 2 +- blocks/url-input/index.js | 3 ++- blocks/url-input/style.scss | 15 +++++++++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index e239e5e125881..53924fa6b9b3f 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -9,7 +9,7 @@ .editor-visual-editor__block[data-type="core/image"] { .editable-format-toolbar__link-modal { - top: $block-controls-height - 2; + top: 0; left: 0; } } diff --git a/blocks/url-input/index.js b/blocks/url-input/index.js index 426743acaec70..b22e85d469fd7 100644 --- a/blocks/url-input/index.js +++ b/blocks/url-input/index.js @@ -21,7 +21,7 @@ class UrlInput extends Component { } expand() { - this.setState( { expanded: true } ); + this.setState( { expanded: ! this.state.expanded } ); } render() { @@ -41,6 +41,7 @@ class UrlInput extends Component {
    event.preventDefault() }> + li.components-url-input { position: inherit; // let the dialog position according to parent } + +.components-url-input .components-url-input__back { + margin-right: 4px; + overflow: visible; + + &::after { + content: ''; + position: absolute; + display: block; + width: 1px; + height: 24px; + right: -1px; + background: $light-gray-500; + } +} From e0a787fd2eb2ffa94f06bb0fb51327036b384965 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 7 Jul 2017 11:06:40 +0100 Subject: [PATCH 5/6] Handle already set url and dismiss link input when submitting link with enter. --- blocks/url-input/index.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/blocks/url-input/index.js b/blocks/url-input/index.js index b22e85d469fd7..08b33baa9373d 100644 --- a/blocks/url-input/index.js +++ b/blocks/url-input/index.js @@ -14,16 +14,22 @@ import { IconButton } from 'components'; class UrlInput extends Component { constructor() { super( ...arguments ); - this.expand = this.expand.bind( this ); + this.toggle = this.toggle.bind( this ); + this.submitLink = this.submitLink.bind( this ); this.state = { expanded: false, }; } - expand() { + toggle() { this.setState( { expanded: ! this.state.expanded } ); } + submitLink( event ) { + event.preventDefault(); + this.toggle(); + } + render() { const { url, onChange } = this.props; const { expanded } = this.state; @@ -32,16 +38,16 @@ class UrlInput extends Component {
  • - { ( expanded || url ) && + /> + { expanded && event.preventDefault() }> - + onSubmit={ ( event ) => this.submitLink( event ) }> + Date: Fri, 7 Jul 2017 14:31:37 +0100 Subject: [PATCH 6/6] Code style cleanup. --- blocks/library/image/index.js | 12 ++++++------ blocks/url-input/index.js | 3 +-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index 8dddddee0f65c..53e14f66e3982 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -158,17 +158,17 @@ registerBlockType( 'core/image', { // If there's no caption set only save the image element. if ( ! needsWrapper && ( ! caption || ! caption.length ) ) { + const imageWithAlignment = {; return href - ? { - : {; + ? { imageWithAlignment } + : imageWithAlignment; } + const image = {; + return (
    - { href - ? { - : { - } + { href ? { image } : image } { caption && !! caption.length &&
    { caption }
    }
    ); diff --git a/blocks/url-input/index.js b/blocks/url-input/index.js index 08b33baa9373d..e962c35404a8d 100644 --- a/blocks/url-input/index.js +++ b/blocks/url-input/index.js @@ -46,12 +46,11 @@ class UrlInput extends Component { { expanded && this.submitLink( event ) }> + onSubmit={ this.submitLink }>