@automattic/newspack-blocks 4.25.3 → 4.26.0-alpha.2

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         4.25.3
+ * Version:         4.26.0-alpha.2
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '4.25.3' );
+define( 'NEWSPACK_BLOCKS__VERSION', '4.26.0-alpha.2' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "4.25.3",
+	"version": "4.26.0-alpha.2",
 	"author": "Automattic",
 	"description": "=== Newspack Blocks === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://example.com/ Tags: comments, spam Requires at least: 4.5 Tested up to: 5.1.1 Stable tag: 0.1.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html",
 	"repository": {

package/src/blocks/author-profile/README.md

@@ -0,0 +1,105 @@
+# Author Profile Block
+
+A Gutenberg block that displays author bio cards with support for multiple authorship systems and two rendering modes.
+
+## Overview
+
+The Author Profile block renders a complete author profile, including name, avatar, biography, social links, and a link to their archive page. It supports two operating modes (contextual and specific) and two rendering modes (nested and flat), adapting automatically to the theme type.
+
+## Operating modes
+
+### Contextual mode
+
+Automatically detects authors for the current post. Resolution priority:
+
+1. **Newspack Custom Bylines:** If `_newspack_byline_active` meta is set and the byline contains `[Author id="X"]` shortcodes, profiles are shown for those authors. Plain-text-only bylines suppress the block entirely.
+2. **CoAuthors Plus:** If CAP is active, all co-authors are displayed (WordPress users and Guest Authors).
+3. **Default WordPress author:** Falls back to the standard post author.
+
+### Specific mode
+
+Displays a single author selected via a search/autocomplete interface. The selected author ID and guest author flag are stored as block attributes.
+
+## Rendering modes
+
+### Nested mode (layoutVersion 2)
+
+Used in block themes. The block saves `<InnerBlocks.Content />` and composes the profile from core blocks (Columns, Group, Heading, Paragraph) plus [`newspack/avatar`](https://github.com/Automattic/newspack-plugin/tree/trunk/src/blocks/avatar) and [`newspack/author-profile-social`](https://github.com/Automattic/newspack-plugin/tree/trunk/src/blocks/author-profile-social). Author data is injected via WordPress block bindings (`newspack-blocks/author` source) and block context.
+
+**Layout variations:**
+
+| Variation | Template constant | Description |
+|-----------|------------------|-------------|
+| `avatar-left` | `AVATAR_LEFT_TEMPLATE` | Two-column: avatar left, content right |
+| `avatar-right` | `AVATAR_RIGHT_TEMPLATE` | Two-column: content left, avatar right |
+| `centered` | `CENTERED_TEMPLATE` | Flex group: centered avatar, centered text |
+| `compact` | `COMPACT_TEMPLATE` | Flex group: no avatar, vertical stack |
+
+Variations are defined in [variations.js](./variations.js) and templates in [templates.js](./templates.js).
+
+### Flat mode (layoutVersion 1)
+
+Used in classic themes. The block returns `save: () => null` and renders entirely via PHP using the [author-profile-card.php](../../templates/author-profile-card.php) template.
+
+**Mode selection logic:** New blocks in block themes automatically get `layoutVersion: 2`. Existing blocks preserve their saved mode. A v2 block opened in a classic theme shows a warning in the editor and falls back to flat rendering on the frontend.
+
+## Block attributes
+
+### Core attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `authorId` | number | `0` | Selected author ID (specific mode) |
+| `isContextual` | boolean | `false` | Whether to auto-detect authors from post context |
+| `isGuestAuthor` | boolean | `true` | Whether the selected author is a CAP guest author |
+| `layoutVersion` | number | `1` | `1` = flat, `2` = nested (see Rendering modes) |
+| `variation` | string | `""` | Active layout variation name |
+| `showEmptyBio` | boolean | `true` | Show profiles for authors without bios |
+| `avatarHideDefault` | boolean | `false` | Hide default placeholder avatar |
+
+### Flat mode attributes
+
+These only apply in flat mode (`layoutVersion: 1`). In nested mode, display is controlled by adding or removing inner blocks.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `showBio` | boolean | `true` | Display biography |
+| `showSocial` | boolean | `true` | Display social links |
+| `showEmail` | boolean | `true` | Display email link |
+| `showArchiveLink` | boolean | `true` | Display "More by Author" link |
+| `showAvatar` | boolean | `true` | Display avatar |
+| `textSize` | string | `"medium"` | Text size: small, medium, large, extra-large |
+| `avatarAlignment` | string | `"left"` | Avatar position: left or right |
+| `avatarSize` | number | `128` | Avatar size in pixels |
+| `avatarBorderRadius` | string | `"50%"` | Avatar border radius |
+
+Additional `show*` attributes are dynamically added from Newspack Author Custom Fields when available (e.g., `shownewspack_job_title`, `shownewspack_role`, `shownewspack_employer`).
+
+## Block bindings
+
+The `newspack-blocks/author` binding source is registered in both PHP ([view.php](./view.php)) and JS ([edit.js](./edit.js)). Supported keys:
+
+| Key | Description |
+|-----|-------------|
+| `name` | Author display name |
+| `bio` | Author biography |
+| `url` / `archive_url` | Author archive URL |
+| `archive_link_text` | "More by Author Name" text |
+| `newspack_job_title` | Job title (custom field) |
+| `newspack_role` | Role (custom field) |
+| `newspack_employer` | Employer (custom field) |
+
+In the editor, bindings resolve via a per-instance author map (`window.__newspackAuthorsByBlock`) keyed by `clientId`, so multiple Author Profile blocks on the same page don't conflict.
+
+## Editor behavior
+
+- **Variation picker**: Shown when the block has no inner blocks (nested mode). Follows the same pattern as the core Columns block.
+- **Author context**: The [AuthorContext](./context.js) React context passes author data to inner blocks. It's also exposed globally as `window.NewspackAuthorContext` for cross-package use (e.g., by the avatar block in newspack-plugin).
+- **Template context**: In the Site Editor (templates/template parts), a placeholder author is shown with all supported social services populated.
+
+## Related
+
+- [Author Social Links Block](https://github.com/Automattic/newspack-plugin/tree/trunk/src/blocks/author-profile-social) - Inner block for social media icons.
+- [Avatar Block](https://github.com/Automattic/newspack-plugin/tree/trunk/src/blocks/avatar) - Inner block for author avatars.
+- [Author Profile Card Template](../../templates/author-profile-card.php) - PHP template for flat-mode rendering.
+- [Author List Block](../author-list/) - Directory-style author listing (different use case).

package/src/blocks/author-profile/block.json

@@ -68,6 +68,10 @@
 		"avatarHideDefault": {
 			"type": "boolean",
 			"default": false
+		},
+		"variation": {
+			"type": "string",
+			"default": ""
 		}
 	}
 }

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

@@ -2,8 +2,16 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { BlockControls, InnerBlocks, InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { createBlocksFromInnerBlocksTemplate, getBlockType, registerBlockBindingsSource } from '@wordpress/blocks';
+import {
+	BlockControls,
+	InnerBlocks,
+	InspectorControls,
+	useBlockProps,
+	store as blockEditorStore,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalBlockVariationPicker as BlockVariationPicker,
+} from '@wordpress/block-editor';
+import { createBlocksFromInnerBlocksTemplate, getBlockType, registerBlockBindingsSource, store as blocksStore } from '@wordpress/blocks';
 import {
 	Button,
 	Card,
@@ -15,9 +23,6 @@ import {
 	Spinner,
 	ToggleControl,
 	Toolbar,
-	ToolbarButton,
-	ToolbarGroup,
-	Tooltip,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalUnitControl as UnitControl,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -172,151 +177,42 @@ export const avatarSizeOptions = [
 	},
 ];
 
-// 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.
-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 },
-				},
-			},
+/**
+ * Variation picker shown when the block has no inner blocks.
+ * Follows the same pattern as the core Columns block.
+ */
+function VariationPlaceholder( { clientId, name, setAttributes } ) {
+	const { blockType, defaultVariation, variations } = useSelect(
+		select => {
+			const { getBlockVariations, getBlockType: _getBlockType, getDefaultBlockVariation } = select( blocksStore );
+			return {
+				blockType: _getBlockType( name ),
+				defaultVariation: getDefaultBlockVariation( name, 'block' ),
+				variations: getBlockVariations( name, 'block' ),
+			};
 		},
-		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 ];
-};
+		[ name ]
+	);
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const blockProps = useBlockProps();
 
-// Template for nested inner blocks.
-// Each author field is a separate block that can be reordered or removed.
-// Block bindings connect core block attributes to author data via 'newspack-blocks/author' source.
-const NESTED_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',
-				{
-					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',
-				},
-				[
-					[
-						'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',
-						},
-					],
-					[
-						'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',
-						},
-					],
-					createBoundParagraph( 'newspack_role', 'author-role', __( 'Role', 'newspack-blocks' ) ),
-					createBoundParagraph( 'newspack_employer', 'author-employer', __( 'Employer', 'newspack-blocks' ) ),
-					createBoundParagraph( 'bio', 'author-bio', __( 'Biography', 'newspack-blocks' ) ),
-					createBoundParagraph(
-						'archive_link_text',
-						'author-archive-link',
-						sprintf(
-							/* translators: %s: author name. */
-							__( 'More by %s', 'newspack-blocks' ),
-							__( 'Author Name', 'newspack-blocks' )
-						),
-						undefined,
-						true
-					),
-					[
-						'newspack/author-profile-social',
-						{
-							style: {
-								spacing: {
-									padding: {
-										top: 'var:preset|spacing|20',
-									},
-								},
-							},
-						},
-					],
-				],
-			],
-		],
-	],
-];
+	return (
+		<div { ...blockProps }>
+			<BlockVariationPicker
+				icon={ blockType?.icon?.src }
+				label={ blockType?.title }
+				variations={ variations }
+				instructions={ __( 'Select a layout to start with:', 'newspack-blocks' ) }
+				onSelect={ ( nextVariation = defaultVariation ) => {
+					setAttributes( { ...nextVariation.attributes, variation: nextVariation.name } );
+					if ( nextVariation.innerBlocks ) {
+						replaceInnerBlocks( clientId, createBlocksFromInnerBlocksTemplate( nextVariation.innerBlocks ), true );
+					}
+				} }
+			/>
+		</div>
+	);
+}
 
 // Module-level cache for social icon SVGs so multiple block instances share one fetch.
 let socialIconSvgsCache = null;
@@ -360,7 +256,7 @@ const getPlaceholderAuthor = ( socialIconSvgs = {} ) => {
 };
 
 const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
-	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 
 	// ALL HOOKS MUST BE CALLED UNCONDITIONALLY (React rules of hooks)
 	const [ author, setAuthor ] = useState( null );
@@ -387,6 +283,7 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 		avatarSize,
 		avatarHideDefault,
 		showEmptyBio,
+		variation,
 	} = attributes;
 	const blockProps = useBlockProps();
 
@@ -435,6 +332,17 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 		return ( theme?.is_block_theme ?? false ) && !! getBlockType( 'newspack/avatar' ) && !! getBlockType( 'newspack/author-profile-social' );
 	}, [] );
 
+	// Check for inner blocks (pattern picker shows when empty).
+	const hasInnerBlocks = useSelect( select => !! select( blockEditorStore ).getBlocks( clientId ).length, [ clientId ] );
+
+	// Look up the active variation's template from the store.
+	const blockVariations = useSelect( select => select( blocksStore ).getBlockVariations( 'newspack-blocks/author-profile', 'block' ), [] );
+	const defaultVariation = useMemo( () => blockVariations?.find( v => v.isDefault ), [ blockVariations ] );
+	const activeVariationTemplate = useMemo( () => {
+		const match = blockVariations?.find( v => v.name === variation );
+		return match?.innerBlocks || defaultVariation?.innerBlocks;
+	}, [ blockVariations, variation, defaultVariation ] );
+
 	// Set layoutVersion to 2 for brand new blocks in block themes.
 	// This persists the mode choice and enables InnerBlocks-based layout.
 	// Only converts unconfigured blocks to preserve existing blocks created in classic themes.
@@ -445,6 +353,17 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 		}
 	}, [ isNestedMode, layoutVersion, isUnconfiguredBlock, setAttributes ] );
 
+	// Auto-populate inner blocks from variation attribute on mount (e.g., when inserted from a pattern).
+	// Only runs once; subsequent empty states show the variation picker instead of auto-repopulating.
+	// Initialized with hasInnerBlocks so existing blocks (after page reload) don't re-populate.
+	const [ didAutoPopulate, setDidAutoPopulate ] = useState( hasInnerBlocks );
+	useEffect( () => {
+		if ( ! didAutoPopulate && variation && ! hasInnerBlocks && activeVariationTemplate ) {
+			replaceInnerBlocks( clientId, createBlocksFromInnerBlocksTemplate( activeVariationTemplate ), true );
+			setDidAutoPopulate( true );
+		}
+	}, [ didAutoPopulate, variation, hasInnerBlocks, activeVariationTemplate, clientId, replaceInnerBlocks ] );
+
 	// Fetch author for specific mode
 	useEffect( () => {
 		if ( isContextual || 0 === authorId ) {
@@ -631,10 +550,6 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 	// In nested mode, hide field toggles since publishers control display by adding/removing blocks.
 	const isNestedLayout = layoutVersion === 2;
 
-	const resetLayout = () => {
-		replaceInnerBlocks( clientId, createBlocksFromInnerBlocksTemplate( NESTED_TEMPLATE ), false );
-	};
-
 	// Inspector controls for display settings
 	const inspectorControls = (
 		<InspectorControls>
@@ -761,15 +676,6 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 					] }
 				/>
 			) }
-			{ isNestedLayout && (
-				<ToolbarGroup>
-					<Tooltip text={ __( 'Reset layout', 'newspack-blocks' ) }>
-						<ToolbarButton label={ __( 'Reset layout', 'newspack-blocks' ) } onClick={ resetLayout }>
-							{ __( 'Reset', 'newspack-blocks' ) }
-						</ToolbarButton>
-					</Tooltip>
-				</ToolbarGroup>
-			) }
 		</BlockControls>
 	);
 
@@ -781,7 +687,7 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 				className="newspack-blocks-author-profile"
 				icon={ postAuthor }
 				label={ __( 'Author Profile', 'newspack-blocks' ) }
-				instructions={ __( 'Select a type to start with.', 'newspack-blocks' ) }
+				instructions={ __( 'Select a type:', 'newspack-blocks' ) }
 			>
 				<Button variant="primary" onClick={ () => setAttributes( { isContextual: true } ) }>
 					{ __( 'Contextual', 'newspack-blocks' ) }
@@ -813,6 +719,11 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 			);
 		}
 
+		// Variation picker: shown when block has no inner blocks.
+		if ( ! hasInnerBlocks ) {
+			return <VariationPlaceholder clientId={ clientId } name="newspack-blocks/author-profile" setAttributes={ setAttributes } />;
+		}
+
 		// Mode selection for new blocks in nested mode
 		if ( ! authorId && ! isContextual && ! showSpecificSelector ) {
 			return modeSelectionPlaceholder;
@@ -958,9 +869,9 @@ const AuthorProfile = ( { attributes, setAttributes, context, clientId } ) => {
 					{ /* Key forces re-render when author changes, which re-evaluates bindings */ }
 					<InnerBlocks
 						key={ `author-${ previewAuthor?.id || 'none' }` }
-						template={ NESTED_TEMPLATE }
+						template={ activeVariationTemplate }
 						templateLock="insert"
-						allowedBlocks={ [ 'core/columns' ] }
+						allowedBlocks={ [ 'core/columns', 'core/group' ] }
 					/>
 				</div>
 			</AuthorContext.Provider>

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

@@ -58,4 +58,4 @@
 	[data-type="newspack-blocks/author-profile"]:not(.is-nested-mode) {
 		display: block;
 	}
-}
+}

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

@@ -14,6 +14,7 @@ import { postAuthor } from '@wordpress/icons';
  * Internal dependencies
  */
 import edit from './edit';
+import variations from './variations';
 
 /**
  * Style dependencies - will load in editor
@@ -53,6 +54,7 @@ export const settings = {
 		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 => {