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
WordPress · Aug 15, 2019 · 43250ce · 43250ce
1 parent e07fb3c
commit 43250ce
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 7 deletions.
diff --git 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 }
 								/>
 							}
 						</Autocomplete>

diff --git 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
@@ -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 <>
 		<RichText
 			identifier="values"
 			multiline="li"
@@ -126,8 +136,41 @@ export default function ListEdit( {
 			__unstableOnSplitMiddle={ () => createBlock( 'core/paragraph' ) }
 			onReplace={ onReplace }
 			onRemove={ () => onReplace( [] ) }
+			start={ start }
+			reversed={ reversed }
 		>
 			{ controls }
 		</RichText>
-	);
+		{ ordered &&
+			<InspectorControls>
+				<PanelBody title={ __( 'Ordered List Settings' ) }>
+					<TextControl
+						label={ __( 'Start Value' ) }
+						type="number"
+						onChange={ ( value ) => {
+							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"
+					/>
+					<ToggleControl
+						label={ __( 'Reverse List Numbering' ) }
+						checked={ reversed || false }
+						onChange={ ( value ) => {
+							setAttributes( {
+								// Unset the attribute if not reversed.
+								reversed: value || undefined,
+							} );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		}
+	</>;
 }
diff --git 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 (
-		<RichText.Content tagName={ tagName } value={ values } multiline="li" />
+		<RichText.Content
+			tagName={ tagName }
+			value={ values }
+			reversed={ reversed }
+			start={ start }
+			multiline="li"
+		/>
 	);
 }
diff --git 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 ) );