From 5d681f7dacbfb7d2ce93bee1c1bd4d325f13a81f Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 14 Sep 2021 10:06:03 -0400 Subject: [PATCH 01/48] Add initial UI for Image Link To options Displays "Media" and "Attachment Page" options within the Link To settings for the Image block. The logic does not work for the new options, and the implementation is rudimentary. Several `TODO(David)` are in place for remaining work. --- .../block-settings/container.native.js | 7 ++ .../block-library/src/image/edit.native.js | 7 ++ packages/components/src/index.native.js | 1 + .../image-options-screen.native.js | 92 +++++++++++++++++++ .../link-settings-screen.native.js | 17 +++- .../mobile/link-settings/style.native.scss | 5 + 6 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 packages/components/src/mobile/link-settings/image-options-screen.native.js diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 7f9d8a9073d39..0a4e33627e420 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -6,6 +6,7 @@ import { BottomSheet, ColorSettings, FocalPointSettingsPanel, + ImageOptionsScreen, LinkPickerScreen, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; @@ -21,6 +22,7 @@ export const blockSettingsScreens = { color: 'Color', focalPoint: 'FocalPoint', linkPicker: 'linkPicker', + imageOptions: 'imageOptions', }; function BottomSheetSettings( { @@ -75,6 +77,11 @@ function BottomSheetSettings( { returnScreenName={ blockSettingsScreens.settings } /> + + + ); diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1233abbcdca60..34776a840922e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -41,6 +41,7 @@ import { BlockAlignmentToolbar, BlockStyles, store as blockEditorStore, + blockSettingsScreens, } from '@wordpress/block-editor'; import { __, _x, sprintf } from '@wordpress/i18n'; import { getProtocol, hasQueryArg } from '@wordpress/url'; @@ -402,6 +403,7 @@ export class ImageEdit extends Component { const { isLinkSheetVisible } = this.state; const { attributes: { href: url, ...unMappedAttributes }, + image = {}, } = this.props; const mappedAttributes = { ...unMappedAttributes, url }; @@ -418,6 +420,11 @@ export class ImageEdit extends Component { hasPicker options={ this.linkSettingsOptions } showIcon={ false } + precursorScreenName={ blockSettingsScreens.imageOptions } + // TODO(David): Passing the URLs feels forced, can it be apart of the + // above `precursorScreen#` prop? + imageUrl={ image.url } + attachmentPageUrl={ image.link } /> ); } diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 626c3f03da0ba..712fa97ba63fa 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -102,6 +102,7 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc export { default as LinkSettings } from './mobile/link-settings'; export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen'; export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation'; +export { default as ImageOptionsScreen } from './mobile/link-settings/image-options-screen'; export { default as SegmentedControl } from './mobile/segmented-control'; export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image'; export { default as ImageEditingButton } from './mobile/image/image-editing-button'; diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js new file mode 100644 index 0000000000000..f8d6ac61f62d6 --- /dev/null +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -0,0 +1,92 @@ +/** + * External dependencies + */ +import { useNavigation, useRoute } from '@react-navigation/native'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Icon, chevronRight } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import Cell from '../bottom-sheet/cell'; +import styles from './style.scss'; +import PanelBody from '../../panel/body'; +import BottomSheet from '../bottom-sheet'; + +// TODO(David): Rename this component, file, and screen to better communicate +// intent +function ImageOptionsScreen( props ) { + const navigation = useNavigation(); + const route = useRoute(); + const { url = '' } = props; + const { inputValue = url, imageUrl, attachmentPageUrl, setAttributes } = + route.params || {}; + + function goToLinkPicker() { + navigation.navigate( 'linkPicker', { inputValue } ); + } + + const setLinkToUrl = ( updatedUrl ) => () => { + // TODO(David): Most of the logic for updatting the attributes is contained + // within LinkSettings. We may need to create an abstracted hook. + // `setAttributes` is likely not enough. + // eslint-disable-next-line no-console + setAttributes( { url: updatedUrl } ); + navigation.goBack(); + }; + + // TODO(David): Need to have a "active" status indicator (e.g. check mark) to + // designate which option is selected. Could we compare the URLs to determine + // which is active? + return ( + <> + + + + { __( 'Link To' ) } + + + + + + + + + + + + + + + + + + ); +} + +export default ImageOptionsScreen; diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js index cf81843d6ee16..31b2a99909158 100644 --- a/packages/components/src/mobile/link-settings/link-settings-screen.native.js +++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js @@ -16,11 +16,24 @@ import LinkSettings from './'; const LinkSettingsScreen = ( props ) => { const navigation = useNavigation(); const route = useRoute(); - const { url = '' } = props; + const { imageUrl, attachmentPageUrl, setAttributes, url = '' } = props; const { inputValue = url } = route.params || {}; const onLinkCellPressed = () => { - navigation.navigate( 'linkPicker', { inputValue } ); + if ( props.precursorScreenName ) { + // TODO(David): Passing `setAttributes` throws a warning, we should avoid + // passing it here. Additionally, `imageUrl` and `attachmentPage` are very + // specific to this specific Image use case, can we relocate it into + // `image/edit` with a callback instead of a screen name string? + navigation.navigate( props.precursorScreenName, { + inputValue, + setAttributes, + imageUrl, + attachmentPageUrl, + } ); + } else { + navigation.navigate( 'linkPicker', { inputValue } ); + } }; return useMemo( () => { diff --git a/packages/components/src/mobile/link-settings/style.native.scss b/packages/components/src/mobile/link-settings/style.native.scss index b9545b80ec4ab..bb18e79ad8e6b 100644 --- a/packages/components/src/mobile/link-settings/style.native.scss +++ b/packages/components/src/mobile/link-settings/style.native.scss @@ -2,3 +2,8 @@ padding-left: 0; padding-right: 0; } + +// used in both light and dark modes +.placeholderColor { + color: #87a6bc; +} From 2232a485f32e7391db897a157acb3417cf164e57 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 14 Sep 2021 11:05:29 -0400 Subject: [PATCH 02/48] Intercept link settings navigation with callback instead of string Using a callback avoids placing context-specific props reference inside of link settings. I.e. `imageUrl` and `attachmentPageUrl` are no longer referenced within link settings. --- packages/block-library/src/image/edit.native.js | 15 ++++++++++----- .../link-settings-screen.native.js | 17 ++++------------- 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 34776a840922e..1f0fc4bbecfa4 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -420,11 +420,16 @@ export class ImageEdit extends Component { hasPicker options={ this.linkSettingsOptions } showIcon={ false } - precursorScreenName={ blockSettingsScreens.imageOptions } - // TODO(David): Passing the URLs feels forced, can it be apart of the - // above `precursorScreen#` prop? - imageUrl={ image.url } - attachmentPageUrl={ image.link } + onLinkCellPressed={ ( { inputValue, navigation } ) => { + // TODO(David): Passing `setAttributes` throws a warning, we should avoid + // passing it here. + navigation.navigate( blockSettingsScreens.imageOptions, { + inputValue, + setAttributes: this.setMappedAttributes, + imageUrl: image.url, + attachmentPageUrl: image.link, + } ); + } } /> ); } diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js index 31b2a99909158..c841085c591d3 100644 --- a/packages/components/src/mobile/link-settings/link-settings-screen.native.js +++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js @@ -16,21 +16,12 @@ import LinkSettings from './'; const LinkSettingsScreen = ( props ) => { const navigation = useNavigation(); const route = useRoute(); - const { imageUrl, attachmentPageUrl, setAttributes, url = '' } = props; + const { url = '' } = props; const { inputValue = url } = route.params || {}; const onLinkCellPressed = () => { - if ( props.precursorScreenName ) { - // TODO(David): Passing `setAttributes` throws a warning, we should avoid - // passing it here. Additionally, `imageUrl` and `attachmentPage` are very - // specific to this specific Image use case, can we relocate it into - // `image/edit` with a callback instead of a screen name string? - navigation.navigate( props.precursorScreenName, { - inputValue, - setAttributes, - imageUrl, - attachmentPageUrl, - } ); + if ( props.onLinkCellPressed ) { + props.onLinkCellPressed( { inputValue, navigation } ); } else { navigation.navigate( 'linkPicker', { inputValue } ); } @@ -39,11 +30,11 @@ const LinkSettingsScreen = ( props ) => { return useMemo( () => { return ( ); }, [ props, inputValue, navigation, route ] ); From 5dbc530713dad5c978ec157c4ddc1cf411d54a8d Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 14 Sep 2021 15:41:25 -0400 Subject: [PATCH 03/48] Align labels with web UI Reusing label text from the web will likely increase familiarity and reduce confusion for users. --- .../src/mobile/link-settings/image-options-screen.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index f8d6ac61f62d6..6617ee4868272 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -59,7 +59,7 @@ function ImageOptionsScreen( props ) { @@ -73,7 +73,7 @@ function ImageOptionsScreen( props ) { Date: Tue, 14 Sep 2021 16:03:22 -0400 Subject: [PATCH 04/48] Display selected link to option in Image block settings Display the currently selected link to option in the top-level Image block settings. --- .../block-library/src/image/edit.native.js | 57 ++++++++++++------- .../mobile/bottom-sheet/link-cell.native.js | 15 ++++- .../image-options-screen.native.js | 29 ++++++++-- .../src/mobile/link-settings/index.native.js | 1 + 4 files changed, 71 insertions(+), 31 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1f0fc4bbecfa4..b82174095ff31 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -109,25 +109,6 @@ export class ImageEdit extends Component { ); this.setMappedAttributes = this.setMappedAttributes.bind( this ); this.onSizeChangeValue = this.onSizeChangeValue.bind( this ); - - this.linkSettingsOptions = { - url: { - label: __( 'Image Link URL' ), - placeholder: __( 'Add URL' ), - autoFocus: false, - autoFill: true, - }, - openInNewTab: { - label: __( 'Open in new tab' ), - }, - linkRel: { - label: __( 'Link Rel' ), - placeholder: _x( - 'None', - 'Link rel attribute value placeholder' - ), - }, - }; } componentDidMount() { @@ -390,12 +371,10 @@ export class ImageEdit extends Component { return href === undefined ? setAttributes( { ...restAttributes, - linkDestination: LINK_DESTINATION_CUSTOM, } ) : setAttributes( { ...restAttributes, href, - linkDestination: LINK_DESTINATION_CUSTOM, } ); } @@ -407,6 +386,40 @@ export class ImageEdit extends Component { } = this.props; const mappedAttributes = { ...unMappedAttributes, url }; + let placeholder; + switch ( mappedAttributes.linkDestination ) { + case LINK_DESTINATION_MEDIA: + placeholder = __( 'Media File' ); + break; + case LINK_DESTINATION_ATTACHMENT: + placeholder = __( 'Attachment Page' ); + break; + case LINK_DESTINATION_CUSTOM: + placeholder = __( 'Custom URL' ); + break; + default: + placeholder = __( 'None' ); + break; + } + + const linkSettingsOptions = { + url: { + placeholder, + autoFocus: false, + autoFill: true, + }, + openInNewTab: { + label: __( 'Open in new tab' ), + }, + linkRel: { + label: __( 'Link Rel' ), + placeholder: _x( + 'None', + 'Link rel attribute value placeholder' + ), + }, + }; + return ( { // TODO(David): Passing `setAttributes` throws a warning, we should avoid diff --git a/packages/components/src/mobile/bottom-sheet/link-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-cell.native.js index 4d3c2f61a7fd8..746cfe686d852 100644 --- a/packages/components/src/mobile/bottom-sheet/link-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-cell.native.js @@ -12,14 +12,23 @@ import styles from './styles.scss'; const { placeholderColor } = styles; -export default function LinkCell( { value, onPress, showIcon = true } ) { +export default function LinkCell( { + value, + placeholder, + onPress, + showIcon = true, +} ) { return ( diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 6617ee4868272..7956461be04ab 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -17,6 +17,10 @@ import styles from './style.scss'; import PanelBody from '../../panel/body'; import BottomSheet from '../bottom-sheet'; +const LINK_DESTINATION_NONE = 'none'; +const LINK_DESTINATION_MEDIA = 'media'; +const LINK_DESTINATION_ATTACHMENT = 'attachment'; + // TODO(David): Rename this component, file, and screen to better communicate // intent function ImageOptionsScreen( props ) { @@ -30,12 +34,23 @@ function ImageOptionsScreen( props ) { navigation.navigate( 'linkPicker', { inputValue } ); } - const setLinkToUrl = ( updatedUrl ) => () => { + const setLinkDestination = ( linkDestination ) => () => { + let newUrl; + switch ( linkDestination ) { + case LINK_DESTINATION_MEDIA: + newUrl = imageUrl; + break; + case LINK_DESTINATION_ATTACHMENT: + newUrl = attachmentPageUrl; + break; + default: + newUrl = null; + break; + } // TODO(David): Most of the logic for updatting the attributes is contained // within LinkSettings. We may need to create an abstracted hook. // `setAttributes` is likely not enough. - // eslint-disable-next-line no-console - setAttributes( { url: updatedUrl } ); + setAttributes( { url: newUrl, linkDestination } ); navigation.goBack(); }; @@ -54,21 +69,23 @@ function ImageOptionsScreen( props ) { diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index eaa00bf26ba25..19b58ec6b11a1 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -224,6 +224,7 @@ function LinkSettings( { { options.url && ( onLinkCellPressed ? ( Date: Wed, 15 Sep 2021 08:54:10 -0400 Subject: [PATCH 05/48] Reset link destination to None when removing Custom URL --- packages/block-library/src/image/edit.native.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b82174095ff31..016b1e66c6701 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -64,6 +64,7 @@ import styles from './styles.scss'; import { getUpdatedLinkTargetSettings } from './utils'; import { + LINK_DESTINATION_NONE, LINK_DESTINATION_CUSTOM, LINK_DESTINATION_ATTACHMENT, LINK_DESTINATION_MEDIA, @@ -367,13 +368,23 @@ export class ImageEdit extends Component { setMappedAttributes( { url: href, ...restAttributes } ) { const { setAttributes } = this.props; + let linkDestination; + if ( restAttributes.linkDestination ) { + linkDestination = restAttributes.linkDestination; + } else if ( ! href && ! restAttributes.linkDestination ) { + linkDestination = LINK_DESTINATION_NONE; + } else { + linkDestination = LINK_DESTINATION_CUSTOM; + } return href === undefined ? setAttributes( { ...restAttributes, + linkDestination, } ) : setAttributes( { ...restAttributes, + linkDestination, href, } ); } From caa5aeb8aa706ebe0cfeb6ce34e00d06c070eedf Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 09:05:52 -0400 Subject: [PATCH 06/48] Indicate selected link to option with check mark icon --- .../block-library/src/image/edit.native.js | 1 + .../image-options-screen.native.js | 56 +++++++++++++------ 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 016b1e66c6701..8bdfed5a85aa3 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -449,6 +449,7 @@ export class ImageEdit extends Component { // passing it here. navigation.navigate( blockSettingsScreens.imageOptions, { inputValue, + linkDestination: this.props.attributes.linkDestination, setAttributes: this.setMappedAttributes, imageUrl: image.url, attachmentPageUrl: image.link, diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 7956461be04ab..4040abfcde0aa 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -7,7 +7,7 @@ import { useNavigation, useRoute } from '@react-navigation/native'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Icon, chevronRight } from '@wordpress/icons'; +import { Icon, check, chevronRight } from '@wordpress/icons'; /** * Internal dependencies @@ -20,6 +20,7 @@ import BottomSheet from '../bottom-sheet'; const LINK_DESTINATION_NONE = 'none'; const LINK_DESTINATION_MEDIA = 'media'; const LINK_DESTINATION_ATTACHMENT = 'attachment'; +const LINK_DESTINATION_CUSTOM = 'custom'; // TODO(David): Rename this component, file, and screen to better communicate // intent @@ -27,16 +28,21 @@ function ImageOptionsScreen( props ) { const navigation = useNavigation(); const route = useRoute(); const { url = '' } = props; - const { inputValue = url, imageUrl, attachmentPageUrl, setAttributes } = - route.params || {}; + const { + inputValue = url, + imageUrl, + attachmentPageUrl, + setAttributes, + linkDestination, + } = route.params || {}; function goToLinkPicker() { navigation.navigate( 'linkPicker', { inputValue } ); } - const setLinkDestination = ( linkDestination ) => () => { + const setLinkDestination = ( newLinkDestination ) => () => { let newUrl; - switch ( linkDestination ) { + switch ( newLinkDestination ) { case LINK_DESTINATION_MEDIA: newUrl = imageUrl; break; @@ -50,13 +56,13 @@ function ImageOptionsScreen( props ) { // TODO(David): Most of the logic for updatting the attributes is contained // within LinkSettings. We may need to create an abstracted hook. // `setAttributes` is likely not enough. - setAttributes( { url: newUrl, linkDestination } ); + setAttributes( { url: newUrl, linkDestination: newLinkDestination } ); navigation.goBack(); }; - // TODO(David): Need to have a "active" status indicator (e.g. check mark) to - // designate which option is selected. Could we compare the URLs to determine - // which is active? + // TODO(David): Non-selected items do not display an icon, which causes + // misalignment with the selected item. We need to update Cell to support the + // use case of retaining space on the left side for a conditional icon. return ( <> @@ -67,29 +73,43 @@ function ImageOptionsScreen( props ) { - - + /> - - + /> - - + /> Date: Wed, 15 Sep 2021 12:14:20 -0400 Subject: [PATCH 07/48] Fix comment typo --- packages/components/src/mobile/bottom-sheet/link-cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/link-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-cell.native.js index 746cfe686d852..e268a8d9dee68 100644 --- a/packages/components/src/mobile/bottom-sheet/link-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-cell.native.js @@ -24,7 +24,7 @@ export default function LinkCell( { label={ __( 'Link to' ) } // since this is not actually editable, we treat value as a placeholder value={ value || placeholder || __( 'Search or type URL' ) } - // TODO(David): Toggling placeholder styles based on precense of custom + // TODO(David): Toggling placeholder styles based on presence of custom // placeholder text is confusing. We need to find a better approach. valueStyle={ !! ( value || placeholder ) ? undefined : placeholderColor From 5cb29af474fd01a94e7aa6565ee8ffa081660803 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 13:44:27 -0400 Subject: [PATCH 08/48] Display correct value mask when URL value is set Relying upon the `placeholder` did not work correctly whenever a `value` was set, i.e. in the case of a Custom URL. Additionally, overloading the `placeholder` prop is confusing. The new `valueMask` prop hopefully better communicates the intent. --- packages/block-library/src/image/edit.native.js | 12 ++++++------ .../src/mobile/bottom-sheet/link-cell.native.js | 8 +++----- .../src/mobile/link-settings/index.native.js | 2 +- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 8bdfed5a85aa3..01a46c837f122 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -397,25 +397,25 @@ export class ImageEdit extends Component { } = this.props; const mappedAttributes = { ...unMappedAttributes, url }; - let placeholder; + let valueMask; switch ( mappedAttributes.linkDestination ) { case LINK_DESTINATION_MEDIA: - placeholder = __( 'Media File' ); + valueMask = __( 'Media File' ); break; case LINK_DESTINATION_ATTACHMENT: - placeholder = __( 'Attachment Page' ); + valueMask = __( 'Attachment Page' ); break; case LINK_DESTINATION_CUSTOM: - placeholder = __( 'Custom URL' ); + valueMask = __( 'Custom URL' ); break; default: - placeholder = __( 'None' ); + valueMask = __( 'None' ); break; } const linkSettingsOptions = { url: { - placeholder, + valueMask, autoFocus: false, autoFill: true, }, diff --git a/packages/components/src/mobile/bottom-sheet/link-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-cell.native.js index e268a8d9dee68..3e4ee90552b9c 100644 --- a/packages/components/src/mobile/bottom-sheet/link-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/link-cell.native.js @@ -14,7 +14,7 @@ const { placeholderColor } = styles; export default function LinkCell( { value, - placeholder, + valueMask, onPress, showIcon = true, } ) { @@ -23,11 +23,9 @@ export default function LinkCell( { icon={ showIcon && link } label={ __( 'Link to' ) } // since this is not actually editable, we treat value as a placeholder - value={ value || placeholder || __( 'Search or type URL' ) } - // TODO(David): Toggling placeholder styles based on presence of custom - // placeholder text is confusing. We need to find a better approach. + value={ valueMask || value || __( 'Search or type URL' ) } valueStyle={ - !! ( value || placeholder ) ? undefined : placeholderColor + !! ( value || valueMask ) ? undefined : placeholderColor } onPress={ onPress } > diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index 19b58ec6b11a1..8486c0d6a90f6 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -224,9 +224,9 @@ function LinkSettings( { { options.url && ( onLinkCellPressed ? ( ) : ( From 3dde454427b01556243ad19e8ecbd9eca9f2a541 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 14:26:48 -0400 Subject: [PATCH 09/48] Reference Cell attached to BottomSheet component Avoid superfluous import. --- .../link-settings/image-options-screen.native.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 4040abfcde0aa..5fcb6cc2e8a34 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -12,7 +12,6 @@ import { Icon, check, chevronRight } from '@wordpress/icons'; /** * Internal dependencies */ -import Cell from '../bottom-sheet/cell'; import styles from './style.scss'; import PanelBody from '../../panel/body'; import BottomSheet from '../bottom-sheet'; @@ -72,7 +71,7 @@ function ImageOptionsScreen( props ) { - - - - - + ); From 2db29e536ee23d09036bbcc0555cb9ed9269c12e Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 14:28:34 -0400 Subject: [PATCH 10/48] Fix incorrect prop references The prior references are non-existent. --- packages/block-library/src/image/edit.native.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 01a46c837f122..24f10ece6b333 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -393,7 +393,6 @@ export class ImageEdit extends Component { const { isLinkSheetVisible } = this.state; const { attributes: { href: url, ...unMappedAttributes }, - image = {}, } = this.props; const mappedAttributes = { ...unMappedAttributes, url }; @@ -451,8 +450,8 @@ export class ImageEdit extends Component { inputValue, linkDestination: this.props.attributes.linkDestination, setAttributes: this.setMappedAttributes, - imageUrl: image.url, - attachmentPageUrl: image.link, + imageUrl: this.props.attributes.url, + attachmentPageUrl: this.props.attributes.link, } ); } } /> From a75d41ecbd097423cafb60edb81af5ea1c764823 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 14:29:20 -0400 Subject: [PATCH 11/48] Correctly mask Custom URL value when a URL is set via a different option Selecting Media File or Attachment Page sets a URL value. Originally, this caused the Custom URL option to display the URL value, rather than persistently displaying its "Search or type URL" placeholder. The Custom URL option should only display an actual URL value if it is manually typed or selected within the link picker. --- .../link-settings/image-options-screen.native.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 5fcb6cc2e8a34..cfd9f77472b5c 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -112,9 +112,19 @@ function ImageOptionsScreen( props ) { label={ __( 'Custom URL' ) } leftAlign // since this is not actually editable, we treat value as a placeholder - value={ inputValue || __( 'Search or type URL' ) } + value={ + ! inputValue || + inputValue === imageUrl || + inputValue === attachmentPageUrl + ? __( 'Search or type URL' ) + : inputValue + } valueStyle={ - !! inputValue ? undefined : styles.placeholderColor + ! inputValue || + inputValue === imageUrl || + inputValue === attachmentPageUrl + ? styles.placeholderColor + : undefined } onPress={ goToLinkPicker } > From 648780ecb6ef454c826bb558f76b7f647cf489d0 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 14:46:27 -0400 Subject: [PATCH 12/48] Avoid passing current URL to link picker if it is not custom When the Media File or Attachment Page options are selected, a URL value is set. Previously, this value was passed to the link picker when the Custom URL option was subsequently selected. This meant the link picker would be pre-populated with a (likely unidentifiable) URL that was not manually entered by the user, which could be confusing. --- .../image-options-screen.native.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index cfd9f77472b5c..0fbbea4c609e1 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -35,8 +35,15 @@ function ImageOptionsScreen( props ) { linkDestination, } = route.params || {}; + const customUrlSet = + !! inputValue && + inputValue !== imageUrl && + inputValue !== attachmentPageUrl; + function goToLinkPicker() { - navigation.navigate( 'linkPicker', { inputValue } ); + navigation.navigate( 'linkPicker', { + inputValue: customUrlSet ? inputValue : '', + } ); } const setLinkDestination = ( newLinkDestination ) => () => { @@ -113,18 +120,10 @@ function ImageOptionsScreen( props ) { leftAlign // since this is not actually editable, we treat value as a placeholder value={ - ! inputValue || - inputValue === imageUrl || - inputValue === attachmentPageUrl - ? __( 'Search or type URL' ) - : inputValue + customUrlSet ? inputValue : __( 'Search or type URL' ) } valueStyle={ - ! inputValue || - inputValue === imageUrl || - inputValue === attachmentPageUrl - ? styles.placeholderColor - : undefined + customUrlSet ? undefined : styles.placeholderColor } onPress={ goToLinkPicker } > From 9a806c355d9fe9c9dc346bdb1707cc8914a38f61 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 15:22:31 -0400 Subject: [PATCH 13/48] Fix stale URL value Referencing `inputValue` from within LinkSettingsScreen resulted in a stale value to from `useRoute`. By referencing, the `url` where the callback is defined, we avoid this issue. --- packages/block-library/src/image/edit.native.js | 4 ++-- .../src/mobile/link-settings/link-settings-screen.native.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 24f10ece6b333..ac69884268b15 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -443,11 +443,11 @@ export class ImageEdit extends Component { hasPicker options={ linkSettingsOptions } showIcon={ false } - onLinkCellPressed={ ( { inputValue, navigation } ) => { + onLinkCellPressed={ ( { navigation } ) => { // TODO(David): Passing `setAttributes` throws a warning, we should avoid // passing it here. navigation.navigate( blockSettingsScreens.imageOptions, { - inputValue, + inputValue: mappedAttributes.url, linkDestination: this.props.attributes.linkDestination, setAttributes: this.setMappedAttributes, imageUrl: this.props.attributes.url, diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js index c841085c591d3..65c95187d2fcb 100644 --- a/packages/components/src/mobile/link-settings/link-settings-screen.native.js +++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js @@ -21,7 +21,7 @@ const LinkSettingsScreen = ( props ) => { const onLinkCellPressed = () => { if ( props.onLinkCellPressed ) { - props.onLinkCellPressed( { inputValue, navigation } ); + props.onLinkCellPressed( { navigation } ); } else { navigation.navigate( 'linkPicker', { inputValue } ); } From d9296cd82f752dc3e88b17d06386257482a79694 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 16:47:03 -0400 Subject: [PATCH 14/48] Fix unnecessary updates to attributes that resulted in bug Set more appropriate defaults for link settings, the new values match the sibling state values of the components. Previously the `undefined` values for `label` and `rel` differed from the empty string values in component state. This change helps avoid unnecessary calls to `setAttributes` that occurred when the BottomSheet was closed. In addition to being unnecessary, these additional `setAttributes` calls caused the Image edit component to erroneously change the `linkDestination` even though the URL had not changed. --- .../src/mobile/link-settings/image-options-screen.native.js | 2 +- packages/components/src/mobile/link-settings/index.native.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 0fbbea4c609e1..eb5f344999a4e 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -56,7 +56,7 @@ function ImageOptionsScreen( props ) { newUrl = attachmentPageUrl; break; default: - newUrl = null; + newUrl = ''; break; } // TODO(David): Most of the logic for updatting the attributes is contained diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js index 8486c0d6a90f6..70b5a3b6e9201 100644 --- a/packages/components/src/mobile/link-settings/index.native.js +++ b/packages/components/src/mobile/link-settings/index.native.js @@ -86,9 +86,9 @@ function LinkSettings( { urlValue, // Attributes properties url, - label, + label = '', linkTarget, - rel, + rel = '', } ) { const [ urlInputValue, setUrlInputValue ] = useState( '' ); const [ labelInputValue, setLabelInputValue ] = useState( '' ); From 0c96e4440157f89465f3d598d11dae385b454f16 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 17:19:28 -0400 Subject: [PATCH 15/48] Fix attachment page URL --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index ac69884268b15..d6ea057a72c18 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -451,7 +451,7 @@ export class ImageEdit extends Component { linkDestination: this.props.attributes.linkDestination, setAttributes: this.setMappedAttributes, imageUrl: this.props.attributes.url, - attachmentPageUrl: this.props.attributes.link, + attachmentPageUrl: this.props.image?.link, } ); } } /> From eb3befed2f01380f9268815d4d4d7f7c53f59cd7 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 15 Sep 2021 20:19:24 -0400 Subject: [PATCH 16/48] Fix incorrect link destination set when toggling new tab or setting rel When "Open in new tab" or "Link Rel" is modified, the URL is again passed to be set within `setMappedAttributes`. This caused the `linkDestination` to improperly be modified. This change now avoid settings `linkDestination` if the URL is not changing. --- packages/block-library/src/image/edit.native.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index d6ea057a72c18..7237387849123 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -377,11 +377,8 @@ export class ImageEdit extends Component { linkDestination = LINK_DESTINATION_CUSTOM; } - return href === undefined - ? setAttributes( { - ...restAttributes, - linkDestination, - } ) + return href === undefined || href === this.props.attributes.href + ? setAttributes( restAttributes ) : setAttributes( { ...restAttributes, linkDestination, From 37374ee3e40502662a528e3d0b21bcbce05aef8b Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Thu, 16 Sep 2021 09:36:11 -0400 Subject: [PATCH 17/48] Conditionally display Attachment Page option if URL exists External images will not have an attachment page URL, so this option should not be displayed when the URL is undefined. --- .../image-options-screen.native.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index eb5f344999a4e..a8a9e16977b5c 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -98,18 +98,20 @@ function ImageOptionsScreen( props ) { leftAlign onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) } /> - + { !! attachmentPageUrl && ( + + ) } Date: Thu, 16 Sep 2021 10:05:34 -0400 Subject: [PATCH 18/48] Fix alignment for left-aligned selected icon Toggling the icon opacity rather than the presence of the icon itself produces the desired alignment for both selected an unselected options. --- .../src/mobile/bottom-sheet/cell.native.js | 6 ++- .../image-options-screen.native.js | 39 ++++++++++--------- .../mobile/link-settings/style.native.scss | 4 ++ 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 136e4daef1b22..482f725477329 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -106,6 +106,7 @@ class BottomSheetCell extends Component { valuePlaceholder = '', icon, leftAlign, + iconStyle = {}, labelStyle = {}, valueStyle = {}, cellContainerStyle = {}, @@ -307,7 +308,7 @@ class BottomSheetCell extends Component { ); }; - const iconStyle = getStylesFromColorScheme( + const iconStyleBase = getStylesFromColorScheme( styles.icon, styles.iconDark ); @@ -362,7 +363,8 @@ class BottomSheetCell extends Component { @@ -79,44 +76,47 @@ function ImageOptionsScreen( props ) { { !! attachmentPageUrl && ( ) } diff --git a/packages/components/src/mobile/link-settings/style.native.scss b/packages/components/src/mobile/link-settings/style.native.scss index bb18e79ad8e6b..4b3ba8bac63c8 100644 --- a/packages/components/src/mobile/link-settings/style.native.scss +++ b/packages/components/src/mobile/link-settings/style.native.scss @@ -7,3 +7,7 @@ .placeholderColor { color: #87a6bc; } + +.unselectedOptionIcon { + opacity: 0; +} From cea3cfb247a95e6fc76023f45637449e0a2d42e8 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Thu, 16 Sep 2021 10:07:26 -0400 Subject: [PATCH 19/48] Rename style selector to better describe intent --- .../src/mobile/link-settings/image-options-screen.native.js | 2 +- packages/components/src/mobile/link-settings/style.native.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 27db33cf1bd08..5fed0dc53fc4d 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -125,7 +125,7 @@ function ImageOptionsScreen( props ) { customUrlSet ? inputValue : __( 'Search or type URL' ) } valueStyle={ - customUrlSet ? undefined : styles.placeholderColor + customUrlSet ? undefined : styles.placeholderTextColor } onPress={ goToLinkPicker } separatorType="leftMargin" diff --git a/packages/components/src/mobile/link-settings/style.native.scss b/packages/components/src/mobile/link-settings/style.native.scss index 4b3ba8bac63c8..37c40ca7098c4 100644 --- a/packages/components/src/mobile/link-settings/style.native.scss +++ b/packages/components/src/mobile/link-settings/style.native.scss @@ -4,7 +4,7 @@ } // used in both light and dark modes -.placeholderColor { +.placeholderTextColor { color: #87a6bc; } From 41ebf8963b16e6a02b752a5b4f9820ca82615ec0 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Thu, 16 Sep 2021 10:19:19 -0400 Subject: [PATCH 20/48] Remove irrelevant comment regarding setAttributes After reviewing the logic within `LinkSettings`, it largely manages invoking `setAttributes` in different scenarios. Therefore, using `setAttributes` directly makes sense for this component. --- .../src/mobile/link-settings/image-options-screen.native.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-options-screen.native.js index 5fed0dc53fc4d..ca7c004d4c8c9 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-options-screen.native.js @@ -59,9 +59,7 @@ function ImageOptionsScreen( props ) { newUrl = ''; break; } - // TODO(David): Most of the logic for updatting the attributes is contained - // within LinkSettings. We may need to create an abstracted hook. - // `setAttributes` is likely not enough. + setAttributes( { url: newUrl, linkDestination: newLinkDestination } ); navigation.goBack(); }; From 79eb02cb81e72410afada4e91b915ae409ab6a82 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Thu, 16 Sep 2021 10:33:48 -0400 Subject: [PATCH 21/48] Rename ImageOptionsScreen to ImageLinkDestinationsScreen Attempt to better describe component intent. --- .../src/components/block-settings/container.native.js | 4 ++-- packages/components/src/index.native.js | 2 +- ...n.native.js => image-link-destinations-screen.native.js} | 6 ++---- 3 files changed, 5 insertions(+), 7 deletions(-) rename packages/components/src/mobile/link-settings/{image-options-screen.native.js => image-link-destinations-screen.native.js} (95%) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 0a4e33627e420..3e9f1c77daf47 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -6,7 +6,7 @@ import { BottomSheet, ColorSettings, FocalPointSettingsPanel, - ImageOptionsScreen, + ImageLinkDestinationsScreen, LinkPickerScreen, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; @@ -80,7 +80,7 @@ function BottomSheetSettings( { - + diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 712fa97ba63fa..52b2cbcf27705 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -102,7 +102,7 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc export { default as LinkSettings } from './mobile/link-settings'; export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen'; export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation'; -export { default as ImageOptionsScreen } from './mobile/link-settings/image-options-screen'; +export { default as ImageLinkDestinationsScreen } from './mobile/link-settings/image-link-destinations-screen'; export { default as SegmentedControl } from './mobile/segmented-control'; export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image'; export { default as ImageEditingButton } from './mobile/image/image-editing-button'; diff --git a/packages/components/src/mobile/link-settings/image-options-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js similarity index 95% rename from packages/components/src/mobile/link-settings/image-options-screen.native.js rename to packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index ca7c004d4c8c9..65f1b584b7acf 100644 --- a/packages/components/src/mobile/link-settings/image-options-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -21,9 +21,7 @@ const LINK_DESTINATION_MEDIA = 'media'; const LINK_DESTINATION_ATTACHMENT = 'attachment'; const LINK_DESTINATION_CUSTOM = 'custom'; -// TODO(David): Rename this component, file, and screen to better communicate -// intent -function ImageOptionsScreen( props ) { +function ImageLinkDestinationsScreen( props ) { const navigation = useNavigation(); const route = useRoute(); const { url = '' } = props; @@ -135,4 +133,4 @@ function ImageOptionsScreen( props ) { ); } -export default ImageOptionsScreen; +export default ImageLinkDestinationsScreen; From d67db6b03d3f7ae3472f8c2df7a6a6f5bfc72292 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Thu, 16 Sep 2021 11:05:18 -0400 Subject: [PATCH 22/48] Add LinkDestination abstraction Avoid repetition to reduce likelihood of bugs. --- .../image-link-destinations-screen.native.js | 75 ++++++++++--------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index 65f1b584b7acf..73ad5380f9adc 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -21,6 +21,33 @@ const LINK_DESTINATION_MEDIA = 'media'; const LINK_DESTINATION_ATTACHMENT = 'attachment'; const LINK_DESTINATION_CUSTOM = 'custom'; +function LinkDestination( { + children, + currentOption, + label, + option, + onPress, + value, + valueStyle, +} ) { + return ( + + { children } + + ); +} + function ImageLinkDestinationsScreen( props ) { const navigation = useNavigation(); const route = useRoute(); @@ -71,51 +98,33 @@ function ImageLinkDestinationsScreen( props ) { - - { !! attachmentPageUrl && ( - ) } - - + ); From d850dd35dc7931b09a835fb4cd316b580ff05d09 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 20 Sep 2021 16:26:14 -0400 Subject: [PATCH 23/48] Fix stale link picker value and React Navigation warning Passing `setAttributes` resulted in a stale value within the link picker that prohibited setting the same Custom URL twice if attempted without closing the bottom sheet entirely. E.g. None => Custom URL => None => Custom URL. Additionally, React Navigation warns about passing non-serializable values as route params, e.g. functions. These changes addresses both issues. --- .../block-library/src/image/edit.native.js | 162 ++++++++++-------- .../image-link-destinations-screen.native.js | 18 +- 2 files changed, 98 insertions(+), 82 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 7237387849123..52b3465b3ed8f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,11 +2,12 @@ * External dependencies */ import { View, TouchableWithoutFeedback } from 'react-native'; +import { useRoute } from '@react-navigation/native'; /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; +import { Component, useEffect } from '@wordpress/element'; import { requestMediaImport, mediaUploadSync, @@ -78,6 +79,86 @@ const getUrlForSlug = ( image, sizeSlug ) => { return image?.media_details?.sizes?.[ sizeSlug ]?.source_url; }; +function LinkSettings( { + attributes, + dismissSheet, + image, + isLinkSheetVisible, + setMappedAttributes, +} ) { + const route = useRoute(); + const { href: url, ...unMappedAttributes } = attributes; + const mappedAttributes = { ...unMappedAttributes, url }; + + // Persist attributes passed from child screen + useEffect( () => { + const { linkDestination, url: newUrl } = route.params || {}; + if ( linkDestination || newUrl ) { + setMappedAttributes( { + url: newUrl, + linkDestination, + } ); + } + }, [ route.params?.url, route.params?.linkDestination ] ); + + let valueMask; + switch ( mappedAttributes.linkDestination ) { + case LINK_DESTINATION_MEDIA: + valueMask = __( 'Media File' ); + break; + case LINK_DESTINATION_ATTACHMENT: + valueMask = __( 'Attachment Page' ); + break; + case LINK_DESTINATION_CUSTOM: + valueMask = __( 'Custom URL' ); + break; + default: + valueMask = __( 'None' ); + break; + } + + const linkSettingsOptions = { + url: { + valueMask, + autoFocus: false, + autoFill: true, + }, + openInNewTab: { + label: __( 'Open in new tab' ), + }, + linkRel: { + label: __( 'Link Rel' ), + placeholder: _x( 'None', 'Link rel attribute value placeholder' ), + }, + }; + + return ( + + { + navigation.navigate( blockSettingsScreens.imageOptions, { + inputValue: attributes.href, + linkDestination: attributes.linkDestination, + imageUrl: attributes.url, + attachmentPageUrl: image?.link, + } ); + } } + /> + + ); +} + export class ImageEdit extends Component { constructor( props ) { super( props ); @@ -386,75 +467,6 @@ export class ImageEdit extends Component { } ); } - getLinkSettings() { - const { isLinkSheetVisible } = this.state; - const { - attributes: { href: url, ...unMappedAttributes }, - } = this.props; - const mappedAttributes = { ...unMappedAttributes, url }; - - let valueMask; - switch ( mappedAttributes.linkDestination ) { - case LINK_DESTINATION_MEDIA: - valueMask = __( 'Media File' ); - break; - case LINK_DESTINATION_ATTACHMENT: - valueMask = __( 'Attachment Page' ); - break; - case LINK_DESTINATION_CUSTOM: - valueMask = __( 'Custom URL' ); - break; - default: - valueMask = __( 'None' ); - break; - } - - const linkSettingsOptions = { - url: { - valueMask, - autoFocus: false, - autoFill: true, - }, - openInNewTab: { - label: __( 'Open in new tab' ), - }, - linkRel: { - label: __( 'Link Rel' ), - placeholder: _x( - 'None', - 'Link rel attribute value placeholder' - ), - }, - }; - - return ( - { - // TODO(David): Passing `setAttributes` throws a warning, we should avoid - // passing it here. - navigation.navigate( blockSettingsScreens.imageOptions, { - inputValue: mappedAttributes.url, - linkDestination: this.props.attributes.linkDestination, - setAttributes: this.setMappedAttributes, - imageUrl: this.props.attributes.url, - attachmentPageUrl: this.props.image?.link, - } ); - } } - /> - ); - } - getAltTextSettings() { const { attributes: { alt }, @@ -613,9 +625,13 @@ export class ImageEdit extends Component { ) } { this.getAltTextSettings() } - - { this.getLinkSettings( true ) } - + Date: Tue, 21 Sep 2021 11:35:56 -0400 Subject: [PATCH 24/48] Rename image link destination screen for consistency --- .../components/block-settings/container.native.js | 4 ++-- packages/block-library/src/image/edit.native.js | 15 +++++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 3e9f1c77daf47..0ebc357e55b97 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -22,7 +22,7 @@ export const blockSettingsScreens = { color: 'Color', focalPoint: 'FocalPoint', linkPicker: 'linkPicker', - imageOptions: 'imageOptions', + imageLinkDestinations: 'imageLinkDestinations', }; function BottomSheetSettings( { @@ -78,7 +78,7 @@ function BottomSheetSettings( { /> diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 52b3465b3ed8f..a590a0d0872c3 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -147,12 +147,15 @@ function LinkSettings( { options={ linkSettingsOptions } showIcon={ false } onLinkCellPressed={ ( { navigation } ) => { - navigation.navigate( blockSettingsScreens.imageOptions, { - inputValue: attributes.href, - linkDestination: attributes.linkDestination, - imageUrl: attributes.url, - attachmentPageUrl: image?.link, - } ); + navigation.navigate( + blockSettingsScreens.imageLinkDestinations, + { + inputValue: attributes.href, + linkDestination: attributes.linkDestination, + imageUrl: attributes.url, + attachmentPageUrl: image?.link, + } + ); } } /> From 3448fe94f75b9a9912b6a418d84902d8672843a3 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 11:40:55 -0400 Subject: [PATCH 25/48] Remove Custom URL placeholder The design of the link destination picker has less width available, which caused layout issues for the placeholder, particularly on Android where spacing is larger. --- .../link-settings/image-link-destinations-screen.native.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index dfb25985d0fbb..4158fe8e9835a 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -125,10 +125,7 @@ function ImageLinkDestinationsScreen( props ) { option={ LINK_DESTINATION_CUSTOM } label={ __( 'Custom URL' ) } onPress={ goToLinkPicker } - // since this is not actually editable, we treat value as a placeholder - value={ - customUrlSet ? inputValue : __( 'Search or type URL' ) - } + value={ customUrlSet ? inputValue : '' } valueStyle={ customUrlSet ? undefined : styles.placeholderTextColor } From 2ef5f650a81f6ceb7238eda79d702d30fc8ce4bd Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 11:55:26 -0400 Subject: [PATCH 26/48] Reduce spacing around left-side cell icons on Android This diverges from Material Design guides, but provides the additional room we require for the new image link destination picker. The Custom URL option needs to display both an selected icon (checkmark) on the left side as well as a value and right chevron on the right side. --- .../src/mobile/bottom-sheet/cellStyles.android.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss index 0c823db8c3fc9..bb16b45216e4c 100644 --- a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss +++ b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss @@ -1,9 +1,9 @@ .labelIconSeparator { - width: 32px; + width: 12px; } .separatorMarginLeft { - margin-left: 56px; + margin-left: 36px; } .isSelected { From a2fd90d06610c32768dd96284f865eda4197d319 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 12:07:09 -0400 Subject: [PATCH 27/48] Revert "Reduce spacing around left-side cell icons on Android" This reverts commit 2ef5f650a81f6ceb7238eda79d702d30fc8ce4bd. --- .../src/mobile/bottom-sheet/cellStyles.android.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss index bb16b45216e4c..0c823db8c3fc9 100644 --- a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss +++ b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss @@ -1,9 +1,9 @@ .labelIconSeparator { - width: 12px; + width: 32px; } .separatorMarginLeft { - margin-left: 36px; + margin-left: 56px; } .isSelected { From 5022e40c82d5bfa14404ea5646d27c9156889e64 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 13:30:13 -0400 Subject: [PATCH 28/48] Fix select icon color --- packages/components/src/mobile/bottom-sheet/cell.native.js | 6 +++++- .../link-settings/image-link-destinations-screen.native.js | 4 +++- .../components/src/mobile/link-settings/style.native.scss | 4 ++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 482f725477329..2511f016d5aa5 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -363,7 +363,11 @@ class BottomSheetCell extends Component { diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index 4158fe8e9835a..fed361f96d84c 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -35,7 +35,9 @@ function LinkDestination( { Date: Tue, 21 Sep 2021 13:46:17 -0400 Subject: [PATCH 29/48] Fix selected icon styles for dark mode Utilize colors as directed by designer. --- .../image-link-destinations-screen.native.js | 15 ++++++++++----- .../src/mobile/link-settings/style.native.scss | 8 ++++++-- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index fed361f96d84c..4f9acfa285f01 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { useNavigation, useRoute } from '@react-navigation/native'; +import { StyleSheet } from 'react-native'; /** * WordPress dependencies @@ -9,6 +10,7 @@ import { useNavigation, useRoute } from '@react-navigation/native'; import { __ } from '@wordpress/i18n'; import { Icon, check, chevronRight } from '@wordpress/icons'; import { blockSettingsScreens } from '@wordpress/block-editor'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies @@ -31,14 +33,17 @@ function LinkDestination( { value, valueStyle, } ) { + const optionIcon = usePreferredColorSchemeStyle( + styles.optionIcon, + styles.optionIconDark + ); return ( Date: Tue, 21 Sep 2021 13:46:47 -0400 Subject: [PATCH 30/48] Update selected icon colors Change to colors requested by designer. --- .../src/mobile/bottom-sheet/cellStyles.android.scss | 6 +++++- .../components/src/mobile/bottom-sheet/cellStyles.ios.scss | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss index 0c823db8c3fc9..97f48f0872466 100644 --- a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss +++ b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss @@ -7,5 +7,9 @@ } .isSelected { - color: $blue-wordpress; + color: $blue-50; +} + +.isSelectedDark { + color: $blue-30; } diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss index 6cb9dead68b6f..e3f9643b513fb 100644 --- a/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss +++ b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss @@ -7,7 +7,11 @@ } .isSelected { - color: $blue-wordpress; + color: $blue-50; +} + +.isSelectedDark { + color: $blue-30; } .activeOpacity { From ee167b715fa44e6e783ae439d8b308c25f9b4bde Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 13:50:50 -0400 Subject: [PATCH 31/48] Update change log --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 193a38fbf90eb..5911962e0aa0a 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased +- [**] [Image block] Add ability to quickly link images to Media Files and Attachment Pages [#34846] ## 1.62.0 - [**] [Embed block] Implement WP embed preview component [#34004] From b97c858dbb3962ed965a03f5f5b590882d135dcf Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 14:10:20 -0400 Subject: [PATCH 32/48] Simplify unnecessarily complex conditional `iconStyle` has a default value of `{}`. --- packages/components/src/mobile/bottom-sheet/cell.native.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 2511f016d5aa5..ac780d9e0f65d 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -364,9 +364,8 @@ class BottomSheetCell extends Component { icon={ icon } size={ 24 } fill={ - iconStyle && iconStyle.color - ? iconStyle.color - : iconStyleBase.color + iconStyle.color || + iconStyleBase.color } style={ iconStyle } isPressed={ false } From 4c1f6659222becc18e16a37ccacc9d72c1b7053c Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 21 Sep 2021 14:11:09 -0400 Subject: [PATCH 33/48] Reference screen name cache rather than string literal Attempt to avoid typos. --- .../link-settings/image-link-destinations-screen.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index 4f9acfa285f01..11c6f4e04b216 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -69,7 +69,7 @@ function ImageLinkDestinationsScreen( props ) { inputValue !== attachmentPageUrl; function goToLinkPicker() { - navigation.navigate( 'linkPicker', { + navigation.navigate( blockSettingsScreens.linkPicker, { inputValue: customUrlSet ? inputValue : '', } ); } From 2d7712167ccba131e1bba4f2957d473569516c5d Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 22 Sep 2021 14:23:41 -0400 Subject: [PATCH 34/48] Remove unnecessary mappedAttributes assignment Now that we pass each prop individually to the child component, it is arguably simpler to destructure the props required. --- .../block-library/src/image/edit.native.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index c4d2be4a782d3..7549478f625e8 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -87,22 +87,22 @@ function LinkSettings( { setMappedAttributes, } ) { const route = useRoute(); - const { href: url, ...unMappedAttributes } = attributes; - const mappedAttributes = { ...unMappedAttributes, url }; + const { href: url, label, linkDestination, linkTarget, rel } = attributes; // Persist attributes passed from child screen useEffect( () => { - const { linkDestination, url: newUrl } = route.params || {}; - if ( linkDestination || newUrl ) { + const { linkDestination: newLinkDestination, url: newUrl } = + route.params || {}; + if ( newLinkDestination || newUrl ) { setMappedAttributes( { url: newUrl, - linkDestination, + linkDestination: newLinkDestination, } ); } }, [ route.params?.url, route.params?.linkDestination ] ); let valueMask; - switch ( mappedAttributes.linkDestination ) { + switch ( linkDestination ) { case LINK_DESTINATION_MEDIA: valueMask = __( 'Media File' ); break; @@ -136,10 +136,10 @@ function LinkSettings( { Date: Wed, 22 Sep 2021 14:49:29 -0400 Subject: [PATCH 35/48] Reuse linkDestination parameter instead of new local assignment Reassigning a destructured function parameter, instead of creating a new local assignment, allows for fewer conditionals and less code. --- packages/block-library/src/image/edit.native.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 7549478f625e8..c3bbf9b3ad77b 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -450,14 +450,11 @@ export class ImageEdit extends Component { : width; } - setMappedAttributes( { url: href, ...restAttributes } ) { + setMappedAttributes( { url: href, linkDestination, ...restAttributes } ) { const { setAttributes } = this.props; - let linkDestination; - if ( restAttributes.linkDestination ) { - linkDestination = restAttributes.linkDestination; - } else if ( ! href && ! restAttributes.linkDestination ) { + if ( ! href && ! linkDestination ) { linkDestination = LINK_DESTINATION_NONE; - } else { + } else if ( ! linkDestination ) { linkDestination = LINK_DESTINATION_CUSTOM; } From fa8cea959f4a84dd8000993742652f1fca2849a9 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 22 Sep 2021 15:15:30 -0400 Subject: [PATCH 36/48] Refactor selected status of LinkDestination Relocate the logic to allow for a single `isSelected` prop to improve readability. --- .../image-link-destinations-screen.native.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index 11c6f4e04b216..bfd1a668bfa6b 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -26,9 +26,8 @@ const LINK_DESTINATION_CUSTOM = 'custom'; function LinkDestination( { children, - currentOption, + isSelected, label, - option, onPress, value, valueStyle, @@ -42,7 +41,7 @@ function LinkDestination( { icon={ check } iconStyle={ StyleSheet.flatten( [ optionIcon, - currentOption !== option && styles.unselectedOptionIcon, + ! isSelected && styles.unselectedOptionIcon, ] ) } label={ label } leftAlign @@ -106,21 +105,20 @@ function ImageLinkDestinationsScreen( props ) { { !! attachmentPageUrl && ( ) } Date: Fri, 29 Oct 2021 16:15:27 -0500 Subject: [PATCH 37/48] Remove unused code There are no references to this method in the source. --- packages/block-library/src/image/edit.native.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index c3bbf9b3ad77b..5946b3d501a54 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -182,7 +182,6 @@ export class ImageEdit extends Component { ); this.updateMediaProgress = this.updateMediaProgress.bind( this ); this.updateImageURL = this.updateImageURL.bind( this ); - this.onSetLinkDestination = this.onSetLinkDestination.bind( this ); this.onSetNewTab = this.onSetNewTab.bind( this ); this.onSetSizeSlug = this.onSetSizeSlug.bind( this ); this.onImagePressed = this.onImagePressed.bind( this ); @@ -349,13 +348,6 @@ export class ImageEdit extends Component { } ); } - onSetLinkDestination( href ) { - this.props.setAttributes( { - linkDestination: LINK_DESTINATION_CUSTOM, - href, - } ); - } - onSetNewTab( value ) { const updatedLinkTarget = getUpdatedLinkTargetSettings( value, From 9160e7f5453b767eef3e77d673714dd25d77600a Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 29 Oct 2021 16:18:58 -0500 Subject: [PATCH 38/48] Remove undefined callback This prop referenced an undefined class method. --- packages/block-library/src/image/edit.native.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 5946b3d501a54..3263889594f54 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -81,7 +81,6 @@ const getUrlForSlug = ( image, sizeSlug ) => { function LinkSettings( { attributes, - dismissSheet, image, isLinkSheetVisible, setMappedAttributes, @@ -140,7 +139,6 @@ function LinkSettings( { rel={ rel } label={ label } linkTarget={ linkTarget } - onClose={ dismissSheet } setAttributes={ setMappedAttributes } withBottomSheet={ false } hasPicker @@ -622,7 +620,6 @@ export class ImageEdit extends Component { Date: Thu, 2 Sep 2021 16:15:51 -0500 Subject: [PATCH 39/48] Replace style-based key with index key Stringifying the styles appears unnecessary, and it was also causing missing key warnings in tests as the styles are undefined in that context. Leveraging the index appears to be enough to satisfy both the app and the tests. --- .../src/components/block-styles/preview.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-styles/preview.native.js b/packages/block-editor/src/components/block-styles/preview.native.js index c017331ad38a3..1fce3ddc0acc5 100644 --- a/packages/block-editor/src/components/block-styles/preview.native.js +++ b/packages/block-editor/src/components/block-styles/preview.native.js @@ -67,11 +67,11 @@ function StylePreview( { onPress, isActive, style, url } ) { ); const getOutline = ( outlineStyles ) => - outlineStyles.map( ( outlineStyle ) => { + outlineStyles.map( ( outlineStyle, index ) => { return ( ); } ); From ec3c08c8663c3bb98b1631b582fe68ef04b6c55f Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Thu, 2 Sep 2021 16:21:41 -0500 Subject: [PATCH 40/48] Refactor existing Image edit tests to avoid referencing internals Test from the "public" API of the component and its output, rather than internal methods. I.e. press rendered buttons instead of calling methods by name. --- .../src/image/test/edit.native.js | 112 +++++++++++------- 1 file changed, 67 insertions(+), 45 deletions(-) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index 86b4751177da2..50e19e3a6091b 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -1,65 +1,87 @@ /** * External dependencies */ -import renderer from 'react-test-renderer'; +import { act, fireEvent, initializeEditor, getEditorHtml } from 'test/helpers'; +import { Image } from 'react-native'; + +/** + * WordPress dependencies + */ +import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import { ImageEdit } from '../edit'; -import { NEW_TAB_REL } from '../constants'; +import { registerCoreBlocks } from '../..'; -const getStylesFromColorScheme = () => { - return { color: 'white' }; -}; +beforeAll( () => { + registerCoreBlocks(); -const setAttributes = jest.fn(); + // Mock Image.getSize to avoid failed attempt to size non-existant image + const getSizeSpy = jest.spyOn( Image, 'getSize' ); + getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) ); +} ); -const getImageComponent = ( attributes = {} ) => ( - -); +afterAll( () => { + getBlockTypes().forEach( ( { name } ) => { + unregisterBlockType( name ); + } ); + + // Restore mocks + Image.getSize.mockRestore(); +} ); describe( 'Image Block', () => { - beforeEach( () => { - setAttributes.mockReset(); - } ); + it( 'sets link target', async () => { + const initialHtml = ` + +
+ + + +
Mountain
+ `; + const screen = await initializeEditor( { initialHtml } ); - it( 'renders without crashing', () => { - const component = renderer.create( getImageComponent() ); - const rendered = component.toJSON(); - expect( rendered ).toBeTruthy(); - } ); + const imageBlock = screen.getByA11yLabel( /Image Block/ ); + fireEvent.press( imageBlock ); - it( 'sets link target', () => { - const component = renderer.create( getImageComponent() ); - const instance = component.getInstance(); + const settingsButton = screen.getByA11yLabel( 'Open Settings' ); + await act( () => fireEvent.press( settingsButton ) ); - instance.onSetNewTab( true ); + const linkTargetButton = screen.getByText( 'Open in new tab' ); + fireEvent.press( linkTargetButton ); - expect( setAttributes ).toHaveBeenCalledWith( { - linkTarget: '_blank', - rel: undefined, - } ); + const expectedHtml = ` +
Mountain
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); } ); - it( 'unset link target', () => { - const component = renderer.create( - getImageComponent( { - linkTarget: '_blank', - rel: NEW_TAB_REL.join( ' ' ), - } ) - ); - const instance = component.getInstance(); - - instance.onSetNewTab( false ); - - expect( setAttributes ).toHaveBeenCalledWith( { - linkTarget: undefined, - rel: undefined, - } ); + it( 'unset link target', async () => { + const initialHtml = ` + +
+ + + +
Mountain
+
+ `; + const screen = await initializeEditor( { initialHtml } ); + + const imageBlock = screen.getByA11yLabel( /Image Block/ ); + fireEvent.press( imageBlock ); + + const settingsButton = screen.getByA11yLabel( 'Open Settings' ); + await act( () => fireEvent.press( settingsButton ) ); + + const linkTargetButton = screen.getByText( 'Open in new tab' ); + fireEvent.press( linkTargetButton ); + + const expectedHtml = ` +
Mountain
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); } ); } ); From e903510c3f6a0c17789cbce9f25e95cb91aa135d Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 3 Sep 2021 15:47:03 -0500 Subject: [PATCH 41/48] Remove unnecessary native file extension reference Metro resolves native files by default. --- packages/block-editor/src/components/block-list/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 697a9ffc19daa..bdea027b116f1 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n'; */ import styles from './style.scss'; import BlockListAppender from '../block-list-appender'; -import BlockListItem from './block-list-item.native'; +import BlockListItem from './block-list-item'; import { store as blockEditorStore } from '../../store'; const BlockListContext = createContext(); From 50eae9a89e0a0d9d22c2320943e00bcf829e1fb5 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 3 Sep 2021 15:48:10 -0500 Subject: [PATCH 42/48] Avoid global act by awaiting specific change within Image component The Image component invokes `getMedia` within its selector. This results in an async resolver running, which leads to changes to the component after the async work completes. Rather than wrapping the entire test helper with `act`, we should target the specific change within the test file. --- .../block-library/src/image/test/edit.native.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index 50e19e3a6091b..6079c10faef97 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -8,12 +8,24 @@ import { Image } from 'react-native'; * WordPress dependencies */ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks'; +import { apiFetch } from '@wordpress/data-controls'; /** * Internal dependencies */ import { registerCoreBlocks } from '../..'; +jest.mock( '@wordpress/data-controls', () => { + const dataControls = jest.requireActual( '@wordpress/data-controls' ); + return { + ...dataControls, + apiFetch: jest.fn(), + }; +} ); + +const apiFetchPromise = Promise.resolve( {} ); +apiFetch.mockImplementation( () => apiFetchPromise ); + beforeAll( () => { registerCoreBlocks(); @@ -42,6 +54,8 @@ describe( 'Image Block', () => {
Mountain
`; const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); const imageBlock = screen.getByA11yLabel( /Image Block/ ); fireEvent.press( imageBlock ); @@ -69,6 +83,8 @@ describe( 'Image Block', () => { `; const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); const imageBlock = screen.getByA11yLabel( /Image Block/ ); fireEvent.press( imageBlock ); From 209f1914da92c9f4792da2039469e2f182a9d95f Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 6 Sep 2021 08:34:32 -0500 Subject: [PATCH 43/48] Add missing React Navigation testing setup Per React Navigation documentation, this file should be included. https://bit.ly/3n6Rotv --- test/native/setup.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/native/setup.js b/test/native/setup.js index 318fbe03ff46b..ffd651680b45b 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import 'react-native-gesture-handler/jestSetup'; import { NativeModules as RNNativeModules } from 'react-native'; RNNativeModules.UIManager = RNNativeModules.UIManager || {}; From 8b9dacc01485ccb68ff2ee908985edde8fb14fc8 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 6 Sep 2021 08:35:18 -0500 Subject: [PATCH 44/48] Add note regarding React Navigation async test error There appears to be a bug in React Navigation that causes error logs in Jest tests. We must await the `fireEvent` that triggers the navigation event in order to suppress the error. https://git.io/Ju35Z --- packages/block-library/src/image/test/edit.native.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index 6079c10faef97..8050bfe23ec4c 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -61,6 +61,8 @@ describe( 'Image Block', () => { fireEvent.press( imageBlock ); const settingsButton = screen.getByA11yLabel( 'Open Settings' ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z await act( () => fireEvent.press( settingsButton ) ); const linkTargetButton = screen.getByText( 'Open in new tab' ); @@ -90,6 +92,8 @@ describe( 'Image Block', () => { fireEvent.press( imageBlock ); const settingsButton = screen.getByA11yLabel( 'Open Settings' ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z await act( () => fireEvent.press( settingsButton ) ); const linkTargetButton = screen.getByText( 'Open in new tab' ); From 2fdd8c145ef15ee3d7ccff21321b8b2e22086096 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 1 Nov 2021 14:20:56 -0500 Subject: [PATCH 45/48] Add Image Link To tests --- .../src/image/test/edit.native.js | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index 8050bfe23ec4c..c040453994054 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -44,6 +44,86 @@ afterAll( () => { } ); describe( 'Image Block', () => { + it( 'sets link to None', async () => { + const initialHtml = ` +
Mountain
+`; + const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); + + fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z + await act( () => + fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + ); + fireEvent.press( screen.getByText( 'Media File' ) ); + fireEvent.press( screen.getByText( 'None' ) ); + + const expectedHtml = ` +
Mountain
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); + } ); + + it( 'sets link to Media File', async () => { + const initialHtml = ` + +
+ +
Mountain
+ `; + const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); + + fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z + await act( () => + fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + ); + fireEvent.press( screen.getByText( 'None' ) ); + fireEvent.press( screen.getByText( 'Media File' ) ); + + const expectedHtml = ` +
Mountain
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); + } ); + + it( 'sets link to Custom URL', async () => { + const initialHtml = ` + +
+ +
Mountain
+ `; + const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); + + fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z + await act( () => + fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + ); + fireEvent.press( screen.getByText( 'None' ) ); + fireEvent.press( screen.getByText( 'Custom URL' ) ); + fireEvent.changeText( + screen.getByPlaceholderText( 'Search or type URL' ), + 'wordpress.org' + ); + fireEvent.press( screen.getByA11yLabel( 'Apply' ) ); + + const expectedHtml = ` +
Mountain
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); + } ); + it( 'sets link target', async () => { const initialHtml = ` From cf4027fcb3c0d41acf060ffd72e119b9391915c9 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 1 Nov 2021 14:39:02 -0500 Subject: [PATCH 46/48] Fix incorrect Link To value mask caused by stale route parameters Originally, ImageLinkDestinationsScreen relied upon (1) differing route parameter names from LinkPicker and (2) explicitly set `linkDestination` while LinkPicker did not. Stale route parameters resulted in erroneous attribute updates when swapping the link destination from Media File > Custom URL > Media File. This change addresses the stale route parameters by (1) unifying the route parameter names between the two components and (2) unifying the approach for setting `linkDestination` to be computed based upon the URL. The URL, represented as the `inputValue` route parameter, is now the sole route parameter. --- .../block-library/src/image/edit.native.js | 30 +++++++++++----- .../src/image/test/edit.native.js | 34 +++++++++++++++++++ .../image-link-destinations-screen.native.js | 10 +++--- 3 files changed, 62 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 3263889594f54..0308e90523a56 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -90,15 +90,29 @@ function LinkSettings( { // Persist attributes passed from child screen useEffect( () => { - const { linkDestination: newLinkDestination, url: newUrl } = - route.params || {}; - if ( newLinkDestination || newUrl ) { - setMappedAttributes( { - url: newUrl, - linkDestination: newLinkDestination, - } ); + const { inputValue: newUrl } = route.params || {}; + + let newLinkDestination; + switch ( newUrl ) { + case attributes.url: + newLinkDestination = LINK_DESTINATION_MEDIA; + break; + case image?.link: + newLinkDestination = LINK_DESTINATION_ATTACHMENT; + break; + case '': + newLinkDestination = LINK_DESTINATION_NONE; + break; + default: + newLinkDestination = LINK_DESTINATION_CUSTOM; + break; } - }, [ route.params?.url, route.params?.linkDestination ] ); + + setMappedAttributes( { + url: newUrl, + linkDestination: newLinkDestination, + } ); + }, [ route.params?.inputValue ] ); let valueMask; switch ( linkDestination ) { diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index c040453994054..aaab38b052610 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -124,6 +124,40 @@ describe( 'Image Block', () => { expect( getEditorHtml() ).toBe( expectedHtml ); } ); + it( 'swaps the link between destinations', async () => { + const initialHtml = ` + +
+ +
Mountain
+ `; + const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); + + fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z + await act( () => + fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + ); + fireEvent.press( screen.getByText( 'None' ) ); + fireEvent.press( screen.getByText( 'Media File' ) ); + fireEvent.press( screen.getByText( 'Custom URL' ) ); + fireEvent.changeText( + screen.getByPlaceholderText( 'Search or type URL' ), + 'wordpress.org' + ); + fireEvent.press( screen.getByA11yLabel( 'Apply' ) ); + fireEvent.press( screen.getByText( 'Custom URL' ) ); + fireEvent.press( screen.getByText( 'Media File' ) ); + + const expectedHtml = ` +
Mountain
+`; + expect( getEditorHtml() ).toBe( expectedHtml ); + } ); + it( 'sets link target', async () => { const initialHtml = ` diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index bfd1a668bfa6b..223b377f97fad 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -88,10 +88,12 @@ function ImageLinkDestinationsScreen( props ) { } navigation.navigate( blockSettingsScreens.settings, { - inputValue: '', // Reset to avoid stale value in link picker input - text: undefined, // Reset to avoid stale value in link picker input - url: newUrl, - linkDestination: newLinkDestination, + // The `inputValue` name is reused from LinkPicker, as it helps avoid + // bugs from stale values remaining in the React Navigation route + // parameters + inputValue: newUrl, + // Clear link text value that may be set from LinkPicker + text: '', } ); }; From 9a0206434cda321feca2802bbb4d74a2bb19324d Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 1 Nov 2021 16:49:48 -0500 Subject: [PATCH 47/48] Fix erroneous URL display within Custom URL input The image URL may contain query parameters for aspects like display dimensions. This caused a comparison based upon the URL to unexpectedly mismatch. By leveraging `linkDestination` instead, we correctly hide the URL from the Custom URL input whenever Media File or Attachment Page is selected. --- .../src/image/test/edit.native.js | 24 +++++++++++++++++++ .../image-link-destinations-screen.native.js | 18 +++++++------- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index aaab38b052610..f119044301493 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -158,6 +158,30 @@ describe( 'Image Block', () => { expect( getEditorHtml() ).toBe( expectedHtml ); } ); + it( 'does not display the Link To URL within the Custom URL input when set to Media File and query parameters are present', async () => { + const initialHtml = ` + +
+ + + +
Mountain
+ `; + const screen = await initializeEditor( { initialHtml } ); + // We must await the image fetch via `getMedia` + await act( () => apiFetchPromise ); + + fireEvent.press( screen.getByA11yLabel( /Image Block/ ) ); + // Awaiting navigation event seemingly required due to React Navigation bug + // https://git.io/Ju35Z + await act( () => + fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) ) + ); + fireEvent.press( screen.getByText( 'Media File' ) ); + + expect( screen.queryByA11yLabel( /https:\/\/cldup\.com/ ) ).toBeNull(); + } ); + it( 'sets link target', async () => { const initialHtml = ` diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js index 223b377f97fad..6cdfc5a781c6a 100644 --- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js +++ b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js @@ -62,14 +62,10 @@ function ImageLinkDestinationsScreen( props ) { const { inputValue = url, imageUrl, attachmentPageUrl, linkDestination } = route.params || {}; - const customUrlSet = - !! inputValue && - inputValue !== imageUrl && - inputValue !== attachmentPageUrl; - function goToLinkPicker() { navigation.navigate( blockSettingsScreens.linkPicker, { - inputValue: customUrlSet ? inputValue : '', + inputValue: + linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '', } ); } @@ -131,9 +127,15 @@ function ImageLinkDestinationsScreen( props ) { isSelected={ linkDestination === LINK_DESTINATION_CUSTOM } label={ __( 'Custom URL' ) } onPress={ goToLinkPicker } - value={ customUrlSet ? inputValue : '' } + value={ + linkDestination === LINK_DESTINATION_CUSTOM + ? inputValue + : '' + } valueStyle={ - customUrlSet ? undefined : styles.placeholderTextColor + linkDestination === LINK_DESTINATION_CUSTOM + ? undefined + : styles.placeholderTextColor } > From eace5ed42be8a8b819ea6100b7ebca1b8250ead5 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Mon, 1 Nov 2021 16:52:51 -0500 Subject: [PATCH 48/48] Format initialHtml seed consistently --- packages/block-library/src/image/test/edit.native.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index f119044301493..7ec3aa7bd461b 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -45,9 +45,14 @@ afterAll( () => { describe( 'Image Block', () => { it( 'sets link to None', async () => { - const initialHtml = ` -
Mountain
-`; + const initialHtml = ` + +
+ + + +
Mountain
+ `; const screen = await initializeEditor( { initialHtml } ); // We must await the image fetch via `getMedia` await act( () => apiFetchPromise );