Optimize checking if footnotes block must be added/removed

Only check if footnotes block must be added or removed when the footnotes of a block change. Until now, the check was made everytime a block changed its attributes or was split.
WordPress · May 20, 2018 · 089dd9d · 089dd9d
1 parent 75fc957
commit 089dd9d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isFinite, find, omit } from 'lodash';
+import { isEqual, isFinite, find, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -144,6 +144,7 @@ class ParagraphBlock extends Component {
 	render() {
 		const {
 			attributes,
+			updateFootnotes,
 			setAttributes,
 			insertBlocksAfter,
 			mergeBlocks,
@@ -160,6 +161,7 @@ class ParagraphBlock extends Component {
 
 		const {
 			align,
+			blockFootnotes,
 			content,
 			dropCap,
 			placeholder,
@@ -233,18 +235,26 @@ class ParagraphBlock extends Component {
 						} }
 						value={ content }
 						onChange={ ( nextContent ) => {
+							const footnotes = parseFootnotesFromContent( nextContent );
+
 							setAttributes( {
 								content: nextContent,
-								blockFootnotes: parseFootnotesFromContent( nextContent ),
+								blockFootnotes: footnotes,
 							} );
+							if ( ! isEqual( blockFootnotes, footnotes ) ) {
+								updateFootnotes( footnotes );
+							}
 						} }
 						onSplit={ insertBlocksAfter ?
 							( before, after, ...blocks ) => {
+								const beforeFootnotes = parseFootnotesFromContent( before );
+								const afterFootnotes = parseFootnotesFromContent( after );
+								const afterBlock = createBlock( name, {
+									content: after,
+									blockFootnotes: parseFootnotesFromContent( after ),
+								} );
 								if ( after ) {
-									blocks.push( createBlock( name, {
-										content: after,
-										blockFootnotes: parseFootnotesFromContent( after ),
-									} ) );
+									blocks.push( afterBlock );
 								}
 
 								insertBlocksAfter( blocks );
@@ -257,6 +267,10 @@ class ParagraphBlock extends Component {
 								} else {
 									onReplace( [] );
 								}
+
+								if ( ! isEqual( blockFootnotes, beforeFootnotes ) && afterFootnotes.length ) {
+									updateFootnotes( beforeFootnotes, { [ afterBlock.uid ]: afterFootnotes } );
+								}
 							} :
 							undefined
 						}

diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -61,6 +61,7 @@ export class BlockListBlock extends Component {
 
 		this.setBlockListRef = this.setBlockListRef.bind( this );
 		this.bindBlockNode = this.bindBlockNode.bind( this );
+		this.updateFootnotes = this.updateFootnotes.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 		this.maybeHover = this.maybeHover.bind( this );
 		this.hideHoverEffects = this.hideHoverEffects.bind( this );
@@ -190,16 +191,19 @@ export class BlockListBlock extends Component {
 		}
 	}
 
-	setAttributes( attributes, shouldUpdateFootnotesBlockVisibilty = true ) {
+	updateFootnotes( currentBlockFootnotes, updatedBlocks ) {
+		const { block } = this.props;
+
+		updateFootnotesBlockVisibility( {
+			...updatedBlocks,
+			[ block.uid ]: currentBlockFootnotes,
+		} );
+	}
+
+	setAttributes( attributes ) {
 		const { block, onChange } = this.props;
 		const type = getBlockType( block.name );
 
-		if ( shouldUpdateFootnotesBlockVisibilty ) {
-			updateFootnotesBlockVisibility( {
-				[ block.uid ]: attributes.blockFootnotes,
-			} );
-		}
-
 		onChange( block.uid, attributes );
 
 		const metaAttributes = reduce( attributes, ( result, value, key ) => {
@@ -281,12 +285,6 @@ export class BlockListBlock extends Component {
 	}
 
 	insertBlocksAfter( blocks ) {
-		const footnotes = {};
-		blocks.forEach( ( block ) => {
-			footnotes[ block.uid ] = get( block, [ 'attributes', 'blockFootnotes' ] );
-		} );
-
-		updateFootnotesBlockVisibility( footnotes );
 		this.props.onInsertBlocks( blocks, this.props.order + 1 );
 	}
 
@@ -570,6 +568,7 @@ export class BlockListBlock extends Component {
 								name={ blockName }
 								isSelected={ isSelected }
 								attributes={ block.attributes }
+								updateFootnotes={ this.updateFootnotes }
 								setAttributes={ this.setAttributes }
 								insertBlocksAfter={ isLocked ? undefined : this.insertBlocksAfter }
 								onReplace={ isLocked ? undefined : onReplace }