diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 06ea26e2e157c4..57e98ef91f915d 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -9,6 +9,7 @@ import './generated-class-name'; import './style'; import './color'; import './font-size'; +import './layout'; export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/hooks/layout.native.js b/packages/block-editor/src/hooks/layout.native.js new file mode 100644 index 00000000000000..2e9a873bdd1ecf --- /dev/null +++ b/packages/block-editor/src/hooks/layout.native.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { removeFilter } from '@wordpress/hooks'; + +/** + * Internal dependencies + */ +import './layout.js'; + +// This filter is removed because layout styles shouldn't be added +// until layout types are supported in the native version. +removeFilter( + 'editor.BlockListBlock', + 'core/editor/layout/with-layout-styles' +); + +// This filter is removed because the layout controls shouldn't be +// enabled until layout types are supported in the native version. +removeFilter( + 'editor.BlockEdit', + 'core/editor/layout/with-inspector-controls' +); diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 9bee300cba01dd..fe6186f1278b8f 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -13,7 +13,7 @@ import { JustifyContentControl, store as blockEditorStore, } from '@wordpress/block-editor'; -import { createBlock } from '@wordpress/blocks'; +import { createBlock, getBlockSupport } from '@wordpress/blocks'; import { useResizeObserver } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { useState, useEffect, useRef, useCallback } from '@wordpress/element'; @@ -30,16 +30,23 @@ const ALLOWED_BLOCKS = [ buttonBlockName ]; const layoutProp = { type: 'default', alignments: [] }; export default function ButtonsEdit( { - attributes: { contentJustification, align }, + attributes: { layout, align }, clientId, isSelected, setAttributes, blockWidth, + name, } ) { const [ resizeObserver, sizes ] = useResizeObserver(); const [ maxWidth, setMaxWidth ] = useState( 0 ); const { marginLeft: spacing } = styles.spacing; + // Extract attributes from block layout + const layoutBlockSupport = getBlockSupport( name, '__experimentalLayout' ); + const defaultBlockLayout = layoutBlockSupport?.default; + const usedLayout = layout || defaultBlockLayout || {}; + const { justifyContent } = usedLayout; + const { isInnerButtonSelected, shouldDelete } = useSelect( ( select ) => { const { @@ -126,9 +133,14 @@ export default function ButtonsEdit( { - setAttributes( { contentJustification: value } ) + setAttributes( { + layout: { + ...usedLayout, + justifyContent: value, + }, + } ) } popoverProps={ { position: 'bottom right', @@ -154,7 +166,7 @@ export default function ButtonsEdit( { shouldRenderFooterAppender && renderFooterAppender.current } orientation="horizontal" - horizontalAlignment={ contentJustification } + horizontalAlignment={ justifyContent } onDeleteBlock={ shouldDelete ? remove : undefined } onAddBlock={ onAddNextButton } parentWidth={ maxWidth } // This value controls the width of that the buttons are able to expand to. diff --git a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap new file mode 100644 index 00000000000000..77c8ca306d822d --- /dev/null +++ b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Buttons block justify content sets Justify items center option 1`] = ` +" +
+" +`; + +exports[`Buttons block justify content sets Justify items left option 1`] = ` +" +
+" +`; + +exports[`Buttons block justify content sets Justify items right option 1`] = ` +" +
+" +`; + +exports[`Buttons block when a button is shown adjusts the border radius 1`] = ` +" +
+
Hello
+
+" +`; diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index cfee24e237fcfd..a9ea061a9f6e7b 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -27,59 +27,89 @@ afterAll( () => { } ); } ); -describe( 'when a button is shown', () => { - it( 'adjusts the border radius', async () => { - const initialHtml = ` -
-
Hello
-
- `; - const { getByA11yLabel } = await initializeEditor( { - initialHtml, - } ); +describe( 'Buttons block', () => { + describe( 'when a button is shown', () => { + it( 'adjusts the border radius', async () => { + const initialHtml = ` +
+
Hello
+
+ `; + const { getByA11yLabel } = await initializeEditor( { + initialHtml, + } ); - const buttonsBlock = await waitFor( () => - getByA11yLabel( /Buttons Block\. Row 1/ ) - ); - fireEvent.press( buttonsBlock ); + const buttonsBlock = await waitFor( () => + getByA11yLabel( /Buttons Block\. Row 1/ ) + ); + fireEvent.press( buttonsBlock ); - // onLayout event has to be explicitly dispatched in BlockList component, - // otherwise the inner blocks are not rendered. - const innerBlockListWrapper = await waitFor( () => - within( buttonsBlock ).getByTestId( 'block-list-wrapper' ) - ); - fireEvent( innerBlockListWrapper, 'layout', { - nativeEvent: { - layout: { - width: 100, + // onLayout event has to be explicitly dispatched in BlockList component, + // otherwise the inner blocks are not rendered. + const innerBlockListWrapper = await waitFor( () => + within( buttonsBlock ).getByTestId( 'block-list-wrapper' ) + ); + fireEvent( innerBlockListWrapper, 'layout', { + nativeEvent: { + layout: { + width: 100, + }, }, - }, + } ); + + const buttonInnerBlock = await waitFor( () => + within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ ) + ); + fireEvent.press( buttonInnerBlock ); + + const settingsButton = await waitFor( () => + getByA11yLabel( 'Open Settings' ) + ); + fireEvent.press( settingsButton ); + + const radiusStepper = await waitFor( () => + getByA11yLabel( /Border Radius/ ) + ); + + const incrementButton = await waitFor( () => + within( radiusStepper ).getByTestId( 'Increment' ) + ); + fireEvent( incrementButton, 'onPressIn' ); + + expect( getEditorHtml() ).toMatchSnapshot(); } ); + } ); - const buttonInnerBlock = await waitFor( () => - within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ ) - ); - fireEvent.press( buttonInnerBlock ); + describe( 'justify content', () => { + [ + 'Justify items left', + 'Justify items center', + 'Justify items right', + ].forEach( ( justificationOption ) => + it( `sets ${ justificationOption } option`, async () => { + const initialHtml = ` +
+ `; + const { getByA11yLabel, getByText } = await initializeEditor( { + initialHtml, + } ); - const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) - ); - fireEvent.press( settingsButton ); + const block = await waitFor( () => + getByA11yLabel( /Buttons Block\. Row 1/ ) + ); + fireEvent.press( block ); - const radiusStepper = await waitFor( () => - getByA11yLabel( /Border Radius/ ) - ); + fireEvent.press( + getByA11yLabel( 'Change items justification' ) + ); + + // Select alignment option + fireEvent.press( + await waitFor( () => getByText( justificationOption ) ) + ); - const incrementButton = await waitFor( () => - within( radiusStepper ).getByTestId( 'Increment' ) + expect( getEditorHtml() ).toMatchSnapshot(); + } ) ); - fireEvent( incrementButton, 'onPressIn' ); - - const expectedHtml = ` -
-
Hello
-
-`; - expect( getEditorHtml() ).toBe( expectedHtml ); } ); } ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 370ab02d93ddfc..32a2940d82c415 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 +- [**] Fix content justification attribute in Buttons block [#37887] ## 1.69.0 - [*] Give multi-line block names central alignment in inserter [#37185]