Merge pull request #531 from Automattic/master

Release 18/06/2020

Author: adekbadek

class-newspack-blocks.php

@@ -362,18 +362,13 @@ function ( $acc, $block ) use ( $block_name ) {
 			$args['orderby']  = 'post__in';
 		} else {
 			$args['posts_per_page'] = $posts_to_show;
-			if ( ! self::is_experimental_mode() ) {
-				$args['posts_per_page'] += count( $newspack_blocks_post_id );
-			}
 			if ( count( $newspack_blocks_all_specific_posts_ids ) ) {
 				$args['post__not_in'] = $newspack_blocks_all_specific_posts_ids;
 			}
-			if ( self::is_experimental_mode() && count( $newspack_blocks_post_id ) ) {
-				$args['post__not_in'] = array_merge(
-					$args['post__not_in'] ?? [],
-					array_keys( $newspack_blocks_post_id )
-				);
-			}
+			$args['post__not_in'] = array_merge(
+				$args['post__not_in'] ?? [],
+				array_keys( $newspack_blocks_post_id )
+			);
 			if ( $authors && count( $authors ) ) {
 				$args['author__in'] = $authors;
 			}
@@ -504,14 +499,5 @@ public static function get_patterns_for_post_type( $post_type = null ) {
 		}
 		return $clean;
 	}
-
-	/**
-	 * Is experimental mode flag set in wp-config.php
-	 *
-	 * @return boolean Experimental mode flag.
-	 */
-	public static function is_experimental_mode() {
-		return defined( 'NEWSPACK_BLOCKS_EXPERIMENTAL_MODE' ) && NEWSPACK_BLOCKS_EXPERIMENTAL_MODE;
-	}
 }
 Newspack_Blocks::init();

package-lock.json

@@ -66,6 +66,8 @@
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "react": "^16.12.0",
+    "redux": "^4.0.5",
+    "redux-saga": "^1.1.3",
     "swiper": "4.5.1"
   },
   "scripts": {

package.json

@@ -324,7 +324,7 @@ class Edit extends Component {
 					label={ __( 'Error', 'newspack-blocks' ) }
 					instructions={ error }
 				>
-					<ExternalLink href="/wp-admin/admin.php?page=newspack-donations-wizard#/">
+					<ExternalLink href="/wp-admin/admin.php?page=newspack-reader-revenue-wizard#/donations">
 						{ __( 'Go to donation settings to troubleshoot.', 'newspack-blocks' ) }
 					</ExternalLink>
 				</Placeholder>
@@ -340,7 +340,7 @@ class Edit extends Component {
 						'newspack-blocks'
 					) }
 				>
-					<ExternalLink href="/wp-admin/admin.php?page=newspack-donations-wizard#/">
+					<ExternalLink href="/wp-admin/admin.php?page=newspack-reader-revenue-wizard#/donations">
 						{ __( 'Set up donation settings.', 'newspack-blocks' ) }
 					</ExternalLink>
 				</Placeholder>
@@ -461,7 +461,7 @@ class Edit extends Component {
 									) }
 								</p>
 
-								<ExternalLink href="/wp-admin/admin.php?page=newspack-donations-wizard#/">
+								<ExternalLink href="/wp-admin/admin.php?page=newspack-reader-revenue-wizard#/donations">
 									{ __( 'Edit donation settings.', 'newspack-blocks' ) }
 								</ExternalLink>
 							</Fragment>

src/blocks/donate/edit.js

@@ -5,7 +5,12 @@
  */
 import QueryControls from '../../components/query-controls';
 import { STORE_NAMESPACE } from './store';
-import { isBlogPrivate, isSpecificPostModeActive, queryCriteriaFromAttributes } from './utils';
+import {
+	getEditorBlocksIds,
+	isBlogPrivate,
+	shouldReflow,
+	queryCriteriaFromAttributes,
+} from './utils';
 import { formatAvatars, formatByline } from '../../shared/js/utils';
 
 /**
@@ -91,7 +96,7 @@ const coverIcon = (
 
 class Edit extends Component {
 	renderPost = post => {
-		const { attributes } = this.props;
+		const { attributes, isUIDisabled } = this.props;
 		const {
 			showImage,
 			imageShape,
@@ -121,7 +126,10 @@ class Edit extends Component {
 		};
 
 		const postClasses = classNames(
-			{ 'post-has-image': post.newspack_featured_image_src },
+			{
+				'post-has-image': post.newspack_featured_image_src,
+				'homepage-posts-block__post--disabled': isUIDisabled,
+			},
 			post.newspack_article_classes
 		);
 
@@ -292,7 +300,6 @@ class Edit extends Component {
 							setAttributes( { tagExclusions: _tagExclusions } )
 						}
 					/>
-
 					{ postLayout === 'grid' && (
 						<RangeControl
 							label={ __( 'Columns', 'newspack-blocks' ) }
@@ -467,6 +474,18 @@ class Edit extends Component {
 		);
 	};
 
+	componentDidMount() {
+		this.props.triggerReflow();
+	}
+	componentDidUpdate( props ) {
+		if ( shouldReflow( props, this.props ) ) {
+			this.props.triggerReflow();
+		}
+	}
+	componentWillUnmount() {
+		this.props.triggerReflow();
+	}
+
 	render() {
 		/**
 		 * Constants
@@ -475,12 +494,11 @@ class Edit extends Component {
 		const {
 			attributes,
 			className,
-			clientId,
 			setAttributes,
 			isSelected,
 			latestPosts,
 			textColor,
-			markPostsAsDisplayed,
+			error,
 		} = this.props;
 
 		const {
@@ -584,7 +602,6 @@ class Edit extends Component {
 			},
 		];
 
-		markPostsAsDisplayed( clientId, latestPosts );
 		return (
 			<Fragment>
 				<div
@@ -606,9 +623,15 @@ class Edit extends Component {
 						{ latestPosts && ! latestPosts.length && (
 							<Placeholder>{ __( 'Sorry, no posts were found.', 'newspack-blocks' ) }</Placeholder>
 						) }
-						{ ! latestPosts && (
+						{ ! latestPosts && ! error && (
 							<Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />
 						) }
+						{ ! latestPosts && error && (
+							<Placeholder className="component-placeholder__align-center homepage-posts-block--error">
+								{ error }
+							</Placeholder>
+						) }
+
 						{ latestPosts && latestPosts.map( post => this.renderPost( post ) ) }
 					</div>
 				</div>
@@ -645,27 +668,39 @@ class Edit extends Component {
 
 export default compose( [
 	withColors( { textColor: 'color' } ),
-	withSelect( ( select, props ) => {
-		const { attributes, clientId } = props;
+	withSelect( ( select, { clientId, attributes } ) => {
+		const { getEditorBlocks, getBlocks } = select( 'core/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;
+
+		const { getPosts, getError, isUIDisabled } = select( STORE_NAMESPACE );
+
+		const props = {
+			isEditorBlock,
+			isUIDisabled: isUIDisabled(),
+			error: getError( { clientId } ),
+			topBlocksClientIdsInOrder: getBlocks().map( block => block.clientId ),
+		};
 
-		const latestPostsQuery = queryCriteriaFromAttributes( attributes );
-		if ( ! isSpecificPostModeActive( attributes ) ) {
-			const postIdsToExclude = select( STORE_NAMESPACE ).previousPostIds( clientId );
-			latestPostsQuery.exclude = postIdsToExclude.join( ',' );
+		if ( isEditorBlock ) {
+			props.latestPosts = getPosts( { clientId } );
+		} else {
+			// For block preview, display without deduplication. If there would be a way to match the outside-editor's
+			// block clientId to the clientId of the block that's being previewed, the correct posts could be shown here.
+			props.latestPosts = select( 'core' ).getEntityRecords(
+				'postType',
+				'post',
+				queryCriteriaFromAttributes( attributes )
+			);
 		}
 
-		return {
-			latestPosts: select( 'core' ).getEntityRecords( 'postType', 'post', latestPostsQuery ),
-		};
+		return props;
 	} ),
-	withDispatch( ( dispatch, props ) => {
-		const { attributes } = props;
-		const markPostsAsDisplayed = isSpecificPostModeActive( attributes )
-			? dispatch( STORE_NAMESPACE ).markSpecificPostsAsDisplayed
-			: dispatch( STORE_NAMESPACE ).markPostsAsDisplayed;
-
+	withDispatch( ( dispatch, { isEditorBlock } ) => {
 		return {
-			markPostsAsDisplayed,
+			// Only editor blocks can trigger reflows.
+			triggerReflow: isEditorBlock ? dispatch( STORE_NAMESPACE ).reflow : () => {},
 		};
 	} ),
 ] )( Edit );

src/blocks/homepage-articles/edit.js

@@ -2,8 +2,10 @@
  * Internal dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { name, settings } from '.';
+import { settings, name } from '.';
 import { registerQueryStore } from './store';
 
-registerBlockType( `newspack-blocks/${ name }`, settings );
-registerQueryStore( `newspack-blocks/${ name }` );
+const BLOCK_NAME = `newspack-blocks/${ name }`;
+
+registerBlockType( BLOCK_NAME, settings );
+registerQueryStore( BLOCK_NAME );

src/blocks/homepage-articles/editor.js

@@ -1,5 +1,6 @@
 @import '../../shared/sass/variables';
 @import '../../shared/sass/placeholder';
+@import '../../shared/sass/colors';
 
 .type-scale-slider {
 	.dashicon {
@@ -48,3 +49,25 @@
 .editor-styles-wrapper.wpnbha__wp-block-button__wrapper {
 	background-color: transparent;
 }
+
+.homepage-posts-block {
+	&--error.components-placeholder {
+		color: $color__error;
+	}
+	&__post {
+		&--disabled {
+			position: relative;
+			&::after {
+				content: '';
+				position: absolute;
+				z-index: 2;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				background-color: #fff;
+				opacity: 0.6;
+			}
+		}
+	}
+}