-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RNMobile] Embed block - Link in Block Settings (#36099)
* Created a native version of embed-controls * added withBottomSheet flag so embed link works in both modes. * integrate EmbedBottomSheet with EmbedControls in Embed functionality * Removed the edit button from the toolbar. Removed all related code. * onClose calls onDismiss to perform necessary url validation & submission * the responsive condition should encapsulate the media settings only. * utilize the LinkPicker when the Embed URL is being edited. * Removed unneeded className in the native embed-controls. * Added entry to the CHANGELOG. * Refactor EmbedBottomSheet component The EmbedBottomSheet component has been also renamed to EmbedLinkSettings because the component is no longer strictly tied to the bottom sheet component. * Added Edit Link functionality to Error Picker options. * Update url when value changes * Utilized the Block Settings Bottom Sheet for tests that are editing URL * Removed unneeded whiteline * Fix indentation and lint issues * Use within to query edit link field * Update responsive not supported test case * Expect for link field instead block settings button This change prevents potential act warnings after setting a URL in an empty embed block. * Invalidate core-data store before each test * Expect for link field instead block settings button in more tests * Add comments to test actions * Add set empty URL test case * Add edit URL when request fails test case * Created a ref to store if the onCloseSettingsSheet is consumed. * Added "modal" to "block-settings" TestId to make "block-settings-modal" * onCloseSettingsSheetConsumed is set to false when isVisible is true. * Added CHANGELOG entry to the unreleased section. Co-authored-by: Carlos Garcia <[email protected]>
- Loading branch information
1 parent
23412da
commit 80db388
Showing
10 changed files
with
437 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 0 additions & 78 deletions
78
packages/block-library/src/embed/embed-bottom-sheet.native.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import EmbedLinkSettings from './embed-link-settings'; | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { PanelBody, ToggleControl } from '@wordpress/components'; | ||
| import { InspectorControls } from '@wordpress/block-editor'; | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { store as editPostStore } from '@wordpress/edit-post'; | ||
|
|
||
| function getResponsiveHelp( checked ) { | ||
| return checked | ||
| ? __( | ||
| 'This embed will preserve its aspect ratio when the browser is resized.' | ||
| ) | ||
| : __( | ||
| 'This embed may not preserve its aspect ratio when the browser is resized.' | ||
| ); | ||
| } | ||
|
|
||
| const EmbedControls = ( { | ||
| blockSupportsResponsive, | ||
| themeSupportsResponsive, | ||
| allowResponsive, | ||
| toggleResponsive, | ||
| url, | ||
| linkLabel, | ||
| onEditURL, | ||
| } ) => { | ||
| const { closeGeneralSidebar: closeSettingsBottomSheet } = useDispatch( | ||
| editPostStore | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <InspectorControls> | ||
| { themeSupportsResponsive && blockSupportsResponsive && ( | ||
| <PanelBody title={ __( 'Media settings' ) }> | ||
| <ToggleControl | ||
| label={ __( 'Resize for smaller devices' ) } | ||
| checked={ allowResponsive } | ||
| help={ getResponsiveHelp } | ||
| onChange={ toggleResponsive } | ||
| /> | ||
| </PanelBody> | ||
| ) } | ||
| <PanelBody title={ __( 'Link settings' ) }> | ||
| <EmbedLinkSettings | ||
| value={ url } | ||
| label={ linkLabel } | ||
| onSubmit={ ( value ) => { | ||
| closeSettingsBottomSheet(); | ||
| onEditURL( value ); | ||
| } } | ||
| /> | ||
| </PanelBody> | ||
| </InspectorControls> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default EmbedControls; |
100 changes: 100 additions & 0 deletions
100
packages/block-library/src/embed/embed-link-settings.native.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { | ||
| LinkSettingsNavigation, | ||
| FooterMessageLink, | ||
| } from '@wordpress/components'; | ||
| import { isURL } from '@wordpress/url'; | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { store as noticesStore } from '@wordpress/notices'; | ||
| import { useCallback, useEffect, useRef, useState } from '@wordpress/element'; | ||
|
|
||
| const EmbedLinkSettings = ( { | ||
| autoFocus, | ||
| value, | ||
| label, | ||
| isVisible, | ||
| onClose, | ||
| onSubmit, | ||
| withBottomSheet, | ||
| } ) => { | ||
| const url = useRef( value ); | ||
| const [ inputURL, setInputURL ] = useState( value ); | ||
| const { createErrorNotice } = useDispatch( noticesStore ); | ||
|
|
||
| const linkSettingsOptions = { | ||
| url: { | ||
| label: sprintf( | ||
| // translators: %s: embed block variant's label e.g: "Twitter". | ||
| __( '%s link' ), | ||
| label | ||
| ), | ||
| placeholder: __( 'Add link' ), | ||
| autoFocus, | ||
| autoFill: true, | ||
| }, | ||
| footer: { | ||
| label: ( | ||
| <FooterMessageLink | ||
| href={ __( | ||
| 'https://wordpress.org/support/article/embeds/' | ||
| ) } | ||
| value={ __( 'Learn more about embeds' ) } | ||
| /> | ||
| ), | ||
| separatorType: 'topFullWidth', | ||
| }, | ||
| }; | ||
|
|
||
| const onDismiss = useCallback( () => { | ||
| if ( ! isURL( url.current ) && url.current !== '' ) { | ||
| createErrorNotice( __( 'Invalid URL. Please enter a valid URL.' ) ); | ||
| // If the URL was already defined, we submit it to stop showing the embed placeholder. | ||
| onSubmit( value ); | ||
| return; | ||
| } | ||
| onSubmit( url.current ); | ||
| }, [ onSubmit, value ] ); | ||
|
|
||
| useEffect( () => { | ||
| url.current = value; | ||
| setInputURL( value ); | ||
| }, [ value ] ); | ||
|
|
||
| /** | ||
| * If the Embed Bottom Sheet component does not utilize a bottom sheet then the onDismiss action is not | ||
| * called. Here we are wiring the onDismiss to the onClose callback that gets triggered when input is submitted. | ||
| */ | ||
| const performOnCloseOperations = useCallback( () => { | ||
| if ( onClose ) { | ||
| onClose(); | ||
| } | ||
|
|
||
| if ( ! withBottomSheet ) { | ||
| onDismiss(); | ||
| } | ||
| }, [ onClose ] ); | ||
|
|
||
| const onSetAttributes = useCallback( ( attributes ) => { | ||
| url.current = attributes.url; | ||
| setInputURL( attributes.url ); | ||
| }, [] ); | ||
|
|
||
| return ( | ||
| <LinkSettingsNavigation | ||
| isVisible={ isVisible } | ||
| url={ inputURL } | ||
| onClose={ performOnCloseOperations } | ||
| onDismiss={ onDismiss } | ||
| setAttributes={ onSetAttributes } | ||
| options={ linkSettingsOptions } | ||
| testID="embed-edit-url-modal" | ||
| withBottomSheet={ withBottomSheet } | ||
| showIcon | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default EmbedLinkSettings; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.