Skip to content

Block Library: Avoid column width auto-adjustment when sibling width changes #19515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 11 commits into from
Feb 10, 2020
Merged

Block Library: Avoid column width auto-adjustment when sibling width changes #19515

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ab29ee6
Block Library: Avoid column auto-adjustment when width changes
aduth Jan 8, 2020
7f9dca6
Block Library: Column: Add step attribute to column width range input
aduth Jan 8, 2020
9f79462
Edit Post: Remove horizontal margins from notices rendered in sidebar
aduth Feb 7, 2020
e25b28b
Block Library: Column: Show Notice when total width is not 100%
aduth Feb 7, 2020
92b8fd4
Block Library: Show Columns block range control only when "Manual" width
aduth Feb 7, 2020
1a4b11f
Revert "Block Library: Show Columns block range control only when "Ma…
aduth Feb 7, 2020
dce3d05
Revert "Block Library: Column: Show Notice when total width is not 100%"
aduth Feb 7, 2020
9477e5a
Revert "Edit Post: Remove horizontal margins from notices rendered in…
aduth Feb 7, 2020
457c19c
Block Library: Column: Add placeholder label for auto width
aduth Feb 7, 2020
7997bf6
Block Library: Columns: Consider explicit only if all blocks
aduth Feb 7, 2020
5d9dff2
Block Library: Column: Grow to maximally fill space
aduth Feb 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Revert "Block Library: Show Columns block range control only when "Ma… 
…nual" width"

This reverts commit 92b8fd4.
  • Loading branch information
@aduth
aduth committed Feb 7, 2020
commit 1a4b11ffb27677ffe3274e51c5dd4504563616d8
69 changes: 13 additions & 56 deletions packages/block-library/src/column/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,11 @@ import {
BlockVerticalAlignmentToolbar,
InspectorControls,
} from '@wordpress/block-editor';
import {
PanelBody,
RangeControl,
RadioControl,
Notice,
} from '@wordpress/components';
import { PanelBody, RangeControl, Notice } from '@wordpress/components';
import { withDispatch, withSelect, useSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { toWidthPrecision } from '../columns/utils';

/**
* Component which renders a notice if the sum total width of columns of the
* root block (the Columns parent) are all explicitly assigned and not equal
Expand Down Expand Up @@ -83,10 +73,8 @@ function ColumnEdit( {
className,
updateAlignment,
hasChildBlocks,
totalColumns,
} ) {
const { verticalAlignment, width } = attributes;
const hasExplicitWidth = width !== undefined;

const classes = classnames( className, 'block-core-columns', {
[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
Expand All @@ -102,46 +90,19 @@ function ColumnEdit( {
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'Column settings' ) }>
<RadioControl
label={ __( 'Width' ) }
selected={ hasExplicitWidth ? 'manual' : 'auto' }
options={ [
{
label: __(
'Automatically adjust to occupy available space'
),
value: 'auto',
},
{
label: __( 'Manual width' ),
value: 'manual',
},
] }
onChange={ ( nextValue ) => {
setAttributes( {
width:
nextValue === 'manual'
? toWidthPrecision( 100 / totalColumns )
: undefined,
} );
<RangeControl
label={ __( 'Percentage width' ) }
value={ width || '' }
onChange={ ( nextWidth ) => {
setAttributes( { width: nextWidth } );
} }
min={ 0 }
max={ 100 }
step={ 0.1 }
required
allowReset
/>
{ hasExplicitWidth && (
<>
<RangeControl
label={ __( 'Percentage width' ) }
value={ width }
onChange={ ( nextWidth ) => {
setAttributes( { width: nextWidth } );
} }
min={ 0 }
max={ 100 }
step={ 0.1 }
required
/>
<InvalidWidthNotice clientId={ clientId } />
</>
) }
<InvalidWidthNotice clientId={ clientId } />
</PanelBody>
</InspectorControls>
<InnerBlocks
Expand All @@ -159,14 +120,10 @@ function ColumnEdit( {
export default compose(
withSelect( ( select, ownProps ) => {
const { clientId } = ownProps;
const { getBlockOrder, getBlockRootClientId } = select(
'core/block-editor'
);
const { getBlockOrder } = select( 'core/block-editor' );

return {
hasChildBlocks: getBlockOrder( clientId ).length > 0,
totalColumns: getBlockOrder( getBlockRootClientId( clientId ) )
.length,
};
} ),
withDispatch( ( dispatch, ownProps, registry ) => {
Expand Down