feat: display attributes for listings in editor and front-end

Moves shared styles to a `shared` SCSS folder and implements helpers to output the same class names in editor + front-end based on curated list block attributes.
Automattic · Oct 7, 2020 · 7349944 · 7349944
1 parent 917116b
commit 7349944
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 82 deletions.
diff --git a/src/blocks/curated-list/edit.js b/src/blocks/curated-list/edit.js
@@ -5,18 +5,24 @@ import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { InnerBlocks, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
 import {
+	BaseControl,
 	Button,
 	ButtonGroup,
 	PanelBody,
 	PanelRow,
 	RangeControl,
+	SelectControl,
 	ToggleControl,
-	BaseControl,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Fragment, useEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { getCuratedListClasses } from '../../editor/utils';
+
 const CuratedListEditorComponent = ( {
 	attributes,
 	canUseMapBlock,
@@ -50,10 +56,7 @@ const CuratedListEditorComponent = ( {
 		innerBlock => innerBlock.name === 'newspack-listings/list-container'
 	);
 	const hasMap = innerBlocks.find( innerBlock => innerBlock.name === 'jetpack/map' );
-	const classes = [ className, 'newspack-listings__curated-list' ];
-	if ( showNumbers ) classes.push( 'show-numbers' );
-	if ( showMap ) classes.push( 'show-map' );
-	if ( showSortByDate ) classes.push( 'has-sort-by-date-ui' );
+	const classes = getCuratedListClasses( className, attributes );
 
 	// Update locations in component state. This lets us keep the map block in sync with listing items.
 	useEffect(() => {
@@ -176,13 +179,26 @@ const CuratedListEditorComponent = ( {
 					</PanelRow>
 
 					{ showImage && (
-						<PanelRow>
-							<ToggleControl
-								label={ __( 'Show Featured Image Caption', 'newspack-listings' ) }
-								checked={ showCaption }
-								onChange={ () => setAttributes( { showCaption: ! showCaption } ) }
+						<Fragment>
+							<PanelRow>
+								<ToggleControl
+									label={ __( 'Show Featured Image Caption', 'newspack-listings' ) }
+									checked={ showCaption }
+									onChange={ () => setAttributes( { showCaption: ! showCaption } ) }
+								/>
+							</PanelRow>
+							<SelectControl
+								label={ __( 'Featured Image Position', 'newspack-listings' ) }
+								value={ mediaPosition }
+								onChange={ value => setAttributes( { mediaPosition: value } ) }
+								options={ [
+									{ label: __( 'Top', 'newspack-listings' ), value: 'top' },
+									{ label: __( 'Left', 'newspack-listings' ), value: 'left' },
+									{ label: __( 'Right', 'newspack-listings' ), value: 'right' },
+									{ label: __( 'Behind', 'newspack-listings' ), value: 'behind' },
+								] }
 							/>
-						</PanelRow>
+						</Fragment>
 					) }
 
 					{ showImage && mediaPosition !== 'top' && mediaPosition !== 'behind' && (

diff --git a/src/blocks/curated-list/save.js b/src/blocks/curated-list/save.js
@@ -3,28 +3,13 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export const CuratedList = ( { attributes, className } ) => {
-	const {
-		showNumbers,
-		showMap,
-		showSortByDate,
-		// showExcerpt,
-		// showImage,
-		// showCaption,
-		// minHeight,
-		// showCategory,
-		// mediaPosition,
-		// typeScale,
-		// imageScale,
-		// mobileStack,
-		// textColor,
-		// showSubtitle,
-	} = attributes;
+/**
+ * Internal dependencies
+ */
+import { getCuratedListClasses } from '../../editor/utils';
 
-	const classes = [ className, 'newspack-listings__curated-list' ];
-	if ( showNumbers ) classes.push( 'show-numbers' );
-	if ( showMap ) classes.push( 'show-map' );
-	if ( showSortByDate ) classes.push( 'has-sort-by-date-ui' );
+export const CuratedList = ( { attributes, className } ) => {
+	const classes = getCuratedListClasses( className, attributes );
 
 	return (
 		<div className={ classes.join( ' ' ) }>

diff --git a/src/blocks/listing/edit.js b/src/blocks/listing/edit.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { withSelect } from '@wordpress/data';
-import { RawHTML, useEffect, useState } from '@wordpress/element';
+import { Fragment, RawHTML, useEffect, useState } from '@wordpress/element';
 import { Button, Notice, Spinner } from '@wordpress/components';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -27,8 +27,19 @@ const ListingEditorComponent = ( {
 	const [ isEditingPost, setIsEditingPost ] = useState( false );
 	const { listing } = attributes;
 
-	// Get the parent Curated List block.
-	const parent = getBlock( getBlockParents( clientId )[ 0 ] );
+	// Get the parent List Container block.
+	const parents = getBlockParents( clientId );
+	const parent = parents.reduce( ( acc, outerBlock ) => {
+		const blockInfo = getBlock( outerBlock );
+
+		if ( 'newspack-listings/list-container' === blockInfo.name ) {
+			acc.listContainer = blockInfo;
+		} else if ( 'newspack-listings/curated-list' === blockInfo.name ) {
+			acc.curatedList = blockInfo;
+		}
+
+		return acc;
+	}, {} );
 
 	// Parent Curated List block attributes.
 	const {
@@ -43,10 +54,10 @@ const ListingEditorComponent = ( {
 		// mobileStack,
 		// textColor,
 		// showSubtitle,
-	} = parent.attributes;
+	} = parent.curatedList.attributes;
 
 	// Build an array of just the listing post IDs that exist in the parent Curated List block.
-	const listItems = parent.innerBlocks.reduce( ( acc, innerBlock ) => {
+	const listItems = parent.listContainer.innerBlocks.reduce( ( acc, innerBlock ) => {
 		if ( innerBlock.attributes.listing ) {
 			acc.push( innerBlock.attributes.listing );
 		}
@@ -70,8 +81,8 @@ const ListingEditorComponent = ( {
 
 	// Sync parent attributes to listing attributes, so that we can use parent attributes in the PHP render callback.
 	useEffect(() => {
-		setAttributes( { ...parent.attributes } );
-	}, [ JSON.stringify( parent.attributes ) ]);
+		setAttributes( { ...parent.curatedList.attributes } );
+	}, [ JSON.stringify( parent.curatedList.attributes ) ]);
 
 	// Fetch listing post by listingId.
 	const fetchPost = async listingId => {
@@ -104,7 +115,7 @@ const ListingEditorComponent = ( {
 	// Renders the autocomplete search field to select listings. Will only show listings of the type that matches the block.
 	const renderSearch = () => {
 		return (
-			<div className="newspack-listings__listing-post">
+			<div className="newspack-listings__listing-search">
 				<QueryControls
 					label={
 						isEditingPost && post && post.title
@@ -147,32 +158,36 @@ const ListingEditorComponent = ( {
 		}
 
 		return (
-			<div className="newspack-listings__listing-post">
-				{ error && (
-					<Notice className="newspack-listings__error" status="error" isDismissible={ false }>
-						{ error }
-					</Notice>
-				) }
-				{ post && post.title && (
-					<h3 className="newspack-listings__listing-title">
-						<RawHTML>{ post.title }</RawHTML>
-					</h3>
-				) }
-				{ showImage && post && post.media && post.media.image && (
-					<figure className="newspack-listings__listing-featured-media">
-						<img
-							className="newspack-listings__listing-thumbnail"
-							src={ post.media.image }
-							alt={ post.media.caption || post.title }
-						/>
-						{ showCaption && post.media.caption && (
-							<figcaption className="newspack-listings__listing-caption">
-								{ post.media.caption }
-							</figcaption>
-						) }
-					</figure>
-				) }
-				{ showExcerpt && post && post.excerpt && <RawHTML>{ post.excerpt }</RawHTML> }
+			<Fragment>
+				<div className="newspack-listings__listing-post">
+					{ error && (
+						<Notice className="newspack-listings__error" status="error" isDismissible={ false }>
+							{ error }
+						</Notice>
+					) }
+					{ showImage && post && post.media && post.media.image && (
+						<figure className="newspack-listings__listing-featured-media">
+							<img
+								className="newspack-listings__listing-thumbnail"
+								src={ post.media.image }
+								alt={ post.media.caption || post.title }
+							/>
+							{ showCaption && post.media.caption && (
+								<figcaption className="newspack-listings__listing-caption">
+									{ post.media.caption }
+								</figcaption>
+							) }
+						</figure>
+					) }
+					{ post && post.title && (
+						<div className="newspack-listings__listing-meta">
+							<h3 className="newspack-listings__listing-title">
+								<RawHTML>{ post.title }</RawHTML>
+							</h3>
+							{ showExcerpt && post.excerpt && <RawHTML>{ post.excerpt }</RawHTML> }
+						</div>
+					) }
+				</div>
 				<Button isSecondary onClick={ () => setIsEditingPost( true ) }>
 					{ __( 'Replace listing', 'newspack-listing' ) }
 				</Button>
@@ -185,7 +200,7 @@ const ListingEditorComponent = ( {
 						{ __( 'Edit this listing', 'newspack-listing' ) }
 					</Button>
 				) }
-			</div>
+			</Fragment>
 		);
 	};
 

diff --git a/src/blocks/listing/editor.scss b/src/blocks/listing/editor.scss
@@ -1,3 +1,5 @@
+@import '../../listing-styles/shared/listing';
+
 .block-editor-block-list__layout {
 	counter-reset: list;
 }
@@ -37,9 +39,4 @@
 	&__error {
 		margin: 1rem auto 2rem;
 	}
-
-	&__listing-featured-media {
-		margin: 1rem 0;
-		padding: 0;
-	}
 }
diff --git a/src/blocks/listing/view.php b/src/blocks/listing/view.php
@@ -71,9 +71,7 @@ function render_block( $attributes ) {
 	?>
 	<li class="newspack-listings__listing">
 		<a class="newspack-listings__listing-link" href="<?php echo esc_url( get_permalink( $post->ID ) ); ?>">
-			<article class="newspack-listings__listing-article">
-				<h3><?php echo wp_kses_post( $post->post_title ); ?></h3>
-
+			<article class="newspack-listings__listing-post">
 				<?php if ( true === $attributes['showImage'] ) : ?>
 					<?php
 					$featured_image = get_the_post_thumbnail( $post->ID, 'large' );
@@ -90,11 +88,15 @@ function render_block( $attributes ) {
 					<?php endif; ?>
 				<?php endif; ?>
 
-				<?php
-				if ( true === $attributes['showExcerpt'] ) {
-					echo wp_kses_post( wpautop( get_the_excerpt( $post->ID ) ) );
-				}
-				?>
+				<div class="newspack-listings__listing-meta">
+					<h3 class="newspack-listings__listing-title"><?php echo wp_kses_post( $post->post_title ); ?></h3>
+
+					<?php
+					if ( true === $attributes['showExcerpt'] ) {
+						echo wp_kses_post( wpautop( get_the_excerpt( $post->ID ) ) );
+					}
+					?>
+				</div>
 			</article>
 		</a>
 	</li>

diff --git a/src/editor/utils.js b/src/editor/utils.js
@@ -5,7 +5,7 @@
 /**
  * Check if the current post in the editor is a listing CPT.
  *
- * @return {bool}
+ * @return {boolean} Whether or not the current post is a listing CPT.
  */
 export const isListing = () => {
 	if ( ! window.newspack_listings_data ) {
@@ -22,3 +22,39 @@ export const isListing = () => {
 
 	return false;
 };
+
+/**
+ * Get array of class names for Curated List, based on attributes.
+ *
+ * @param {string} className The base class name for the block.
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Array} Array of class names for the block.
+ */
+export const getCuratedListClasses = ( className, attributes ) => {
+	const {
+		showNumbers,
+		showMap,
+		showSortByDate,
+		showImage,
+		mediaPosition,
+		// typeScale,
+		imageScale,
+		// mobileStack,
+		// textColor,
+		// showSubtitle,
+	} = attributes;
+
+	const classes = [ className, 'newspack-listings__curated-list' ];
+
+	if ( showNumbers ) classes.push( 'show-numbers' );
+	if ( showMap ) classes.push( 'show-map' );
+	if ( showSortByDate ) classes.push( 'has-sort-by-date-ui' );
+	if ( showImage ) {
+		classes.push( 'show-image' );
+		classes.push( `media-position-${ mediaPosition }` );
+		classes.push( `media-size-${ imageScale }` );
+	}
+
+	return classes;
+};
diff --git a/...listing-styles/listings/curated-list.scss → ...isting-styles/front-end/curated-list.scss b/...listing-styles/listings/curated-list.scss → ...isting-styles/front-end/curated-list.scss
diff --git a/src/listing-styles/listings/listing.scss → src/listing-styles/front-end/listing.scss b/src/listing-styles/listings/listing.scss → src/listing-styles/front-end/listing.scss
@@ -1,3 +1,5 @@
+@import '../shared/listing';
+
 .newspack-listings {
 	// Target only .newspack-listings* when it's an `a` element
 	@at-root a#{&} {

diff --git a/src/listing-styles/listings/view.scss → src/listing-styles/front-end/view.scss b/src/listing-styles/listings/view.scss → src/listing-styles/front-end/view.scss
diff --git a/src/listing-styles/index.js b/src/listing-styles/index.js
@@ -1,4 +1,4 @@
 /**
  * Custom styles for listings pages.
  */
-import './listings/view.scss';
+import './front-end/view.scss';
diff --git a/src/listing-styles/shared/listing.scss b/src/listing-styles/shared/listing.scss
@@ -0,0 +1,43 @@
+.newspack-listings {
+	&__listing-post {
+		.media-position-left &,
+		.media-position-right & {
+			display: flex;
+		}
+	}
+
+	&__listing-featured-media {
+		flex-basis: 100%;
+		margin: 1rem 0;
+		max-width: 100%;
+		padding: 0;
+
+		.media-position-right & {
+			order: 2;
+		}
+
+		.media-size-1 & {
+			flex-basis: 25%;
+		}
+
+		.media-size-2 & {
+			flex-basis: 50%;
+		}
+
+		.media-size-3 & {
+			flex-basis: 75%;
+		}
+	}
+
+	&__listing-meta {
+		flex-basis: 100%;
+
+		.media-position-left & {
+			margin-left: 1rem;
+		}
+
+		.media-position-right & {
+			margin-right: 1rem;
+		}
+	}
+}