From 43250cebf0fee36138ca03c7b0dec63b0470118b Mon Sep 17 00:00:00 2001 From: Jackie6 <541172791@qq.com> Date: Thu, 15 Aug 2019 04:42:16 -0700 Subject: [PATCH] List block: add start and reversed attributes (#15113) * Squash for easier merge: f6ad4f07e6a1c8d99e55aa7acb01cf8ef1dfddd7 (HEAD -> update/list-block, Jackie6/update/list-block) Add id to BaseControl 212cab106044c4d7300d9441e48241b911db0bcb Fix unit test and e2e test 421a198bf58431c91b4c09d6ee45ba932762cb15 Refine the type definition of start and reversed 4172707059558ba9fc47d9557457e0b8e441f050 Fix typo 21ed1dbeb7881a9a5a6eea85fb3293e9d6ba0d5a Update CSS styles 925f1ab1ed073b31358a129c62abd56021e14c38 Update list type style and remove description ef0aca95cb88203ceff78b81473e37ad8fc22714 Allow the start to be NaN 495166d3fc14591ceb88597915a19e976b2ebbeb Change to check strict equality 216ca51cfacfc174ca00d9669b88b53eaa6d0356 Fix the accidental change of travis yml 8e31259624ece930c385bf9cb7a28046505c7aff Change local state to attributes 09199ff9516aab099e47ed6e61fd4e2fadfdb95b Add list type, start, reversed settings * Revert adding attribute for now, let's extract to a separate PR * Use proper TextControl * Adjust toggle control to unset attribute * Clearer label --- .../src/components/rich-text/index.js | 5 ++ packages/block-library/src/list/block.json | 6 +++ packages/block-library/src/list/edit.js | 53 +++++++++++++++++-- packages/block-library/src/list/save.js | 10 +++- packages/rich-text/src/component/editable.js | 8 +++ 5 files changed, 75 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index e765ba77291dc..51af2159ec92f 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -331,6 +331,9 @@ class RichTextWrapper extends Component { identifier, // eslint-disable-next-line no-unused-vars instanceId, + // To do: find a better way to implicitly inherit props. + start, + reversed, // From experimental filter. To do: pick props instead. ...experimentalProps } = this.props; @@ -400,6 +403,8 @@ class RichTextWrapper extends Component { aria-autocomplete={ listBoxId ? 'list' : undefined } aria-owns={ listBoxId } aria-activedescendant={ activeId } + start={ start } + reversed={ reversed } /> } diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json index 26cdf8c19d678..654bd3e281ccf 100644 --- a/packages/block-library/src/list/block.json +++ b/packages/block-library/src/list/block.json @@ -12,6 +12,12 @@ "selector": "ol,ul", "multiline": "li", "default": "" + }, + "start": { + "type": "number" + }, + "reversed": { + "type": "boolean" } } } diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index 5c7e04a667af4..efc38c50a63e2 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -3,8 +3,18 @@ */ import { __, _x } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; -import { RichText, BlockControls, RichTextShortcut } from '@wordpress/block-editor'; -import { Toolbar } from '@wordpress/components'; +import { + RichText, + BlockControls, + RichTextShortcut, + InspectorControls, +} from '@wordpress/block-editor'; +import { + Toolbar, + TextControl, + PanelBody, + ToggleControl, +} from '@wordpress/components'; import { __unstableIndentListItems as indentListItems, __unstableOutdentListItems as outdentListItems, @@ -25,7 +35,7 @@ export default function ListEdit( { onReplace, className, } ) { - const { ordered, values } = attributes; + const { ordered, values, reversed, start } = attributes; const tagName = ordered ? 'ol' : 'ul'; const controls = ( { value, onChange } ) => { @@ -111,7 +121,7 @@ export default function ListEdit( { ; }; - return ( + return <> createBlock( 'core/paragraph' ) } onReplace={ onReplace } onRemove={ () => onReplace( [] ) } + start={ start } + reversed={ reversed } > { controls } - ); + { ordered && + + + { + const int = parseInt( value, 10 ); + + setAttributes( { + // It should be possible to unset the value, + // e.g. with an empty string. + start: isNaN( int ) ? undefined : int, + } ); + } } + value={ Number.isInteger( start ) ? start.toString( 10 ) : '' } + step="1" + /> + { + setAttributes( { + // Unset the attribute if not reversed. + reversed: value || undefined, + } ); + } } + /> + + + } + ; } diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js index 9b0ff55b44cd5..18458c2c1ce5a 100644 --- a/packages/block-library/src/list/save.js +++ b/packages/block-library/src/list/save.js @@ -4,10 +4,16 @@ import { RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { ordered, values } = attributes; + const { ordered, values, reversed, start } = attributes; const tagName = ordered ? 'ol' : 'ul'; return ( - + ); } diff --git a/packages/rich-text/src/component/editable.js b/packages/rich-text/src/component/editable.js index c5407fc308582..c4c7cb453acd8 100644 --- a/packages/rich-text/src/component/editable.js +++ b/packages/rich-text/src/component/editable.js @@ -116,6 +116,14 @@ export default class Editable extends Component { this.editorNode.className = nextProps.className; } + if ( this.props.start !== nextProps.start ) { + this.editorNode.setAttribute( 'start', nextProps.start ); + } + + if ( this.props.reversed !== nextProps.reversed ) { + this.editorNode.reversed = nextProps.reversed; + } + const { removedKeys, updatedKeys } = diffAriaProps( this.props, nextProps ); removedKeys.forEach( ( key ) => this.editorNode.removeAttribute( key ) );