diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js index 1d84ca97c89d8..65c24f1e7cac5 100644 --- a/blocks/editable/format-toolbar/index.js +++ b/blocks/editable/format-toolbar/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { Fill } from 'react-slot-fill'; + /** * WordPress dependencies */ @@ -172,32 +177,36 @@ class FormatToolbar extends Component { { ( isAddingLink || isEditingLink ) && -
- - - - - { linkSettings } - + +
+ + + + + { linkSettings } + +
} { !! formats.link && ! isAddingLink && ! isEditingLink && - + + + } ); diff --git a/blocks/editable/index.js b/blocks/editable/index.js index b778fef6a6ce6..99fce7bec187b 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -15,7 +15,7 @@ import { noop, } from 'lodash'; import { nodeListToReact } from 'dom-react'; -import { Fill } from 'react-slot-fill'; +import { Fill, Slot } from 'react-slot-fill'; import 'element-closest'; /** @@ -325,9 +325,9 @@ export default class Editable extends Component { // is absolute positioned and it's not shown when we compute the position here // so we compute the position about its parent relative position and adds the offset const toolbarOffset = this.props.inlineToolbar ? - { top: 50, left: 0 } : - { top: 40, left: -( ( blockPadding * 2 ) + blockMoverMargin ) }; - const linkModalWidth = 250; + { top: 10, left: 0 } : + { top: 0, left: -( ( blockPadding * 2 ) + blockMoverMargin ) }; + const linkModalWidth = 305; return { top: position.top - containerPosition.top + ( position.height ) + toolbarOffset.top, @@ -709,6 +709,7 @@ export default class Editable extends Component { { MultilineTag ? { placeholder } : placeholder } } + { focus && } ); }