From 6b7b94a7e4edf41a5bb2da98b29d97e813579b65 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 14:28:05 +0100 Subject: [PATCH 1/7] Enable layout hooks supported by native The only hook currently supported by the native version is "core/layout/addAttribute", which extends block attributes to include "layout". --- .../block-editor/src/hooks/index.native.js | 1 + .../block-editor/src/hooks/layout.native.js | 23 +++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 packages/block-editor/src/hooks/layout.native.js diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 06ea26e2e157c..57e98ef91f915 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 0000000000000..2e9a873bdd1ec --- /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' +); From 05d2688a13336c0730c233829a2f772077eeff7a Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 14:29:49 +0100 Subject: [PATCH 2/7] Fix content justification in buttons block --- packages/block-library/src/buttons/edit.native.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 9bee300cba01d..610d0be633ba4 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -30,7 +30,7 @@ const ALLOWED_BLOCKS = [ buttonBlockName ]; const layoutProp = { type: 'default', alignments: [] }; export default function ButtonsEdit( { - attributes: { contentJustification, align }, + attributes: { layout, align }, clientId, isSelected, setAttributes, @@ -39,6 +39,7 @@ export default function ButtonsEdit( { const [ resizeObserver, sizes ] = useResizeObserver(); const [ maxWidth, setMaxWidth ] = useState( 0 ); const { marginLeft: spacing } = styles.spacing; + const { justifyContent } = layout || {}; const { isInnerButtonSelected, shouldDelete } = useSelect( ( select ) => { @@ -126,9 +127,11 @@ export default function ButtonsEdit( { - setAttributes( { contentJustification: value } ) + setAttributes( { + layout: { ...layout, justifyContent: value }, + } ) } popoverProps={ { position: 'bottom right', @@ -154,7 +157,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. From 98eb9b44cfd2185de1ac2e4d3905bcd7f045134e Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 16:57:00 +0100 Subject: [PATCH 3/7] Use default block layout when no layout attribute --- packages/block-library/src/buttons/edit.native.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 610d0be633ba4..fe6186f1278b8 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'; @@ -35,11 +35,17 @@ export default function ButtonsEdit( { isSelected, setAttributes, blockWidth, + name, } ) { const [ resizeObserver, sizes ] = useResizeObserver(); const [ maxWidth, setMaxWidth ] = useState( 0 ); const { marginLeft: spacing } = styles.spacing; - const { justifyContent } = layout || {}; + + // 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 ) => { @@ -130,7 +136,10 @@ export default function ButtonsEdit( { value={ justifyContent } onChange={ ( value ) => setAttributes( { - layout: { ...layout, justifyContent: value }, + layout: { + ...usedLayout, + justifyContent: value, + }, } ) } popoverProps={ { From 1fc638e8e4e2491684a396cca1f8a4e1cc98b34e Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 17:54:37 +0100 Subject: [PATCH 4/7] Use snapshot testing in border radius test case Additionally, the test case has been nested in a describe block. --- .../src/buttons/test/edit.native.js | 89 +++++++++---------- 1 file changed, 43 insertions(+), 46 deletions(-) diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index cfee24e237fcf..6915a4058f4e7 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -27,59 +27,56 @@ 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 buttonInnerBlock = await waitFor( () => + within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ ) + ); + fireEvent.press( buttonInnerBlock ); - const settingsButton = await waitFor( () => - getByA11yLabel( 'Open Settings' ) - ); - fireEvent.press( settingsButton ); + const settingsButton = await waitFor( () => + getByA11yLabel( 'Open Settings' ) + ); + fireEvent.press( settingsButton ); - const radiusStepper = await waitFor( () => - getByA11yLabel( /Border Radius/ ) - ); + const radiusStepper = await waitFor( () => + getByA11yLabel( /Border Radius/ ) + ); - const incrementButton = await waitFor( () => - within( radiusStepper ).getByTestId( 'Increment' ) - ); - fireEvent( incrementButton, 'onPressIn' ); + const incrementButton = await waitFor( () => + within( radiusStepper ).getByTestId( 'Increment' ) + ); + fireEvent( incrementButton, 'onPressIn' ); - const expectedHtml = ` -
-
Hello
-
-`; - expect( getEditorHtml() ).toBe( expectedHtml ); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); } ); From 0bc71117fa3d25079cc94a7c99a5e6bbf0b7377d Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 17:55:24 +0100 Subject: [PATCH 5/7] Create buttons block snapshots --- .../src/buttons/test/__snapshots__/edit.native.js.snap | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap 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 0000000000000..2545938122c2d --- /dev/null +++ b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Buttons block when a button is shown adjusts the border radius 1`] = ` +" +
+
Hello
+
+" +`; From 0219e5bf7dfd3aa17a7f4abb9a0a5229eace4a61 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 17:56:04 +0100 Subject: [PATCH 6/7] Add justify content test cases to buttons block --- .../test/__snapshots__/edit.native.js.snap | 18 ++++++++++ .../src/buttons/test/edit.native.js | 33 +++++++++++++++++++ 2 files changed, 51 insertions(+) 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 index 2545938122c2d..77c8ca306d822 100644 --- a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap @@ -1,5 +1,23 @@ // 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`] = ` "
diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index 6915a4058f4e7..a9ea061a9f6e7 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -79,4 +79,37 @@ describe( 'Buttons block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); } ); + + 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 block = await waitFor( () => + getByA11yLabel( /Buttons Block\. Row 1/ ) + ); + fireEvent.press( block ); + + fireEvent.press( + getByA11yLabel( 'Change items justification' ) + ); + + // Select alignment option + fireEvent.press( + await waitFor( () => getByText( justificationOption ) ) + ); + + expect( getEditorHtml() ).toMatchSnapshot(); + } ) + ); + } ); } ); From 1131588cae9d0c1da62aba0e201227419cd31025 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 Jan 2022 18:13:44 +0100 Subject: [PATCH 7/7] Update react-native-editor changelog --- 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 370ab02d93ddf..32a2940d82c41 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]