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 ) );