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