Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image block: fix replace link control styling #33326

Merged
merged 5 commits into from
Jul 19, 2021
Merged

Image block: fix replace link control styling #33326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9311b75
Conditionalise display of wrapping “tools” div
getdave Jul 9, 2021
c6d9726
Align items visually to top of control below “Current media URL:” text
getdave Jul 9, 2021
b2d3dab
Extract default settings to root component scope to ensure tools div …
getdave Jul 9, 2021
64af8e2
Add space between label and input
getdave Jul 9, 2021
691f276
Fix popover resizing when switching between edit and preview mode
getdave Jul 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/block-editor/src/components/link-control/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

// Used as a unique identifier for the "Create" option within search results.
// Used to help distinguish the "Create" suggestion within the search results in
// order to handle it as a unique case.
export const CREATE_TYPE = '__CREATE__';

export const DEFAULT_LINK_SETTINGS = [
{
id: 'opensInNewTab',
title: __( 'Open in new tab' ),
},
];
44 changes: 26 additions & 18 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import LinkControlSearchInput from './search-input';
import LinkPreview from './link-preview';
import useCreatePage from './use-create-page';
import { ViewerFill } from './viewer-slot';
import { DEFAULT_LINK_SETTINGS } from './constants';

/**
* Default properties associated with a link control value.
Expand Down Expand Up @@ -104,7 +105,7 @@ import { ViewerFill } from './viewer-slot';
function LinkControl( {
searchInputPlaceholder,
value,
settings,
settings = DEFAULT_LINK_SETTINGS,
onChange = noop,
onRemove,
noDirectEntry = false,
Expand Down Expand Up @@ -190,6 +191,11 @@ function LinkControl( {
stopEditing();
};

const shownUnlinkControl =
onRemove && value && ! isEditingLink && ! isCreatingPage;

const showSettingsDrawer = !! settings?.length;

return (
<div
tabIndex={ -1 }
Expand Down Expand Up @@ -261,23 +267,25 @@ function LinkControl( {
/>
) }

<div className="block-editor-link-control__tools">
<LinkControlSettingsDrawer
value={ value }
settings={ settings }
onChange={ onChange }
/>
{ onRemove && value && ! isEditingLink && ! isCreatingPage && (
<Button
className="block-editor-link-control__unlink"
isDestructive
variant="link"
onClick={ onRemove }
>
{ __( 'Unlink' ) }
</Button>
) }
</div>
{ ( showSettingsDrawer || shownUnlinkControl ) && (
<div className="block-editor-link-control__tools">
<LinkControlSettingsDrawer
value={ value }
settings={ settings }
onChange={ onChange }
/>
{ shownUnlinkControl && (
<Button
className="block-editor-link-control__unlink"
isDestructive
variant="link"
onClick={ onRemove }
>
{ __( 'Unlink' ) }
</Button>
) }
</div>
) }
</div>
);
}
Expand Down
13 changes: 1 addition & 12 deletions packages/block-editor/src/components/link-control/settings-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,7 @@ import { noop } from 'lodash';
import { __ } from '@wordpress/i18n';
import { ToggleControl, VisuallyHidden } from '@wordpress/components';

const defaultSettings = [
{
id: 'opensInNewTab',
title: __( 'Open in new tab' ),
},
];

const LinkControlSettingsDrawer = ( {
value,
onChange = noop,
settings = defaultSettings,
} ) => {
const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
if ( ! settings || ! settings.length ) {
return null;
}
Expand Down
13 changes: 9 additions & 4 deletions packages/block-editor/src/components/media-replace-flow/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,24 @@
padding: $grid-unit-15 $grid-unit-30 0;

.block-editor-media-replace-flow__image-url-label {
display: block;
top: $grid-unit-20;
margin-bottom: $grid-unit-10;
}

.block-editor-link-control {
margin-top: -16px;
width: auto;
width: 200px; // hardcoded width avoids resizing of control when switching between preview/edit

.block-editor-url-input {
padding: 0; // cancel unnecessary default 1px padding in this case
}

.components-base-control .components-base-control__field {
margin-bottom: 0;
}

.block-editor-link-control__search-item-title {
max-width: 180px;
margin-top: $grid-unit-20;
}

.block-editor-link-control__search-item.is-current {
Expand All @@ -45,11 +49,12 @@
}

.block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] {
margin: 16px 0 0 0;
margin: 0;
width: 100%;
}

.block-editor-link-control__search-actions {
top: 0; // cancel default top positioning
right: 4px;
}
}
Expand Down