fix(carousel): preview performance (#803)

- Ensure preview posts generation is idempotent - getBlocks of core/editor is deprecated in favour of core/block-editor
Automattic · Jul 14, 2021 · e5fc989 · e5fc989
1 parent 2815df4
commit e5fc989
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 48 deletions.
diff --git a/src/blocks/carousel/create-swiper.js b/src/blocks/carousel/create-swiper.js
@@ -30,8 +30,10 @@ function forEachNode( nodeList, cb ) {
  * @param {HTMLElement} slide Slide DOM element
  */
 function activateSlide( slide ) {
-	slide.setAttribute( 'aria-hidden', 'false' );
-	forEachNode( slide.querySelectorAll( 'a' ), el => el.removeAttribute( 'tabindex' ) );
+	if ( slide ) {
+		slide.setAttribute( 'aria-hidden', 'false' );
+		forEachNode( slide.querySelectorAll( 'a' ), el => el.removeAttribute( 'tabindex' ) );
+	}
 }
 
 /**
@@ -40,8 +42,10 @@ function activateSlide( slide ) {
  * @param {HTMLElement} slide Slide DOM element
  */
 function deactivateSlide( slide ) {
-	slide.setAttribute( 'aria-hidden', 'true' );
-	forEachNode( slide.querySelectorAll( 'a' ), el => el.setAttribute( 'tabindex', '-1' ) );
+	if ( slide ) {
+		slide.setAttribute( 'aria-hidden', 'true' );
+		forEachNode( slide.querySelectorAll( 'a' ), el => el.setAttribute( 'tabindex', '-1' ) );
+	}
 }
 
 /**

diff --git a/src/blocks/carousel/edit.js b/src/blocks/carousel/edit.js
@@ -71,10 +71,7 @@ class Edit extends Component {
 		const { attributes, latestPosts } = this.props;
 
 		if (
-			prevProps.latestPosts !== latestPosts ||
-			( prevProps.latestPosts &&
-				latestPosts &&
-				prevProps.latestPosts.length !== latestPosts.length ) ||
+			! isEqual( prevProps.latestPosts, latestPosts ) ||
 			! isEqual( prevProps.attributes, attributes )
 		) {
 			let initialSlide = 0;

diff --git a/src/blocks/homepage-articles/utils.js b/src/blocks/homepage-articles/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { uniqueId, times, isEqual, isUndefined, pick, pickBy } from 'lodash';
+import { times, isEqual, isUndefined, pick, pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -118,51 +118,56 @@ export const getEditorBlocksIds = blocks =>
 	} );
 
 const PREVIEW_IMAGE_BASE = window.newspack_blocks_data.assets_path;
-const generatePreviewPost = () => ( {
-	author: 1,
-	content: {
-		rendered: '<p>' + __( 'The post content.', 'newspack' ) + '</p>',
-	},
-	date_gmt: new Date().toISOString(),
-	excerpt: {
-		rendered: '<p>' + __( 'The post excerpt.', 'newspack' ) + '</p>',
-	},
-	featured_media: uniqueId(),
-	id: uniqueId(),
-	meta: {
-		newspack_post_subtitle: __( 'Post Subtitle', 'newspack' ),
-	},
-	title: {
-		rendered: __( 'Post Title', 'newspack' ),
-	},
-	newspack_article_classes: 'type-post',
-	newspack_author_info: [
-		{
-			display_name: __( 'Author Name', 'newspack' ),
-			avatar: `<div style="background: #36f;width: 40px;height: 40px;display: block;overflow: hidden;border-radius: 50%; max-width: 100%; max-height: 100%;"></div>`,
-			id: 1,
-			author_link: '/',
+const generatePreviewPost = id => {
+	const now = new Date();
+	now.setHours( 12, 0, 0, 0 );
+	return {
+		author: 1,
+		content: {
+			rendered: '<p>' + __( 'The post content.', 'newspack' ) + '</p>',
+		},
+		date_gmt: now.toISOString(),
+		excerpt: {
+			rendered: '<p>' + __( 'The post excerpt.', 'newspack' ) + '</p>',
+		},
+		featured_media: '1',
+		id,
+		meta: {
+			newspack_post_subtitle: __( 'Post Subtitle', 'newspack' ),
+		},
+		title: {
+			rendered: __( 'Post Title', 'newspack' ),
 		},
-	],
-	newspack_category_info: __( 'Category', 'newspack' ),
-	newspack_featured_image_caption: __( 'Featured image caption', 'newspack' ),
-	newspack_featured_image_src: {
-		large: `${ PREVIEW_IMAGE_BASE }/newspack-1024x536.jpg`,
-		landscape: `${ PREVIEW_IMAGE_BASE }/newspack-800x600.jpg`,
-		portrait: `${ PREVIEW_IMAGE_BASE }/newspack-600x800.jpg`,
-		square: `${ PREVIEW_IMAGE_BASE }/newspack-800x800.jpg`,
-		uncropped: `${ PREVIEW_IMAGE_BASE }/newspack-1024x536.jpg`,
-	},
-	newspack_has_custom_excerpt: false,
-	newspack_post_format: 'standard',
-	newspack_post_sponsors: false,
-} );
+		newspack_article_classes: 'type-post',
+		newspack_author_info: [
+			{
+				display_name: __( 'Author Name', 'newspack' ),
+				avatar: `<div style="background: #36f;width: 40px;height: 40px;display: block;overflow: hidden;border-radius: 50%; max-width: 100%; max-height: 100%;"></div>`,
+				id: 1,
+				author_link: '/',
+			},
+		],
+		newspack_category_info: __( 'Category', 'newspack' ),
+		newspack_featured_image_caption: __( 'Featured image caption', 'newspack' ),
+		newspack_featured_image_src: {
+			large: `${ PREVIEW_IMAGE_BASE }/newspack-1024x536.jpg`,
+			landscape: `${ PREVIEW_IMAGE_BASE }/newspack-800x600.jpg`,
+			portrait: `${ PREVIEW_IMAGE_BASE }/newspack-600x800.jpg`,
+			square: `${ PREVIEW_IMAGE_BASE }/newspack-800x800.jpg`,
+			uncropped: `${ PREVIEW_IMAGE_BASE }/newspack-1024x536.jpg`,
+		},
+		newspack_has_custom_excerpt: false,
+		newspack_post_format: 'standard',
+		newspack_post_sponsors: false,
+	};
+};
 
 const getPreviewPosts = attributes => times( attributes.postsToShow, generatePreviewPost );
 
 export const postsBlockSelector = ( select, { clientId, attributes } ) => {
 	const { getPostTypes } = select( 'core' );
-	const { getEditorBlocks, getBlocks } = select( 'core/editor' );
+	const { getEditorBlocks } = select( 'core/editor' );
+	const { getBlocks } = select( 'core/block-editor' );
 	const editorBlocksIds = getEditorBlocksIds( getEditorBlocks() );
 	// The block might be rendered in the block styles preview, not in the editor.
 	const isEditorBlock = editorBlocksIds.indexOf( clientId ) >= 0;