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

package/src/modal-checkout/utils.js

@@ -0,0 +1,309 @@
+/**
+ * Specify a function to execute when the DOM is fully loaded.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dom-ready/
+ *
+ * @param {Function} callback A function to execute after the DOM is ready.
+ * @return {void}
+ */
+export function domReady( callback ) {
+	if ( typeof document === 'undefined' || typeof callback !== 'function' ) {
+		return;
+	}
+	if (
+		document.readyState === 'complete' || // DOMContentLoaded + Images/Styles/etc loaded, so we call directly.
+		document.readyState === 'interactive' // DOMContentLoaded fires at this point, so we call directly.
+	) {
+		return void callback();
+	}
+	// DOMContentLoaded has not fired yet, delay callback until then.
+	document.addEventListener( 'DOMContentLoaded', callback );
+}
+
+/**
+ * Create a hidden input field.
+ *
+ * @param {string} name  The name of the input field.
+ * @param {string} value The value of the input field. Optional.
+ *
+ * @return {HTMLInputElement} The hidden input element.
+ */
+export function createHiddenInput( name, value = null ) {
+	const input = document.createElement( 'input' );
+	input.type = 'hidden';
+	input.name = name;
+
+	// Set the value if provided.
+	if ( value ) {
+		input.value = value;
+	}
+
+	return input;
+}
+
+/**
+ * Run a callback when an iframe is ready.
+ *
+ * @param {HTMLIFrameElement} iframe  The iframe element.
+ * @param {Function}          cb      The callback to execute when the iframe is ready.
+ * @param {Function}          onReset The callback to execute when the iframe is reset.
+ *
+ * @return {void}
+ */
+export function iframeReady( iframe, cb, onReset ) {
+	iframe._ready = false;
+	if ( iframe._readyTimer ) {
+		clearTimeout( iframe._readyTimer );
+	}
+	let fired = false;
+	let lastLocation = '';
+
+	function ready() {
+		if ( ! fired ) {
+			fired = true;
+			clearTimeout( iframe._readyTimer );
+			cb.call( this );
+		}
+	}
+
+	function readyState() {
+		if ( this.readyState === 'complete' ) {
+			ready.call( this );
+		}
+	}
+
+	function cleanup() {
+		iframe._ready = false;
+		if ( onReset ) {
+			onReset();
+		}
+		if ( iframe._readyTimer ) {
+			clearTimeout( iframe._readyTimer );
+		}
+		const doc = iframe.contentDocument || iframe.contentWindow?.document;
+		if ( doc ) {
+			doc.removeEventListener( 'DOMContentLoaded', ready );
+			doc.removeEventListener( 'readystatechange', readyState );
+		}
+	}
+
+	function checkLoaded() {
+		if ( iframe._ready ) {
+			cleanup();
+			return;
+		}
+		const doc = iframe.contentDocument || iframe.contentWindow?.document;
+		if ( doc && doc.URL.indexOf( 'about:' ) !== 0 ) {
+			if ( doc?.readyState === 'complete' ) {
+				ready.call( doc );
+			} else {
+				doc.addEventListener( 'DOMContentLoaded', ready );
+				doc.addEventListener( 'readystatechange', readyState );
+			}
+		} else {
+			iframe._readyTimer = setTimeout( checkLoaded, 10 );
+		}
+	}
+
+	function handleLocationChange() {
+		const doc = iframe.contentDocument || iframe.contentWindow?.document;
+		if ( doc && doc.URL !== lastLocation ) {
+			lastLocation = doc.URL;
+			fired = false;
+			cleanup();
+			checkLoaded();
+		}
+	}
+
+	// Set up MutationObserver to watch for src changes
+	if ( ! iframe._observer ) {
+		iframe._observer = new MutationObserver( mutations => {
+			mutations.forEach( mutation => {
+				if ( mutation.type === 'attributes' && mutation.attributeName === 'src' ) {
+					fired = false;
+					cleanup();
+					checkLoaded();
+				}
+			} );
+		} );
+		iframe._observer.observe( iframe, { attributes: true } );
+	}
+
+	// Set up location change detection
+	if ( ! iframe._locationObserver ) {
+		iframe._locationObserver = setInterval( handleLocationChange, 50 );
+	}
+
+	checkLoaded();
+}
+
+/**
+ * Run a callback when the checkout is ready.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout is ready.
+ */
+export function onCheckoutReady( container, callback ) {
+	if ( container.checkoutReady ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-ready', callback );
+	}
+}
+
+/**
+ * Run a callback when the checkout is canceled.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout is canceled.
+ */
+export function onCheckoutCancel( container, callback ) {
+	if ( container.checkoutCancel ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-cancel', callback );
+	}
+}
+
+/**
+ * Run a callback when the checkout place order starts.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout place order starts.
+ */
+export function onCheckoutPlaceOrderStart( container, callback ) {
+	if ( container.checkoutPlaceOrderStart ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-place-order-start', callback );
+	}
+}
+
+/**
+ * Run a callback when the checkout place order is processing.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout place order is processing.
+ */
+export function onCheckoutPlaceOrderProcessing( container, callback ) {
+	if ( container.checkoutPlaceOrderProcessing ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-place-order-processing', callback );
+	}
+}
+
+/**
+ * Run a callback when the checkout place order fails.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout place order fails.
+ */
+export function onCheckoutPlaceOrderError( container, callback ) {
+	if ( container.checkoutPlaceOrderError ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-place-order-error', callback );
+	}
+}
+
+/**
+ * Run a callback when the checkout place order fails in an unrecoverable state.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout place order fails in an unrecoverable state.
+ */
+export function onCheckoutPlaceOrderCriticalError( container, callback ) {
+	if ( container.checkoutPlaceOrderCriticalError ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-place-order-critical-error', callback );
+	}
+}
+
+/**
+ * Run a callback when the checkout is complete.
+ *
+ * @param {Object}   container The container element inside the iframe document.
+ * @param {Function} callback  The callback to execute when the checkout is complete.
+ */
+export function onCheckoutComplete( container, callback ) {
+	if ( container.checkoutComplete ) {
+		callback();
+	} else {
+		container.addEventListener( 'checkout-complete', callback );
+	}
+}
+
+/**
+ * Trigger a form submit.
+ *
+ * @param {HTMLFormElement} form The form element.
+ *
+ * @return {void}
+ */
+export function triggerFormSubmit( form ) {
+	// form.submit does not trigger submit event listener, so we use requestSubmit.
+	form.requestSubmit( form.querySelector( 'button[type="submit"]' ) );
+}
+
+/**
+ * Get checkout data from an element or its ID.
+ *
+ * @param {HTMLElement|string} element HTML element or its ID to get checkout data from.
+ *
+ * @return {Object} Checkout data.
+ */
+export function getCheckoutData( element ) {
+	const container = typeof element === 'string' ? document.getElementById( element ) : element;
+	if ( ! container ) {
+		console.warn( 'No container found for checkout data' ); // eslint-disable-line no-console
+		return {};
+	}
+
+	let data = {};
+	// If the element is a form, get the form data.
+	if ( container.tagName === 'FORM' ) {
+		const formData = new FormData( container );
+		data = Object.fromEntries( formData );
+	}
+
+	const json = container.dataset.checkout;
+	if ( ! json ) {
+		console.warn( 'No checkout data found' ); // eslint-disable-line no-console
+		return data;
+	}
+
+	try {
+		data = {
+			...data,
+			...JSON.parse( json ),
+		};
+	} catch ( error ) {
+		console.warn( 'Error parsing checkout data' ); // eslint-disable-line no-console
+	}
+
+	// Overwrite the action type with the value from the URL.
+	const url = new URL( container.ownerDocument.defaultView.location.href );
+	if ( url.searchParams.get( 'action_type' ) ) {
+		data.action_type = url.searchParams.get( 'action_type' );
+	}
+
+	return data;
+}
+
+/**
+ * Get formatted amount for price summary display.
+ *
+ * @param {number} amount   The amount to format.
+ * @param {string} currency The currency to format the amount in.
+ *
+ * @return {string} The formatted amount.
+ */
+export function getFormattedAmount( amount, currency = 'USD' ) {
+	return parseFloat( amount ).toLocaleString( document.documentElement.lang, {
+		style: 'currency',
+		currency,
+		currencyDisplay: 'narrowSymbol',
+	} );
+}

package/src/setup/block-styles.js

@@ -0,0 +1,2 @@
+import '../block-styles/core/columns';
+import '../block-styles/core/group';

package/src/setup/category.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { getCategories, setCategories } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import NewspackLogo from './newspack-logo';
+
+setCategories( [
+	...getCategories().filter( ( { slug } ) => slug !== 'newspack' ),
+	{
+		slug: 'newspack',
+		title: 'Newspack',
+		icon: <NewspackLogo />,
+	},
+] );

package/src/setup/editor.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import './category';
+import './block-styles';
+import './unregister-blocks';
+import './editor.scss';

package/src/setup/editor.scss

@@ -0,0 +1,56 @@
+@use "~@wordpress/base-styles/colors";
+
+.editor-styles-wrapper {
+	.block-editor-block-patterns-list__item {
+		.block-editor-block-preview__container {
+			max-height: 316px;
+			overflow: hidden;
+		}
+	}
+
+	.newspack-blocks-placeholder-block {
+		background-color: colors.$white;
+		border-radius: 2px;
+		box-shadow: inset 0 0 0 1px colors.$gray-900;
+		font-family:
+			-apple-system,
+			BlinkMacSystemFont,
+			"Segoe UI",
+			Roboto,
+			Oxygen-Sans,
+			Ubuntu,
+			Cantarell,
+			"Helvetica Neue",
+			sans-serif;
+		margin-top: 0;
+		padding: 1em;
+		p {
+			font-size: 13px;
+		}
+		&__label {
+			align-items: center;
+			display: flex;
+			flex-wrap: wrap;
+			font-size: 18pt;
+
+			svg {
+				display: block;
+				fill: currentcolor;
+				margin-right: 1ch;
+			}
+		}
+		&__buttons {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 16px;
+
+			.components-button {
+				margin: 0;
+
+				&.is-primary {
+					color: colors.$white;
+				}
+			}
+		}
+	}
+}

package/src/setup/newspack-logo.js

@@ -0,0 +1,26 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const NewspackLogo = ( { size = 24, className } ) => (
+	<SVG className={ classNames( 'newspack-logo', className ) } width={ size } height={ size } viewBox="0 0 24 24">
+		<Path fill={ colors[ 'primary-600' ] } d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" />
+		<Path
+			fill={ colors[ 'neutral-000' ] }
+			d="M16.546 13.97v-1.364h-1.364l1.364 1.364ZM13.97 11.394h2.575V10.03h-3.939l1.364 1.364ZM11.394 8.818h5.152V7.455H10.03l1.364 1.363ZM7.455 7.455l9.09 9.09H13.97l-4.697-4.697v4.697H7.455v-9.09Z"
+		/>
+	</SVG>
+);
+
+export default NewspackLogo;

package/src/setup/placeholder-blocks.js

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies.
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { getBlockType, registerBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { withDispatch } from '@wordpress/data';
+import { Icon, pullquote } from '@wordpress/icons';
+
+const placeholderBlocks = {
+	'newspack-ads/ad-unit': {
+		title: __( 'Ad Unit', 'newspack-blocks' ),
+		description: __( 'Render an ad unit from your inventory.', 'newspack-blocks' ),
+		icon: pullquote,
+		message: __( 'Place ad units inside your page by installing Newspack Ads.', 'newspack-blocks' ),
+		url: 'https://help.newspack.com/revenue/advertising/',
+	},
+};
+
+function registerPlaceholderBlock( blockName, { title, description, icon, message, url } ) {
+	if ( getBlockType( blockName ) ) {
+		return;
+	}
+	title = title || blockName.split( '/' ).pop();
+	const edit = ( { clientId, removeBlocks } ) => {
+		const blockProps = useBlockProps(); // eslint-disable-line
+		return (
+			<div { ...blockProps }>
+				<div className="newspack-blocks-placeholder-block">
+					<div className="newspack-blocks-placeholder-block__label">
+						{ icon && <Icon icon={ icon } /> }
+						{ title }
+					</div>
+					<p>
+						<strong>
+							{ sprintf(
+								// translators: %s is the block name.
+								__( 'The "%s" block is currently not available.', 'newspack-blocks' ),
+								title
+							) }
+						</strong>
+					</p>
+					{ message && <p>{ message }</p> }
+					<div className="newspack-blocks-placeholder-block__buttons">
+						{ url && (
+							<Button variant="primary" target="_blank" rel="external" href={ url }>
+								{ __( 'Visit Plugin Page', 'newspack-blocks' ) }
+							</Button>
+						) }
+						<Button variant="secondary" isDestructive onClick={ () => removeBlocks( clientId ) }>
+							{ __( 'Remove Block', 'newspack-blocks' ) }
+						</Button>
+					</div>
+				</div>
+			</div>
+		);
+	};
+	registerBlockType( blockName, {
+		apiVersion: 3,
+		title,
+		description,
+		icon,
+		edit: withDispatch( dispatch => ( {
+			removeBlocks: dispatch( 'core/block-editor' ).removeBlocks,
+		} ) )( edit ),
+		supports: {
+			html: false,
+			lock: false,
+			reusable: false,
+			inserter: false,
+			defaultStylePicker: false,
+			customClassName: false,
+			className: false,
+			alignWide: false,
+			align: false,
+			anchor: false,
+		},
+	} );
+}
+
+for ( const blockName in placeholderBlocks ) {
+	registerPlaceholderBlock( blockName, placeholderBlocks[ blockName ] );
+}

package/src/setup/unregister-blocks.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import { getBlockType, unregisterBlockType } from '@wordpress/blocks';
+import domReady from '@wordpress/dom-ready';
+
+const removeBlocks = [ 'jetpack/donations', 'jetpack/subscriptions' ];
+
+domReady( function () {
+	removeBlocks.forEach( function ( blockName ) {
+		if ( getBlockType( blockName ) ) {
+			unregisterBlockType( blockName );
+		}
+	} );
+} );

package/src/shared/authors.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Helper functions to fetch authors.
+ *
+ * @package Newspack_Blocks
+ */
+
+namespace Newspack_Blocks;
+
+/**
+ * Get a list of user roles on this site that have the edit_posts capability.
+ *
+ * @return array List of roles with edit_posts capability. Each array item is an array with a slug and label property.
+ */
+function get_authors_roles() {
+	global $wp_roles;
+
+	$editable_roles = [];
+
+	foreach ( $wp_roles->roles as $role_slug => $role ) {
+		if ( isset( $role['capabilities'] ) && isset( $role['capabilities']['edit_posts'] ) && $role['capabilities']['edit_posts'] ) {
+			$editable_roles[] = [
+				'slug'  => $role_slug,
+				'label' => $role['name'],
+			];
+		}
+	}
+
+	/**
+	 * Deprecated filter.
+	 *
+	 * @param array $editable_roles Array of editable role names as registered via add_role.
+	 *
+	 * @deprecated Use the newspack_blocks_authors_roles filter instead.
+	 * @return array Filtered array of roles.
+	 */
+	$editable_roles = apply_filters( 'newspack_blocks_author_list_editable_roles', $editable_roles );
+
+	/**
+	 * Filter the array of editable roles so other plugins can add/remove as needed.
+	 * The array should be a flat array of the name of each role as registered via add_role.
+	 * https://developer.wordpress.org/reference/functions/add_role/
+	 *
+	 * @param array $editable_roles Array of roles that can edit posts. Each array item is an array with a slug and label property.
+	 *
+	 * @return array Filtered array of roles.
+	 */
+	return apply_filters( 'newspack_blocks_authors_roles', $editable_roles );
+}
+
+/**
+ * Get a list of user roles on this site that have the edit_posts capability.
+ *
+ * @return string[] List of roles with edit_posts capability.
+ */
+function get_authors_roles_slugs() {
+	return array_map(
+		function( $role ) {
+			return $role['slug'];
+		},
+		get_authors_roles()
+	);
+}

package/src/shared/js/newspack-icon.js

@@ -0,0 +1,31 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+
+/**
+ * WordPress dependencies.
+ */
+import { Path, SVG } from '@wordpress/components';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+const NewspackIcon = ( { size = 24, className } ) => (
+	<SVG className={ classnames( 'newspack-icon', className ) } width={ size } height={ size } viewBox="0 0 24 24">
+		<Path
+			className="newspack-icon__circle"
+			fill={ colors[ 'primary-600' ] }
+			d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
+		/>
+		<Path
+			className="newspack-icon__n"
+			fill={ colors[ 'neutral-000' ] }
+			d="M16.546 13.97v-1.364h-1.364l1.364 1.364ZM13.97 11.394h2.575V10.03h-3.939l1.364 1.364ZM11.394 8.818h5.152V7.455H10.03l1.364 1.363ZM7.455 7.455l9.09 9.09H13.97l-4.697-4.697v4.697H7.455v-9.09Z"
+		/>
+	</SVG>
+);
+
+export default NewspackIcon;

package/src/shared/js/utils.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+export const getBylineHTML = ( post, showAvatar = false ) => {
+	const byline = '<span class="byline">' + post.newspack_post_byline + '</span>';
+	if ( showAvatar && post.newspack_post_avatars ) {
+		return post.newspack_post_avatars + byline;
+	}
+	return byline;
+};
+
+export const formatSponsorLogos = sponsorInfo => (
+	<span className="sponsor-logos">
+		{ sponsorInfo.map( sponsor => (
+			<Fragment key={ sponsor.id }>
+				{ sponsor.src && (
+					<a href={ sponsor.sponsor_url }>
+						<img src={ sponsor.src } width={ sponsor.img_width } height={ sponsor.img_height } alt={ sponsor.sponsor_name } />
+					</a>
+				) }
+			</Fragment>
+		) ) }
+	</span>
+);
+
+export const formatSponsorByline = sponsorInfo => (
+	<span className="byline sponsor-byline">
+		{ sponsorInfo[ 0 ].byline_prefix }{ ' ' }
+		{ sponsorInfo.reduce( ( accumulator, sponsor, index ) => {
+			return [
+				...accumulator,
+				<span className="author" key={ sponsor.id }>
+					<a href={ sponsor.author_link }>{ sponsor.sponsor_name }</a>
+				</span>,
+				index < sponsorInfo.length - 2 && ', ',
+				sponsorInfo.length > 1 && index === sponsorInfo.length - 2 && _x( 'and', 'post author', 'newspack-blocks' ),
+			];
+		}, [] ) }
+	</span>
+);
+
+export const getPostStatusLabel = ( post = {} ) =>
+	post.post_status !== 'publish' ? (
+		<div className="newspack-preview-label">
+			{ { draft: __( 'Draft', 'newspack-blocks' ), future: __( 'Scheduled', 'newspack-blocks' ) }[ post.post_status ] }
+		</div>
+	) : null;