Create Query Block

lib/blocks.php

@@ -42,6 +42,7 @@ function gutenberg_reregister_core_block_types() {
 		'post-excerpt.php'        => 'core/post-excerpt',
 		'post-featured-image.php' => 'core/post-featured-image',
 		'post-tags.php'           => 'core/post-tags',
+		'query.php'               => 'core/query',
 	);
 
 	$registry = WP_Block_Type_Registry::get_instance();

packages/block-library/src/editor.scss

@@ -30,6 +30,7 @@
 @import "./paragraph/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
+@import "./query/editor.scss";
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";

packages/block-library/src/index.js

@@ -75,6 +75,7 @@ import * as postDate from './post-date';
 import * as postExcerpt from './post-excerpt';
 import * as postFeaturedImage from './post-featured-image';
 import * as postTags from './post-tags';
+import * as query from './query';
 
 /**
  * Function to register an individual block.
@@ -207,6 +208,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postExcerpt,
 								postFeaturedImage,
 								postTags,
+								query,
 						  ]
 						: [] ),
 				].forEach( registerBlock );

packages/block-library/src/query/block.json

@@ -0,0 +1,45 @@
+{
+	"name": "core/query",
+	"category": "layout",
+	"attributes": {
+		"className": {
+			"type": "string"
+		},
+		"criteria": {
+			"type": "object",
+			"default": {
+				"per_page": 3,
+				"offset": 0,
+				"tags": [],
+				"categories": [],
+				"author": [],
+				"specificPosts": []
+			}
+		},
+		"blocks": {
+			"type": "array",
+			"default": [
+				{
+					"name": "core/post-title",
+					"innerBlocks": [],
+					"isValid": true
+				},
+				{
+					"name": "core/post-date",
+					"innerBlocks": [],
+					"isValid": true
+				},
+				{
+					"name": "core/post-author",
+					"innerBlocks": [],
+					"isValid": true
+				},
+				{
+					"name": "core/post-excerpt",
+					"innerBlocks": [],
+					"isValid": true
+				}
+			]
+		}
+	}
+}

packages/block-library/src/query/edit.js

@@ -0,0 +1,218 @@
+/**
+ * Internal dependencies
+ */
+import QueryPanel from './query-panel';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { debounce, isUndefined, pickBy } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+import {
+	BlockList,
+	BlockEditorProvider,
+	InspectorControls,
+	WritingFlow,
+} from '@wordpress/block-editor';
+import { cloneBlock } from '@wordpress/blocks';
+import { PanelBody, Placeholder, Spinner } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { EntityProvider } from '@wordpress/core-data';
+import { withSelect } from '@wordpress/data';
+
+class Edit extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			editingPost: null,
+			blocksTree: {},
+		};
+
+		this.debouncedCreateBlockTree = debounce(
+			this.createBlockTree.bind( this ),
+			1000
+		);
+	}
+
+	componentDidMount() {
+		this.createBlockTree();
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { query } = this.props;
+		if ( prevProps.query !== query ) {
+			this.createBlockTree();
+		}
+	}
+
+	createBlockTree() {
+		const { editingPost, blocksTree } = this.state;
+		const { attributes, query } = this.props;
+		const { blocks } = attributes;
+		const newBlocksTree = ( query || [] ).reduce(
+			( accumulator, post ) => ( {
+				...accumulator,
+				[ post.id ]:
+					post.id === editingPost
+						? blocksTree[ post.id ]
+						: blocks.map( ( block ) => cloneBlock( block ) ),
+			} ),
+			{}
+		);
+		this.setState( { blocksTree: newBlocksTree } );
+	}
+
+	updateBlocks( blocks, postId ) {
+		const { setAttributes } = this.props;
+		const { blocksTree } = this.state;
+		const cleanBlocks = blocks.map( ( block ) => cloneBlock( block ) );
+		this.setState(
+			{
+				blocksTree: { ...( blocksTree || [] ), [ postId ]: blocks },
+				editingPost: postId,
+			},
+			() => {
+				setAttributes( { blocks: cleanBlocks } );
+				this.debouncedCreateBlockTree();
+			}
+		);
+	}
+
+	render() {
+		const {
+			attributes,
+			className,
+			postList,
+			query,
+			setAttributes,
+			settings,
+		} = this.props;
+
+		const { criteria } = attributes;
+
+		const { editingPost, blocksTree } = this.state;
+		const classes = classNames(
+			className,
+			editingPost ? 'is-editing' : ''
+		);
+
+		return (
+			<div className={ classes }>
+				<InspectorControls>
+					<PanelBody
+						title={ __( 'Query Settings' ) }
+						initialOpen={ true }
+					>
+						<QueryPanel
+							criteria={ criteria }
+							postList={ postList }
+							onChange={ ( newCriteria ) =>
+								setAttributes( { criteria: newCriteria } )
+							}
+						/>
+					</PanelBody>
+				</InspectorControls>
+				<Fragment>
+					{ ! query && (
+						<Placeholder>
+							<Spinner />
+						</Placeholder>
+					) }
+					{ query && ! query.length && (
+						<Placeholder>
+							{ __( 'Sorry, no posts were found.' ) }
+						</Placeholder>
+					) }
+					{ query &&
+						!! query.length &&
+						query.map( ( post ) => {
+							if ( ! blocksTree[ post.id ] ) return null;
+							return (
+								<article
+									className={
+										post.id === editingPost
+											? 'is-editing'
+											: ''
+									}
+									key={ post.id }
+								>
+									<EntityProvider
+										kind="postType"
+										type="post"
+										id={ post.id }
+									>
+										<BlockEditorProvider
+											value={ blocksTree[ post.id ] }
+											onChange={ ( blocks ) =>
+												this.updateBlocks(
+													blocks,
+													post.id
+												)
+											}
+											settings={ settings }
+										>
+											<WritingFlow>
+												<BlockList />
+											</WritingFlow>
+										</BlockEditorProvider>
+									</EntityProvider>
+								</article>
+							);
+						} ) }
+				</Fragment>
+			</div>
+		);
+	}
+}
+
+const isSpecificPostModeActive = ( { specificMode, specificPosts } ) =>
+	specificMode && specificPosts && specificPosts.length;
+
+const queryCriteriaFromAttributes = ( criteria ) => {
+	const {
+		per_page: perPage,
+		author,
+		categories,
+		tags,
+		specificPosts,
+	} = criteria;
+	const queryCriteria = pickBy(
+		isSpecificPostModeActive( criteria )
+			? {
+					include: specificPosts,
+					orderby: 'include',
+					per_page: specificPosts.length,
+			  }
+			: {
+					per_page: perPage,
+					categories,
+					author,
+					tags,
+			  },
+		( value ) => ! isUndefined( value )
+	);
+	return queryCriteria;
+};
+
+export default compose(
+	withSelect( ( select, props ) => {
+		const { attributes } = props;
+		const { criteria } = attributes;
+		const queryCriteria = queryCriteriaFromAttributes( criteria );
+
+		return {
+			query: select( 'core' ).getEntityRecords(
+				'postType',
+				'post',
+				queryCriteria
+			),
+			settings: select( 'core/block-editor' ).getSettings(),
+		};
+	} )
+)( Edit );

packages/block-library/src/query/editor.scss

@@ -0,0 +1,5 @@
+.wp-block-query {
+	.block-editor-writing-flow__click-redirect {
+		display: none;
+	}
+}

packages/block-library/src/query/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const title = __( 'Query' );
+
+/* From https://material.io/tools/icons */
+export const icon = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M0 0h24v24H0z" fill="none" />
+		<Path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
+	</SVG>
+);
+
+export const settings = {
+	title,
+	icon,
+	keywords: [],
+	description: __( 'A collection of posts.' ),
+	supports: {
+		html: false,
+		align: false,
+	},
+	edit,
+};