diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index f8cf0297302ccd..83b7a7fee062da 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -7,12 +7,7 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import {
- Notice,
- PanelBody,
- RangeControl,
- ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
import {
InspectorControls,
@@ -25,167 +20,14 @@ import {
} from '@wordpress/block-editor';
import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
import {
- createBlock,
createBlocksFromInnerBlocksTemplate,
store as blocksStore,
} from '@wordpress/blocks';
-/**
- * Internal dependencies
- */
-import {
- hasExplicitPercentColumnWidths,
- getMappedColumnWidths,
- getRedistributedColumnWidths,
- toWidthPrecision,
-} from './utils';
-
const DEFAULT_BLOCK = {
name: 'core/column',
};
-function ColumnInspectorControls( {
- clientId,
- setAttributes,
- isStackedOnMobile,
-} ) {
- const { count, canInsertColumnBlock, minCount } = useSelect(
- ( select ) => {
- const {
- canInsertBlockType,
- canRemoveBlock,
- getBlocks,
- getBlockCount,
- } = select( blockEditorStore );
- const innerBlocks = getBlocks( clientId );
-
- // Get the indexes of columns for which removal is prevented.
- // The highest index will be used to determine the minimum column count.
- const preventRemovalBlockIndexes = innerBlocks.reduce(
- ( acc, block, index ) => {
- if ( ! canRemoveBlock( block.clientId ) ) {
- acc.push( index );
- }
- return acc;
- },
- []
- );
-
- return {
- count: getBlockCount( clientId ),
- canInsertColumnBlock: canInsertBlockType(
- 'core/column',
- clientId
- ),
- minCount: Math.max( ...preventRemovalBlockIndexes ) + 1,
- };
- },
- [ clientId ]
- );
- const { getBlocks } = useSelect( blockEditorStore );
- const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-
- /**
- * Updates the column count, including necessary revisions to child Column
- * blocks to grant required or redistribute available space.
- *
- * @param {number} previousColumns Previous column count.
- * @param {number} newColumns New column count.
- */
- function updateColumns( previousColumns, newColumns ) {
- let innerBlocks = getBlocks( clientId );
- const hasExplicitWidths = hasExplicitPercentColumnWidths( innerBlocks );
-
- // Redistribute available width for existing inner blocks.
- const isAddingColumn = newColumns > previousColumns;
-
- if ( isAddingColumn && hasExplicitWidths ) {
- // If adding a new column, assign width to the new column equal to
- // as if it were `1 / columns` of the total available space.
- const newColumnWidth = toWidthPrecision( 100 / newColumns );
- const newlyAddedColumns = newColumns - previousColumns;
-
- // Redistribute in consideration of pending block insertion as
- // constraining the available working width.
- const widths = getRedistributedColumnWidths(
- innerBlocks,
- 100 - newColumnWidth * newlyAddedColumns
- );
-
- innerBlocks = [
- ...getMappedColumnWidths( innerBlocks, widths ),
- ...Array.from( {
- length: newlyAddedColumns,
- } ).map( () => {
- return createBlock( 'core/column', {
- width: `${ newColumnWidth }%`,
- } );
- } ),
- ];
- } else if ( isAddingColumn ) {
- innerBlocks = [
- ...innerBlocks,
- ...Array.from( {
- length: newColumns - previousColumns,
- } ).map( () => {
- return createBlock( 'core/column' );
- } ),
- ];
- } else if ( newColumns < previousColumns ) {
- // The removed column will be the last of the inner blocks.
- innerBlocks = innerBlocks.slice(
- 0,
- -( previousColumns - newColumns )
- );
- if ( hasExplicitWidths ) {
- // Redistribute as if block is already removed.
- const widths = getRedistributedColumnWidths( innerBlocks, 100 );
-
- innerBlocks = getMappedColumnWidths( innerBlocks, widths );
- }
- }
-
- replaceInnerBlocks( clientId, innerBlocks );
- }
-
- return (
-
- { canInsertColumnBlock && (
- <>
-
- updateColumns( count, Math.max( minCount, value ) )
- }
- min={ Math.max( 1, minCount ) }
- max={ Math.max( 6, count ) }
- />
- { count > 6 && (
-
- { __(
- 'This column count exceeds the recommended amount and may cause visual breakage.'
- ) }
-
- ) }
-
- ) }
-
- setAttributes( {
- isStackedOnMobile: ! isStackedOnMobile,
- } )
- }
- />
-
- );
-}
-
function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
const registry = useRegistry();
@@ -237,11 +79,18 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
/>
-
+
+
+ setAttributes( {
+ isStackedOnMobile: ! isStackedOnMobile,
+ } )
+ }
+ />
+
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 07655981edcada..d1d7246f38b75d 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -9,7 +9,6 @@ import { View, Dimensions } from 'react-native';
import { __, sprintf } from '@wordpress/i18n';
import {
PanelBody,
- RangeControl,
FooterMessageControl,
UnitControl,
getValueAndUnit,
@@ -36,7 +35,6 @@ import {
} from '@wordpress/element';
import { useResizeObserver } from '@wordpress/compose';
import { createBlock } from '@wordpress/blocks';
-import { columns } from '@wordpress/icons';
/**
* Internal dependencies
*/
@@ -214,28 +212,12 @@ function ColumnsEditContainer( {
} );
}, [ editorSidebarOpened, isSelected, innerWidths ] );
- const onChangeColumnsNum = useCallback(
- ( value ) => {
- updateColumns( columnCount, value );
- },
- [ columnCount ]
- );
-
return (
<>
{ isSelected && (
<>
-
{ getColumnsSliders }
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index e322a52eeba10b..5caa544c2f38a6 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -46,46 +46,6 @@ test.describe( 'Columns', () => {
await expect( inserterOptions ).toHaveText( 'Column' );
} );
- test( 'prevent the removal of locked column block from the column count change UI', async ( {
- page,
- editor,
- pageUtils,
- } ) => {
- // Open Columns
- await editor.insertBlock( { name: 'core/columns' } );
- await editor.canvas
- .locator( '[aria-label="Three columns; equal split"]' )
- .click();
-
- // Lock last column block
- await editor.selectBlocks(
- editor.canvas.locator(
- 'role=document[name="Block: Column (3 of 3)"i]'
- )
- );
- await editor.clickBlockToolbarButton( 'Options' );
- await page.click( 'role=menuitem[name="Lock"i]' );
- await page.locator( 'role=checkbox[name="Prevent removal"i]' ).check();
- await page.click( 'role=button[name="Apply"i]' );
-
- // Select columns block
- await editor.selectBlocks(
- editor.canvas.locator( 'role=document[name="Block: Columns"i]' )
- );
- await editor.openDocumentSettingsSidebar();
-
- const columnsChangeInput = page.locator(
- 'role=spinbutton[name="Columns"i]'
- );
-
- // The min attribute should take into account locked columns
- await expect( columnsChangeInput ).toHaveAttribute( 'min', '3' );
-
- // Changing the number of columns should take into account locked columns
- await page.fill( 'role=spinbutton[name="Columns"i]', '1' );
- await pageUtils.pressKeys( 'Tab' );
- await expect( columnsChangeInput ).toHaveValue( '3' );
- } );
test( 'Ungroup properly', async ( { editor } ) => {
await editor.insertBlock( {
name: 'core/columns',
@@ -175,75 +135,6 @@ test.describe( 'Columns', () => {
] );
} );
- test.describe( 'should update the column widths correctly', () => {
- const initialColumnWidths = [ '10%', '20%', '30%', '40%' ];
-
- const expected = [
- {
- newColumnCount: 2,
- newColumnWidths: [ '33.33%', '66.67%' ],
- },
- {
- newColumnCount: 3,
- newColumnWidths: [ '16.67%', '33.33%', '50%' ],
- },
- {
- newColumnCount: 5,
- newColumnWidths: [ '8%', '16%', '24%', '32%', '20%' ],
- },
- {
- newColumnCount: 6,
- newColumnWidths: [
- '6.67%',
- '13.33%',
- '20%',
- '26.66%',
- '16.67%',
- '16.67%',
- ],
- },
- ];
-
- expected.forEach( ( { newColumnCount, newColumnWidths } ) => {
- test( `when the column count is changed to ${ newColumnCount }`, async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/columns',
- attributes: {
- columns: initialColumnWidths.length,
- },
- innerBlocks: initialColumnWidths.map( ( width ) => ( {
- name: 'core/column',
- attributes: { width },
- } ) ),
- } );
-
- await editor.selectBlocks(
- editor.canvas.getByRole( 'document', {
- name: 'Block: Columns',
- } )
- );
- await editor.openDocumentSettingsSidebar();
-
- await page
- .getByRole( 'spinbutton', { name: 'Columns' } )
- .fill( newColumnCount.toString() );
-
- await expect( editor.getBlocks() ).resolves.toMatchObject( [
- {
- name: 'core/columns',
- innerBlocks: newColumnWidths.map( ( width ) => ( {
- name: 'core/column',
- attributes: { width },
- } ) ),
- },
- ] );
- } );
- } );
- } );
-
test( 'should not split in middle', async ( { editor, page } ) => {
await editor.insertBlock( {
name: 'core/columns',
diff --git a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
index f0bfe5bff203fb..04e77491f3b0db 100644
--- a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
+++ b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
@@ -66,20 +66,20 @@ test.describe( 'Navigating the block hierarchy', () => {
await expect( listView ).toBeVisible();
await listView
- .getByRole( 'gridcell', { name: 'Columns', exact: true } )
+ .getByRole( 'gridcell', { name: 'Column', exact: true } )
+ .last()
.click();
- // Tweak the columns count.
- await page.getByRole( 'spinbutton', { name: 'Columns' } ).fill( '3' );
+ // Add another column block.
+ await pageUtils.pressKeys( 'primary+Alt+Y' );
// Wait for the new column block to appear in the list view
- const column = listView.getByRole( 'gridcell', {
- name: 'Column',
- exact: true,
- } );
- await expect( column ).toHaveCount( 3 );
-
- await column.last().click();
+ await expect(
+ listView.getByRole( 'gridcell', {
+ name: 'Column',
+ exact: true,
+ } )
+ ).toHaveCount( 3 );
// Open the block inserter.
await page.keyboard.press( 'ArrowDown' );
@@ -123,18 +123,12 @@ test.describe( 'Navigating the block hierarchy', () => {
await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
await page.keyboard.press( 'Enter' );
- // Move focus to the sidebar area.
- await pageUtils.pressKeys( 'ctrl+`' );
-
- // Navigate to the block settings sidebar and tweak the column count.
- await pageUtils.pressKeys( 'Tab', { times: 5 } );
- await expect(
- page.getByRole( 'slider', { name: 'Columns' } )
- ).toBeFocused();
- await page.keyboard.press( 'ArrowRight' );
+ // Add another column block.
+ await page.keyboard.press( 'ArrowDown' );
+ await pageUtils.pressKeys( 'primary+Alt+Y' );
// Navigate to the third column in the columns block via List View.
- await pageUtils.pressKeys( 'ctrlShift+`', { times: 2 } );
+ await pageUtils.pressKeys( 'access+o' );
await pageUtils.pressKeys( 'Tab', { times: 3 } );
await pageUtils.pressKeys( 'ArrowDown', { times: 4 } );