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

package/src/blocks/author-profile/editor.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { name, settings } from '.';
+
+registerBlockType( `newspack-blocks/${ name }`, settings );

package/src/blocks/author-profile/editor.scss

@@ -0,0 +1,61 @@
+@use "../../shared/sass/mixins";
+
+.editor-styles-wrapper {
+	// Author Profile block disabled state (custom byline active)
+	.newspack-author-profile-disabled {
+		.components-notice {
+			margin: 0;
+		}
+	}
+
+	// Mode selector buttons in placeholder
+	.newspack-blocks-author-profile {
+		.components-placeholder__fieldset {
+			align-items: center;
+		}
+	}
+
+	.wp-block-newspack-blocks-author-profile {
+		.components-notice {
+			margin: 0 0 2rem;
+			width: 100%;
+		}
+
+		a.no-op {
+			pointer-events: none;
+		}
+
+		&__bio {
+			@include mixins.media( mobile ) {
+				flex: 4;
+
+				h3 {
+					margin-top: 0;
+				}
+			}
+		}
+
+		&__social-links {
+			list-style: none;
+			margin: -8px;
+			padding: 0;
+
+			li {
+				margin: 8px;
+			}
+		}
+	}
+
+	.wp-block-group {
+		&.has-text-color {
+			.wp-block-newspack-blocks-author-profile a {
+				color: inherit;
+			}
+		}
+	}
+
+	// Prevent flex layout on the block wrapper (flex is for individual author cards).
+	[data-type="newspack-blocks/author-profile"]:not(.is-nested-mode) {
+		display: block;
+	}
+}

package/src/blocks/author-profile/index.js

@@ -0,0 +1,66 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { postAuthor } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import variations from './variations';
+
+/**
+ * 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 = __( 'Author Profile', 'newspack-blocks' );
+
+// Add Newspack author custom fields to the block attributes.
+const authorCustomFields = window.newspack_blocks_data?.author_custom_fields || [];
+authorCustomFields.forEach( field => {
+	attributes[ `show${ field.name }` ] = {
+		type: 'boolean',
+		default: true,
+	};
+} );
+
+export const settings = {
+	apiVersion,
+	title,
+	icon: {
+		src: postAuthor,
+		foreground: colors[ 'primary-400' ],
+	},
+	attributes,
+	category,
+	keywords: [ __( 'author', 'newspack-blocks' ), __( 'profile', 'newspack-blocks' ) ],
+	description: __( 'Display an author profile card.', 'newspack-blocks' ),
+	supports: {
+		html: false,
+		default: '',
+	},
+	edit,
+	variations,
+	// Save inner blocks for nested mode (layoutVersion 2).
+	// For flat mode (layoutVersion 1), return null to use server-side rendering only.
+	save: props => {
+		if ( props.attributes.layoutVersion === 2 ) {
+			return <InnerBlocks.Content />;
+		}
+		return null;
+	},
+};

package/src/blocks/author-profile/single-author.js

@@ -0,0 +1,106 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
+import { autop } from '@wordpress/autop';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+// Show a link to the author's post archive page, if available.
+const MaybeLink = ( { author, children, showArchiveLink } ) =>
+	showArchiveLink && author && author.url ? (
+		<a href="#" className="no-op">
+			{ children }
+		</a>
+	) : (
+		<>{ children }</>
+	);
+
+export const SingleAuthor = ( { author, attributes } ) => {
+	const { showBio, showSocial, showEmail, showArchiveLink, showAvatar, textSize, avatarAlignment, avatarBorderRadius, avatarSize } = attributes;
+
+	// Combine social links and email, which are shown together.
+	const socialLinks = ( showSocial && author && author.social ) || {};
+	if ( showEmail && author && author.email ) {
+		socialLinks.email = author.email;
+	} else {
+		delete socialLinks.email;
+	}
+	if ( attributes.shownewspack_phone_number && author && author.newspack_phone_number ) {
+		socialLinks.newspack_phone_number = author.newspack_phone_number;
+	} else {
+		delete socialLinks.newspack_phone_number;
+	}
+
+	const employment = [ attributes.shownewspack_role && author.newspack_role, attributes.shownewspack_employer && author.newspack_employer ]
+		.filter( Boolean )
+		.join( ', ' );
+	const socialLinksItems = Object.keys( socialLinks );
+
+	return (
+		<div
+			className={ classnames(
+				'wp-block-newspack-blocks-author-profile',
+				'avatar-' + avatarAlignment,
+				'text-size-' + textSize,
+				attributes.className
+			) }
+		>
+			{ showAvatar && author.avatar && (
+				<div className="wp-block-newspack-blocks-author-profile__avatar">
+					<figure
+						style={ {
+							borderRadius: avatarBorderRadius,
+							height: `${ avatarSize }px`,
+							width: `${ avatarSize }px`,
+						} }
+						dangerouslySetInnerHTML={ { __html: author.avatar } }
+					/>
+				</div>
+			) }
+			<div className="wp-block-newspack-blocks-author-profile__bio">
+				<h3>
+					<MaybeLink author={ author } showArchiveLink={ showArchiveLink }>
+						{ author.name }
+					</MaybeLink>
+				</h3>
+				{ attributes.shownewspack_job_title && author.newspack_job_title && (
+					<p className="wp-block-newspack-blocks-author-profile__job-title">{ author.newspack_job_title }</p>
+				) }
+				{ employment && <p className="wp-block-newspack-blocks-author-profile__employment">{ employment }</p> }
+				{ showBio && author.bio && (
+					<p>
+						<RawHTML>{ autop( author.bio ) } </RawHTML>
+						{ showArchiveLink && (
+							<a href="#" className="no-op">
+								{ sprintf(
+									/* translators: %s: author name. */
+									__( 'More by %s', 'newspack-blocks' ),
+									author.name
+								) }
+							</a>
+						) }
+					</p>
+				) }
+				{ socialLinksItems.length !== 0 && (
+					<ul className="wp-block-newspack-blocks-author-profile__social-links">
+						{ socialLinksItems.map( service => (
+							<li key={ service }>
+								<a href="#" className="no-op">
+									{ socialLinks[ service ].svg && <span dangerouslySetInnerHTML={ { __html: socialLinks[ service ].svg } } /> }
+									<span className={ socialLinks[ service ].svg ? 'hidden' : 'visible' }>{ service }</span>
+								</a>
+							</li>
+						) ) }
+					</ul>
+				) }
+			</div>
+		</div>
+	);
+};

package/src/blocks/author-profile/templates.js

@@ -0,0 +1,263 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Helper to create a bound paragraph block with custom list view name.
+ * If wrapInLink is true, the content will be wrapped in an anchor tag for editor preview.
+ *
+ * @param {string}  key         Author data key for binding.
+ * @param {string}  className   CSS class for the paragraph.
+ * @param {string}  name        Display name shown in list view.
+ * @param {string}  placeholder Placeholder text (defaults to name).
+ * @param {boolean} wrapInLink  Whether to wrap content in a link.
+ * @return {Array} InnerBlocks template entry for a bound paragraph.
+ */
+const createBoundParagraph = ( key, className, name, placeholder, wrapInLink = false ) => {
+	const attributes = {
+		metadata: {
+			name, // Custom name shown in list view.
+			bindings: {
+				content: {
+					source: 'newspack-blocks/author',
+					args: { key },
+				},
+			},
+		},
+		className,
+		placeholder: placeholder || name,
+	};
+
+	// If wrapInLink is true, set initial content with link wrapper for editor preview.
+	if ( wrapInLink ) {
+		const linkText = placeholder || name;
+		attributes.content = `<a href="#" class="no-op">${ linkText }</a>`;
+	}
+
+	return [ 'core/paragraph', attributes ];
+};
+
+/**
+ * Shared block definition constants.
+ */
+
+// Styles applied to the content column in column-based layouts.
+const CONTENT_COLUMN_ATTRS = Object.freeze( {
+	className: 'author-profile-content-column',
+	templateLock: false,
+	allowedBlocks: [ 'core/heading', 'core/paragraph', 'core/separator', 'core/spacer', 'newspack/author-profile-social' ],
+	style: {
+		spacing: {
+			blockGap: 'var:preset|spacing|20',
+		},
+		elements: {
+			link: {
+				color: {
+					text: 'var:preset|color|contrast-3',
+				},
+			},
+		},
+	},
+	textColor: 'contrast-3',
+	fontSize: 'small',
+} );
+
+// Author name heading block.
+const HEADING_BLOCK = [
+	'core/heading',
+	{
+		level: 3,
+		metadata: {
+			name: __( 'Author Name', 'newspack-blocks' ),
+			bindings: {
+				content: {
+					source: 'newspack-blocks/author',
+					args: { key: 'name' },
+				},
+			},
+		},
+		className: 'author-name',
+		placeholder: __( 'Author Name', 'newspack-blocks' ),
+		textColor: 'contrast',
+		fontSize: 'large',
+	},
+];
+
+// Job title paragraph block with bold styling.
+const JOB_TITLE_BLOCK = [
+	'core/paragraph',
+	{
+		metadata: {
+			name: __( 'Job Title', 'newspack-blocks' ),
+			bindings: {
+				content: {
+					source: 'newspack-blocks/author',
+					args: { key: 'newspack_job_title' },
+				},
+			},
+		},
+		className: 'author-job-title',
+		placeholder: __( 'Job Title', 'newspack-blocks' ),
+		style: {
+			typography: {
+				fontStyle: 'normal',
+				fontWeight: '600',
+			},
+			elements: {
+				link: {
+					color: {
+						text: 'var:preset|color|contrast',
+					},
+				},
+			},
+		},
+		textColor: 'contrast',
+	},
+];
+
+// Bound paragraph blocks for author fields.
+const ROLE_BLOCK = createBoundParagraph( 'newspack_role', 'author-role', __( 'Role', 'newspack-blocks' ) );
+const EMPLOYER_BLOCK = createBoundParagraph( 'newspack_employer', 'author-employer', __( 'Employer', 'newspack-blocks' ) );
+const BIO_BLOCK = createBoundParagraph( 'bio', 'author-bio', __( 'Biography', 'newspack-blocks' ) );
+
+const archiveLinkLabel = sprintf(
+	/* translators: %s: author name. */
+	__( 'More by %s', 'newspack-blocks' ),
+	__( 'Author Name', 'newspack-blocks' )
+);
+const ARCHIVE_LINK_BLOCK = createBoundParagraph( 'archive_link_text', 'author-archive-link', archiveLinkLabel, undefined, true );
+
+// Social icons block with top padding.
+const SOCIAL_BLOCK = [
+	'newspack/author-profile-social',
+	{
+		style: {
+			spacing: {
+				padding: {
+					top: 'var:preset|spacing|20',
+				},
+			},
+		},
+	},
+];
+
+/**
+ * Returns a copy of a block template entry with center alignment added.
+ * Uses `textAlign` for headings, `align` for paragraphs.
+ *
+ * @param {Array}  block   InnerBlocks template entry [blockName, attributes].
+ * @param {string} block.0 Block name.
+ * @param {Object} block.1 Block attributes.
+ * @return {Array} New template entry with center alignment.
+ */
+const centered = ( [ blockName, attrs ] ) => [
+	blockName,
+	{ ...attrs, ...( blockName === 'core/heading' ? { textAlign: 'center' } : { align: 'center' } ) },
+];
+
+// Shared group styles for centered and compact layouts.
+const GROUP_STYLES = Object.freeze( {
+	spacing: {
+		blockGap: 'var:preset|spacing|20',
+	},
+	elements: {
+		link: {
+			color: {
+				text: 'var:preset|color|contrast-3',
+			},
+		},
+	},
+} );
+
+// Content blocks shared across all layouts.
+// Shallow-frozen to prevent push/splice; nested block definitions are safe because templates compose via spread.
+const CONTENT_BLOCKS = Object.freeze( [ HEADING_BLOCK, JOB_TITLE_BLOCK, ROLE_BLOCK, EMPLOYER_BLOCK, BIO_BLOCK, ARCHIVE_LINK_BLOCK, SOCIAL_BLOCK ] );
+
+// -- Layout Templates --------------------------------------------------------
+
+/**
+ * Avatar left layout: avatar on the left, content on the right.
+ */
+export const AVATAR_LEFT_TEMPLATE = [
+	[
+		'core/columns',
+		{ isStackedOnMobile: true, className: 'author-profile-columns', templateLock: 'insert' },
+		[
+			[
+				'core/column',
+				{
+					className: 'author-profile-avatar-column',
+					templateLock: 'insert',
+					allowedBlocks: [ 'newspack/avatar' ],
+				},
+				[ [ 'newspack/avatar', { size: 128 } ] ],
+			],
+			[ 'core/column', CONTENT_COLUMN_ATTRS, CONTENT_BLOCKS ],
+		],
+	],
+];
+
+/**
+ * Avatar right layout: avatar first in DOM for correct mobile stacking,
+ * CSS reorders content to the left on desktop.
+ */
+export const AVATAR_RIGHT_TEMPLATE = [
+	[
+		'core/columns',
+		{ isStackedOnMobile: true, className: 'author-profile-columns is-style-first-col-to-second', templateLock: 'insert' },
+		[
+			[
+				'core/column',
+				{
+					className: 'author-profile-avatar-column',
+					templateLock: 'insert',
+					allowedBlocks: [ 'newspack/avatar' ],
+				},
+				[ [ 'newspack/avatar', { size: 128 } ] ],
+			],
+			[ 'core/column', CONTENT_COLUMN_ATTRS, CONTENT_BLOCKS ],
+		],
+	],
+];
+
+/**
+ * Centered layout: large centered avatar with center-aligned text.
+ */
+export const CENTERED_TEMPLATE = [
+	[
+		'core/group',
+		{
+			layout: { type: 'flex', orientation: 'vertical', justifyContent: 'center' },
+			style: GROUP_STYLES,
+			textColor: 'contrast-3',
+			fontSize: 'small',
+		},
+		[
+			[ 'newspack/avatar', { size: 200 } ],
+			centered( HEADING_BLOCK ),
+			centered( JOB_TITLE_BLOCK ),
+			centered( ROLE_BLOCK ),
+			centered( EMPLOYER_BLOCK ),
+			centered( BIO_BLOCK ),
+			centered( ARCHIVE_LINK_BLOCK ),
+			SOCIAL_BLOCK,
+		],
+	],
+];
+
+/**
+ * Compact layout: no avatar.
+ */
+export const COMPACT_TEMPLATE = [
+	[
+		'core/group',
+		{
+			layout: { type: 'flex', orientation: 'vertical' },
+			style: GROUP_STYLES,
+			textColor: 'contrast-3',
+			fontSize: 'small',
+		},
+		CONTENT_BLOCKS,
+	],
+];

package/src/blocks/author-profile/variations.js

@@ -0,0 +1,86 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import { AVATAR_LEFT_TEMPLATE, AVATAR_RIGHT_TEMPLATE, CENTERED_TEMPLATE, COMPACT_TEMPLATE } from './templates';
+
+const ICON_COLOR = colors[ 'primary-400' ];
+
+// Variation icons: abstract layout representations.
+// Circle represents the avatar, rectangles represent text lines.
+
+const iconAvatarLeft = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M31 33H17V32H31V33ZM39 30H17V29H39V30ZM37 27H17V26H37V27ZM41 24H17V23H41V24ZM11 15C13.2091 15 15 16.7909 15 19C15 21.2091 13.2091 23 11 23C8.79086 23 7 21.2091 7 19C7 16.7909 8.79086 15 11 15ZM37 21H17V20H37V21ZM41 18H17V15H41V18Z" />
+	</SVG>
+);
+
+const iconAvatarRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M21 33H7V32H21V33ZM29 30H7V29H29V30ZM27 27H7V26H27V27ZM31 24H7V23H31V24ZM37 15C39.2091 15 41 16.7909 41 19C41 21.2091 39.2091 23 37 23C34.7909 23 33 21.2091 33 19C33 16.7909 34.7909 15 37 15ZM27 21H7V20H27V21ZM31 18H7V15H31V18Z" />
+	</SVG>
+);
+
+const iconCentered = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M36 38H12V37H36V38ZM40 35H8V34H40V35ZM39 32H9V31H39V32ZM41 29H7V28H41V29ZM39 26H9V25H39V26ZM41 23H7V20H41V23ZM24 10C26.2091 10 27.9999 11.791 28 14C28 16.2091 26.2091 18 24 18C21.7909 18 20 16.2091 20 14C20.0001 11.791 21.7909 10 24 10Z" />
+	</SVG>
+);
+
+const iconCompact = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M31 33H7V32H31V33ZM39 30H7V29H39V30ZM37 27H7V26H37V27ZM41 24H7V23H41V24ZM37 21H7V20H37V21ZM41 18H7V15H41V18Z" />
+	</SVG>
+);
+
+const variations = [
+	{
+		name: 'avatar-left',
+		title: __( 'Avatar left', 'newspack-blocks' ),
+		description: __( 'Avatar on the left, content on the right.', 'newspack-blocks' ),
+		icon: { src: iconAvatarLeft, foreground: ICON_COLOR },
+		attributes: { variation: 'avatar-left' },
+		innerBlocks: AVATAR_LEFT_TEMPLATE,
+		scope: [ 'block' ],
+		isDefault: true,
+	},
+	{
+		name: 'avatar-right',
+		title: __( 'Avatar right', 'newspack-blocks' ),
+		description: __( 'Content on the left, avatar on the right.', 'newspack-blocks' ),
+		icon: { src: iconAvatarRight, foreground: ICON_COLOR },
+		attributes: { variation: 'avatar-right' },
+		innerBlocks: AVATAR_RIGHT_TEMPLATE,
+		scope: [ 'block' ],
+	},
+	{
+		name: 'centered',
+		title: __( 'Centered', 'newspack-blocks' ),
+		description: __( 'Large centered avatar with center-aligned text.', 'newspack-blocks' ),
+		icon: { src: iconCentered, foreground: ICON_COLOR },
+		attributes: { variation: 'centered' },
+		innerBlocks: CENTERED_TEMPLATE,
+		scope: [ 'block' ],
+	},
+	{
+		name: 'compact',
+		title: __( 'Compact', 'newspack-blocks' ),
+		description: __( 'No avatar, vertical stack.', 'newspack-blocks' ),
+		icon: { src: iconCompact, foreground: ICON_COLOR },
+		attributes: { variation: 'compact' },
+		innerBlocks: COMPACT_TEMPLATE,
+		scope: [ 'block' ],
+	},
+];
+
+export default variations;

package/src/blocks/author-profile/view.js

@@ -0,0 +1,5 @@
+/**
+ * Style dependencies
+ */
+
+import './view.scss';