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 d9d9cda9eadd96..bb31bf0bc2bb84 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -16,6 +16,7 @@ import styles from './container.native.scss'; import InspectorControls from '../inspector-controls'; import ImageLinkDestinationsScreen from '../image-link-destinations'; import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients'; +import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel'; export const blockSettingsScreens = { settings: 'Settings', @@ -46,7 +47,10 @@ export default function BottomSheetSettings( props ) { - + <> + + + { it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => { // Arrange const screen = await initializeEditor(); - await addBlock( screen, 'Image' ); - - // Act - fireEvent( - screen.getByTestId( 'media-options-picker' ), - 'backdropPress' - ); + await addBlock( screen, 'Shortcode' ); // Assert expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull(); diff --git a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js new file mode 100644 index 00000000000000..f0403139f271ae --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import groups from '../inspector-controls/groups'; + +export default function AdvancedControls( props ) { + const Slot = groups.advanced?.Slot; + if ( ! Slot ) { + return null; + } + + return ( + + { ( fills ) => { + if ( ! fills.length ) { + return null; + } + + return ( + { fills } + ); + } } + + ); +} diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 2e79a9d9db17b2..92cb7f7a1b42ca 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { addFilter } from '@wordpress/hooks'; -import { PanelBody, TextControl, ExternalLink } from '@wordpress/components'; +import { TextControl, ExternalLink } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { hasBlockSupport } from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; @@ -51,71 +51,51 @@ export function addAttribute( settings ) { return settings; } -function BlockEditAnchorControlPure( { - name: blockName, - anchor, - setAttributes, -} ) { +function BlockEditAnchorControlPure( { anchor, setAttributes } ) { const blockEditingMode = useBlockEditingMode(); - const isWeb = Platform.OS === 'web'; - const textControl = ( - - { __( - 'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.' - ) } + if ( blockEditingMode !== 'default' ) { + return null; + } - { isWeb && ( - - { __( 'Learn more about anchors' ) } - - ) } - - } - value={ anchor || '' } - placeholder={ ! isWeb ? __( 'Add an anchor' ) : null } - onChange={ ( nextValue ) => { - nextValue = nextValue.replace( ANCHOR_REGEX, '-' ); - setAttributes( { - anchor: nextValue, - } ); - } } - autoCapitalize="none" - autoComplete="off" - /> - ); + const isWeb = Platform.OS === 'web'; return ( - <> - { isWeb && blockEditingMode === 'default' && ( - - { textControl } - - ) } - { /* - * We plan to remove scoping anchors to 'core/heading' to support - * anchors for all eligble blocks. Additionally we plan to explore - * leveraging InspectorAdvancedControls instead of a custom - * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363 - */ } - { ! isWeb && blockName === 'core/heading' && ( - - - { textControl } - - - ) } - + + + { __( + 'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.' + ) } + + { isWeb && ( + + { __( 'Learn more about anchors' ) } + + ) } + + } + value={ anchor || '' } + placeholder={ ! isWeb ? __( 'Add an anchor' ) : null } + onChange={ ( nextValue ) => { + nextValue = nextValue.replace( ANCHOR_REGEX, '-' ); + setAttributes( { + anchor: nextValue, + } ); + } } + autoCapitalize="none" + autoComplete="off" + /> + ); } diff --git a/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap new file mode 100644 index 00000000000000..03407a1fe55d85 --- /dev/null +++ b/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`anchor should set the ID attribute on the block 1`] = ` +" +

+" +`; diff --git a/packages/block-editor/src/hooks/test/anchor.native.js b/packages/block-editor/src/hooks/test/anchor.native.js new file mode 100644 index 00000000000000..d6d2de845cbf48 --- /dev/null +++ b/packages/block-editor/src/hooks/test/anchor.native.js @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import { + addBlock, + changeTextOfTextInput, + getEditorHtml, + initializeEditor, + openBlockSettings, + screen, + setupCoreBlocks, +} from 'test/helpers'; + +setupCoreBlocks( [ 'core/paragraph' ] ); + +describe( 'anchor', () => { + it( 'should set the ID attribute on the block', async () => { + // Arrange + await initializeEditor(); + const block = await addBlock( screen, 'Paragraph' ); + await openBlockSettings( screen, block ); + + // Act + await changeTextOfTextInput( + await screen.getByPlaceholderText( 'Add an anchor' ), + 'my-anchor' + ); + + // Assert + expect( getEditorHtml() ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 70c636da4dccbd..a5d73156bf5571 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label to i - [**] [internal] Upgrade React Native to version 0.73.3 [#58475] - [**] Add error boundary components and exception logging [#59221] - [**] Fix crash occurring when the URL associated with a Video block is changed too quickly [#59841] +- [**] Enable setting HTML anchor IDs for all supported block types [#59802] ## 1.114.1 - [**] Fix a crash produced when the content of a synced pattern is updated [#59632]