@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

package/src/blocks/homepage-articles/editor.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { settings, name } from '.';
+import { name as carouselBlockName } from '../carousel';
+import { registerQueryStore } from './store';
+
+const BLOCK_NAME = `newspack-blocks/${ name }`;
+
+registerBlockType( BLOCK_NAME, settings );
+registerQueryStore( [ BLOCK_NAME, `newspack-blocks/${ carouselBlockName }` ] );

package/src/blocks/homepage-articles/editor.scss

@@ -0,0 +1,226 @@
+@use "newspack-colors" as np-colors;
+@use "../../shared/sass/variables";
+@use "../../shared/sass/placeholder";
+@use "../../shared/sass/mixins";
+
+.wpnbha {
+	.editor-rich-text {
+		width: 100%;
+	}
+
+	/* Image styles */
+	.post-thumbnail {
+		margin: 0;
+		margin-bottom: 0.25em;
+
+		img {
+			height: auto;
+			width: 100%;
+		}
+
+		figcaption {
+			margin-bottom: 0.5em;
+		}
+	}
+
+	/* Article meta */
+	.entry-meta {
+		display: flex;
+		font-size: 0.8em;
+		flex-wrap: wrap;
+		align-items: center;
+		margin-top: 0.5em;
+		// Work around RawHTML `<div />` encapsulation.
+		div.byline-container {
+			display: inline;
+			display: flex;
+			align-items: center;
+			margin-right: 1.5em;
+		}
+	}
+
+	.cat-links {
+		font-size: variables.$font__size-xs;
+	}
+
+	.entry-meta .avatar {
+		display: inline-block;
+		margin-right: 0.5em;
+	}
+
+	/* Article excerpt */
+	.excerpt-contain p {
+		margin: 0.5em 0;
+	}
+
+	/* Typescale */
+	// Default typescale:
+	.entry-title {
+		font-size: 1.2em;
+		margin: 0 0 0.25em;
+	}
+
+	.avatar {
+		height: 25px;
+		width: 25px;
+	}
+
+	@include mixins.media( tablet ) {
+		&.ts-4 article .entry-title {
+			font-size: 1.6em;
+		}
+	}
+
+	.newspack-post-subtitle {
+		&--in-homepage-block {
+			margin-top: 0.3em;
+			margin-bottom: 0;
+			line-height: 1.4;
+			font-style: italic;
+		}
+	}
+
+	// Different typescales:
+	&.ts-10,
+	&.ts-9,
+	&.ts-8 {
+		.entry-title {
+			line-height: 1.1;
+		}
+	}
+
+	$typescales: (
+		"ts-10" (
+			".entry-title": "2.6em",
+			".newspack-post-subtitle": "1.4em",
+		),
+		"ts-9" (
+			".entry-title": "2.4em",
+			".newspack-post-subtitle": "1.4em",
+		),
+		"ts-8" (
+			".entry-title": "2.2em",
+			".newspack-post-subtitle": "1.4em",
+		),
+		"ts-7" (
+			".entry-title": "2em",
+			".newspack-post-subtitle": "1.4em",
+		),
+		"ts-6" (
+			".entry-title": "1.7em",
+			".newspack-post-subtitle": "1.4em",
+		),
+		"ts-5" (
+			".entry-title": "1.4em",
+			".newspack-post-subtitle": "1.2em",
+		),
+		"ts-3" (
+			".entry-title": "1em",
+			".newspack-post-subtitle": "0.8em",
+			".entry-wrapper p": "0.8em",
+			".entry-wrapper .more-link": "0.8em",
+		),
+		"ts-2" (
+			".entry-title": "0.9em",
+			"article .newspack-post-subtitle": "0.8em",
+			"article .entry-wrapper p": "0.8em",
+			"article .entry-wrapper .more-link": "0.8em",
+		),
+		"ts-1" (
+			".entry-title": "0.9em",
+			"article .newspack-post-subtitle": "0.8em",
+			"article .entry-wrapper p": "0.8em",
+			"article .entry-wrapper .more-link": "0.8em",
+		),
+	);
+
+	// Loop through all our $typescales and generate font size CSS:
+	@each $type, $selectors in $typescales {
+		@each $selector, $values in $selectors {
+			@each $value in $values {
+				&.#{$type} {
+					#{$selector} {
+						font-size: #{$value};
+					}
+				}
+			}
+		}
+	}
+}
+
+/* Load More button */
+[data-type="newspack-blocks/homepage-articles"] .wp-block-button__link {
+	height: auto;
+	width: auto;
+}
+
+.newspack-block {
+	&--error.components-placeholder {
+		color: np-colors.$error-500;
+	}
+	&--disabled {
+		position: relative;
+		&::after {
+			content: "";
+			position: absolute;
+			z-index: 2;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			background-color: np-colors.$neutral-000;
+			opacity: 0.6;
+		}
+	}
+
+	&__panel {
+		.spacing-sizes-control {
+			.components-range-control__root {
+				> span {
+					margin-top: 0;
+				}
+			}
+		}
+
+		> *:not(.components-panel__body-title) {
+			margin-bottom: 16px;
+			margin-top: 0;
+
+			&:last-of-type {
+				margin-bottom: 8px;
+			}
+		}
+
+		&.is-content {
+			.autocomplete-tokenfield + .components-checkbox-control {
+				margin-top: -8px;
+			}
+		}
+	}
+}
+
+.components-base-control__field:empty {
+	display: none;
+
+	+ .components-base-control__help {
+		margin: 0;
+	}
+}
+
+.components-base-control__label-dropdown {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 4px;
+
+	.components-base-control__label {
+		margin: 0 !important;
+	}
+
+	.components-select-control__input {
+		font-size: 11px !important;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+	}
+}

package/src/blocks/homepage-articles/index.js

@@ -0,0 +1,102 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+import { contentLoop as icon } from 'newspack-icons';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+/**
+ * Style dependencies - will load in editor
+ */
+import './editor.scss';
+import './view.scss';
+import metadata from './block.json';
+const { name, attributes, apiVersion, category } = metadata;
+
+// Name must be exported separately.
+export { name };
+
+export const title = __( 'Content Loop', 'newspack-blocks' );
+
+export const settings = {
+	apiVersion,
+	title,
+	icon: {
+		src: icon,
+		foreground: colors[ 'primary-400' ],
+	},
+	attributes,
+	category,
+	keywords: [
+		__( 'posts', 'newspack-blocks' ),
+		__( 'articles', 'newspack-blocks' ),
+		__( 'latest', 'newspack-blocks' ),
+		__( 'homepage', 'newspack-blocks' ),
+		__( 'query', 'newspack-blocks' ),
+	],
+	description: __( 'An advanced block that allows displaying content based on different parameters and visual configurations.', 'newspack-blocks' ),
+	styles: [
+		{
+			name: 'default',
+			label: _x( 'Default', 'block style', 'newspack-blocks' ),
+			isDefault: true,
+		},
+		{
+			name: 'borders',
+			label: _x( 'Borders', 'block style', 'newspack-blocks' ),
+		},
+	],
+	supports: {
+		html: false,
+		align: [ 'wide', 'full' ],
+		default: '',
+	},
+	edit,
+	save: () => null, // to use view.php
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/latest-posts' ],
+				transform: ( { displayPostContent, displayPostDate, postLayout, columns, postsToShow, categories } ) => {
+					return createBlock( applyFilters( 'blocks.transforms_from_name', 'newspack-blocks/homepage-articles' ), {
+						showExcerpt: displayPostContent,
+						showDate: displayPostDate,
+						postLayout,
+						columns,
+						postsToShow,
+						showAuthor: false,
+						categories: categories ? [ categories ] : [],
+					} );
+				},
+			},
+		],
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'core/latest-posts' ],
+				transform: ( { showExcerpt, showDate, postLayout, columns, postsToShow, categories } ) => {
+					return createBlock( 'core/latest-posts', {
+						displayPostContent: showExcerpt,
+						displayPostDate: showDate,
+						postLayout,
+						columns,
+						postsToShow,
+						categories: categories[ 0 ] || '',
+					} );
+				},
+			},
+		],
+	},
+};

package/src/blocks/homepage-articles/store.js

@@ -0,0 +1,193 @@
+/**
+ * External dependencies
+ */
+import { createStore, applyMiddleware } from 'redux';
+import { call, put, takeLatest, delay } from 'redux-saga/effects';
+import createSagaMiddleware from 'redux-saga';
+import { set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { register, select } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import { getBlockQueries, sanitizePostList, recursivelyGetBlocks } from './utils';
+
+const { name } = metadata;
+export const STORE_NAMESPACE = `newspack-blocks/${ name }`;
+
+const initialState = {
+	// Map of returned posts to block clientIds.
+	postsByBlock: {},
+	errorsByBlock: {},
+};
+
+// Generic redux action creators, not @wordpress/data actions.
+const actions = {
+	reflow: () => {
+		reduxStore.dispatch( {
+			type: 'REFLOW',
+		} );
+	},
+};
+
+// Generic redux selectors, not @wordpress/data selectors.
+const selectors = {
+	getPosts( { clientId } ) {
+		return reduxStore.getState().postsByBlock[ clientId ];
+	},
+	getError( { clientId } ) {
+		return reduxStore.getState().errorsByBlock[ clientId ];
+	},
+	isUIDisabled() {
+		return reduxStore.getState().isUIDisabled;
+	},
+};
+
+const reducer = ( state = initialState, action ) => {
+	switch ( action.type ) {
+		case 'DISABLE_UI':
+			return set( state, 'isUIDisabled', true );
+		case 'ENABLE_UI':
+			return set( state, 'isUIDisabled', false );
+		case 'UPDATE_BLOCK_POSTS':
+			return set( state, [ 'postsByBlock', action.clientId ], action.posts );
+		case 'UPDATE_BLOCK_ERROR':
+			return set( state, [ 'errorsByBlock', action.clientId ], action.error );
+	}
+	return state;
+};
+
+// create the saga middleware
+const sagaMiddleware = createSagaMiddleware();
+// mount it on the Store
+const reduxStore = createStore( reducer, applyMiddleware( sagaMiddleware ) );
+
+const genericStore = {
+	getSelectors() {
+		return selectors;
+	},
+	getActions() {
+		return actions;
+	},
+	...reduxStore,
+};
+
+/**
+ * A cache for posts queries.
+ */
+const POSTS_QUERIES_CACHE = {};
+const createCacheKey = JSON.stringify;
+
+/**
+ * Get posts for a single block.
+ *
+ * @yield
+ * @param {Object} block an object with a postsQuery and a clientId
+ */
+function* getPostsForBlock( block ) {
+	const cacheKey = createCacheKey( block.postsQuery );
+	const restUrl = window.newspack_blocks_data.posts_rest_url;
+	let posts = POSTS_QUERIES_CACHE[ cacheKey ];
+	if ( posts === undefined ) {
+		const url = addQueryArgs( restUrl, {
+			...block.postsQuery,
+			// `context=edit` is needed, so that custom REST fields are returned.
+			context: 'edit',
+		} );
+		posts = yield call( apiFetch, { url } );
+		POSTS_QUERIES_CACHE[ cacheKey ] = posts;
+	}
+
+	const postsIds = posts.map( post => post.id );
+	yield put( { type: 'UPDATE_BLOCK_POSTS', clientId: block.clientId, posts } );
+	return postsIds;
+}
+
+/**
+ * Whether a block uses deduplication.
+ *
+ * @param {string} clientId
+ *
+ * @return {boolean} whether the block uses deduplication
+ */
+function shouldDeduplicate( clientId ) {
+	const { getBlock } = select( 'core/block-editor' );
+	const block = getBlock( clientId );
+	return block?.attributes?.deduplicate;
+}
+
+const createFetchPostsSaga = blockNames => {
+	/**
+	 * "worker" Saga: will be fired on REFLOW actions
+	 *
+	 * @yield
+	 */
+	function* fetchPosts() {
+		// debounce by 300ms
+		yield delay( 300 );
+
+		const { getBlocks } = select( 'core/block-editor' );
+		const { getCurrentPostId } = select( 'core/editor' );
+
+		yield put( { type: 'DISABLE_UI' } );
+
+		const blocks = recursivelyGetBlocks( getBlocks );
+
+		const blockQueries = getBlockQueries( blocks, blockNames );
+
+		// Use requested specific posts ids as the starting state of exclusion list.
+		const specificPostsId = blockQueries.reduce( ( acc, { clientId, postsQuery } ) => {
+			if ( shouldDeduplicate( clientId ) && postsQuery.include ) {
+				acc = [ ...acc, ...postsQuery.include ];
+			}
+			return acc;
+		}, [] );
+
+		let exclude = sanitizePostList( [ ...specificPostsId, getCurrentPostId() ] );
+		while ( blockQueries.length ) {
+			const nextBlock = blockQueries.shift();
+			const deduplicate = shouldDeduplicate( nextBlock.clientId );
+			if ( deduplicate ) {
+				nextBlock.postsQuery.exclude = exclude;
+			}
+			let fetchedPostIds = [];
+			try {
+				fetchedPostIds = yield call( getPostsForBlock, nextBlock );
+			} catch ( e ) {
+				yield put( { type: 'UPDATE_BLOCK_ERROR', clientId: nextBlock.clientId, error: e.message } );
+			}
+			if ( deduplicate ) {
+				exclude = [ ...exclude, ...fetchedPostIds ];
+			}
+		}
+
+		yield put( { type: 'ENABLE_UI' } );
+	}
+
+	/**
+	 * Starts fetchPosts on each dispatched `REFLOW` action.
+	 *
+	 * fetchPosts will wait 300ms before fetching. Thanks to takeLatest,
+	 * if new reflow happens during this time, the reflow from before
+	 * will be cancelled.
+	 *
+	 * @yield
+	 */
+	return function* fetchPostsSaga() {
+		yield takeLatest( 'REFLOW', fetchPosts );
+	};
+};
+
+export const registerQueryStore = blockNames => {
+	register( { name: STORE_NAMESPACE, instantiate: () => genericStore } );
+
+	// Run the saga ✨
+	sagaMiddleware.run( createFetchPostsSaga( blockNames ) );
+};