Fix link dialog position

WordPress · Oct 30, 2017 · 970b10f · 970b10f
1 parent c5ebeca
commit 970b10f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git 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 {
 				<Toolbar controls={ toolbarControls } />
 
 				{ ( isAddingLink || isEditingLink ) &&
-					<form
-						className="blocks-format-toolbar__link-modal"
-						style={ linkStyle }
-						onSubmit={ this.submitLink }>
-						<UrlInput value={ newLinkValue } onChange={ this.onChangeLinkValue } />
-						<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
-						<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
-						<IconButton icon="admin-generic" onClick={ this.toggleLinkSettingsVisibility } aria-expanded={ settingsVisible } />
-						{ linkSettings }
-					</form>
+					<Fill name="Formatting.LinkDialog">
+						<form
+							className="blocks-format-toolbar__link-modal"
+							style={ linkStyle }
+							onSubmit={ this.submitLink }>
+							<UrlInput value={ newLinkValue } onChange={ this.onChangeLinkValue } />
+							<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
+							<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
+							<IconButton icon="admin-generic" onClick={ this.toggleLinkSettingsVisibility } aria-expanded={ settingsVisible } />
+							{ linkSettings }
+						</form>
+					</Fill>
 				}
 
 				{ !! formats.link && ! isAddingLink && ! isEditingLink &&
-					<div className="blocks-format-toolbar__link-modal" style={ linkStyle }>
-						<a
-							className="blocks-format-toolbar__link-value"
-							href={ formats.link.value }
-							target="_blank"
-						>
-							{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
-						</a>
-						<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
-						<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
-						<IconButton icon="admin-generic" onClick={ this.toggleLinkSettingsVisibility } aria-expanded={ settingsVisible } />
-						{ linkSettings }
-					</div>
+					<Fill name="Formatting.LinkDialog">
+						<div className="blocks-format-toolbar__link-modal" style={ linkStyle }>
+							<a
+								className="blocks-format-toolbar__link-value"
+								href={ formats.link.value }
+								target="_blank"
+							>
+								{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
+							</a>
+							<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
+							<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
+							<IconButton icon="admin-generic" onClick={ this.toggleLinkSettingsVisibility } aria-expanded={ settingsVisible } />
+							{ linkSettings }
+						</div>
+					</Fill>
 				}
 			</div>
 		);

diff --git 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 ? <MultilineTag>{ placeholder }</MultilineTag> : placeholder }
 					</Tagname>
 				}
+				{ focus && <Slot name="Formatting.LinkDialog" /> }
 			</div>
 		);
 	}