Merge pull request #598 from WordPress/update/346-list-block-save-fix

List blocks can now save changes to their content
WordPress · May 5, 2017 · 3225c46 · 3225c46
2 parents 17a7a88 + 0a3cf93
commit 3225c46
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 58 deletions.
diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js
@@ -18,10 +18,11 @@ import TinyMCE from './tinymce';
 import Toolbar from '../../../editor/components/toolbar';
 
 const KEYCODE_BACKSPACE = 8;
-const formatMap = {
-	strong: 'bold',
-	em: 'italic',
-	del: 'strikethrough'
+
+const alignmentMap = {
+	alignleft: 'left',
+	alignright: 'right',
+	aligncenter: 'center'
 };
 
 const ALIGNMENT_CONTROLS = [
@@ -195,21 +196,15 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onNodeChange( { element, parents } ) {
-		let alignment = null;
 		const formats = {};
-		parents.forEach( ( node ) => {
-			const tag = node.nodeName.toLowerCase();
-
-			if ( formatMap.hasOwnProperty( tag ) ) {
-				formats[ formatMap[ tag ] ] = true;
-			} else if ( tag === 'a' ) {
-				formats.link = { value: node.getAttribute( 'href' ), node };
-			}
-
-			if ( tag === 'p' ) {
-				alignment = node.style.textAlign || 'left';
-			}
-		} );
+		const link = parents.find( ( node ) => node.nodeName.toLowerCase() === 'a' );
+		if ( link ) {
+			formats.link = { value: link.getAttribute( 'href' ), link };
+		}
+		const activeFormats = this.editor.formatter.matchAll( [	'bold', 'italic', 'strikethrough' ] );
+		activeFormats.forEach( ( activeFormat ) => formats[ activeFormat ] = true );
+		const alignments = this.editor.formatter.matchAll( [ 'alignleft', 'aligncenter', 'alignright' ] );
+		const alignment = alignments.length > 0 ? alignmentMap[ alignments[ 0 ] ] : null;
 
 		const focusPosition = this.getRelativePosition( element );
 		const bookmark = this.editor.selection.getBookmark( 2, true );
@@ -306,6 +301,8 @@ export default class Editable extends wp.element.Component {
 		this.setState( {
 			formats: merge( {}, this.state.formats, formats )
 		} );
+
+		this.editor.setDirty( true );
 	}
 
 	isAlignmentActive( align ) {

diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js
@@ -5,7 +5,7 @@ import './style.scss';
 import { registerBlock, query as hpq } from 'api';
 import Editable from 'components/editable';
 
-const { children, prop, query } = hpq;
+const { children, prop } = hpq;
 
 registerBlock( 'core/list', {
 	title: wp.i18n.__( 'List' ),
@@ -14,72 +14,51 @@ registerBlock( 'core/list', {
 
 	attributes: {
 		nodeName: prop( 'ol,ul', 'nodeName' ),
-		items: query( 'li', {
-			value: children()
-		} )
+		values: children( 'ol,ul' )
 	},
 
 	controls: [
 		{
-			icon: 'editor-alignleft',
-			title: wp.i18n.__( 'Align left' ),
-			isActive: ( { align } ) => ! align || 'left' === align,
+			icon: 'editor-ul',
+			title: wp.i18n.__( 'Convert to unordered' ),
+			isActive: ( { nodeName = 'OL' } ) => nodeName === 'UL',
 			onClick( attributes, setAttributes ) {
-				setAttributes( { align: undefined } );
+				setAttributes( { nodeName: 'UL' } );
 			}
 		},
 		{
-			icon: 'editor-aligncenter',
-			title: wp.i18n.__( 'Align center' ),
-			isActive: ( { align } ) => 'center' === align,
+			icon: 'editor-ol',
+			title: wp.i18n.__( 'Convert to ordered' ),
+			isActive: ( { nodeName = 'OL' } ) => nodeName === 'OL',
 			onClick( attributes, setAttributes ) {
-				setAttributes( { align: 'center' } );
-			}
-		},
-		{
-			icon: 'editor-alignright',
-			title: wp.i18n.__( 'Align right' ),
-			isActive: ( { align } ) => 'right' === align,
-			onClick( attributes, setAttributes ) {
-				setAttributes( { align: 'right' } );
-			}
-		},
-		{
-			icon: 'editor-justify',
-			title: wp.i18n.__( 'Justify' ),
-			isActive: ( { align } ) => 'justify' === align,
-			onClick( attributes, setAttributes ) {
-				setAttributes( { align: 'justify' } );
+				setAttributes( { nodeName: 'OL' } );
 			}
 		}
 	],
 
-	edit( { attributes, focus, setFocus } ) {
-		const { nodeName = 'OL', items = [], align } = attributes;
-		const content = items.map( ( item, i ) => {
-			return <li key={ i }>{ item.value }</li>;
-		} );
-
+	edit( { attributes, setAttributes, focus, setFocus } ) {
+		const { nodeName = 'OL', values = [] } = attributes;
 		return (
 			<Editable
 				tagName={ nodeName.toLowerCase() }
-				style={ align ? { textAlign: align } : null }
-				value={ content }
+				onChange={ ( nextValues ) => {
+					setAttributes( { values: nextValues } );
+				} }
+				value={ values }
 				focus={ focus }
 				onFocus={ setFocus }
+				showAlignments
 				className="blocks-list" />
 		);
 	},
 
 	save( { attributes } ) {
-		const { nodeName = 'OL', items = [] } = attributes;
+		const { nodeName = 'OL', values = [] } = attributes;
 
 		return wp.element.createElement(
 			nodeName.toLowerCase(),
 			null,
-			items.map( ( item, index ) => (
-				<li key={ index }>{ item.value }</li>
-			) )
+			values
 		);
 	}
 } );