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

package/src/blocks/carousel/view.scss

@@ -0,0 +1,397 @@
+@use "newspack-colors" as np-colors;
+@use "../../shared/sass/variables";
+@use "../../shared/sass/mixins";
+@use "../../shared/sass/preview";
+
+.wp-block-newspack-blocks-carousel {
+	position: relative;
+	margin-top: 0;
+	max-width: 100%;
+
+	article {
+		max-width: 100%;
+		padding: 0;
+		position: relative;
+		margin-bottom: 0;
+		word-break: break-word;
+		overflow-wrap: break-word;
+		a {
+			color: np-colors.$neutral-000;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: rgba(np-colors.$neutral-000, 0.75);
+			}
+		}
+		.entry-title {
+			font-size: 1.2em;
+
+			a {
+				/* autoprefixer: off */
+				-webkit-box-orient: vertical;
+				/* autoprefixer: on */
+				display: -webkit-box;
+				-webkit-line-clamp: 3;
+				max-height: 3.5625em;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+		.avatar {
+			height: 1.8em;
+			width: 1.8em;
+		}
+
+		@include mixins.media(tablet) {
+			.entry-title {
+				font-size: 1.6em;
+			}
+			.avatar {
+				height: 40px;
+				width: 40px;
+			}
+		}
+		.entry-wrapper {
+			bottom: 0;
+			background-color: rgba(np-colors.$neutral-1000, 0.5);
+			color: np-colors.$neutral-000;
+			left: 0;
+			padding: 1.5em;
+			position: absolute;
+			right: 0;
+		}
+		.entry-meta {
+			color: np-colors.$neutral-000;
+			margin-bottom: 0;
+			font-size: 0.8em;
+
+			a {
+				color: np-colors.$neutral-000;
+				font-weight: bold;
+				text-decoration: none;
+
+				&:active,
+				&:focus,
+				&:hover {
+					color: rgba(np-colors.$neutral-000, 0.75);
+				}
+			}
+		}
+
+		.entry-caption {
+			margin-top: var(--wp--preset--spacing--00, var(--wp--preset--spacing--20, 0.5rem));
+			width: 100%;
+
+			figcaption {
+				color: np-colors.$neutral-000;
+				font-size: var(--wp--preset--font-size--x-small, var(--newspack-theme-font-size-sm, 0.8em));
+				line-height: var(--wp--custom--line-height--x-small, var(--newspack-theme-font-line-height-body, 1.6));
+
+				a {
+					font-weight: 400;
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+	.post-thumbnail {
+		margin: 0;
+		height: 100%;
+		width: 100%;
+		padding: 0;
+		position: relative;
+		a,
+		img {
+			display: block;
+			height: 100%;
+			object-fit: cover;
+			width: 100%;
+
+			&.image-fit-contain {
+				object-fit: contain;
+			}
+		}
+	}
+	&__placeholder {
+		height: 420px;
+		background: np-colors.$neutral-050;
+	}
+	.swiper-initialized .wp-block-newspack-blocks-carousel__placeholder {
+		height: 100%;
+	}
+	p {
+		white-space: normal;
+	}
+	.swiper-pagination-bullets {
+		align-items: flex-end;
+		bottom: 0;
+		display: flex;
+		flex-wrap: wrap;
+		height: calc(1.5em + 12px);
+		justify-content: center;
+		padding: 0;
+		position: relative;
+	}
+	.swiper-pagination-bullet {
+		background: np-colors.$neutral-1000;
+		border-radius: 6px;
+		display: inline-block;
+		height: 12px;
+		margin: 0 4px;
+		opacity: 0.5;
+		padding: 0;
+		transition:
+			box-shadow 250ms,
+			opacity 250ms,
+			width 250ms;
+		width: 12px;
+		&:focus {
+			box-shadow:
+				0 0 0 2px np-colors.$neutral-000,
+				0 0 0 4px np-colors.$neutral-100;
+			outline: 0;
+		}
+		&.swiper-pagination-bullet-active,
+		&[selected] {
+			opacity: 1;
+			outline: 0;
+			width: 24px;
+		}
+
+		span {
+			@include mixins.visuallyHidden;
+		}
+	}
+	.swiper-button {
+		background-color: rgba(np-colors.$neutral-1000, 0.5);
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 24px;
+		border: 0;
+		border-radius: 4px;
+		box-shadow: none;
+		color: transparent;
+		cursor: pointer;
+		height: 48px;
+		margin: 0;
+		padding: 0;
+		transition:
+			background-color 250ms,
+			box-shadow 250ms;
+		width: 48px;
+		&:focus,
+		&:hover {
+			background-color: np-colors.$neutral-700;
+		}
+		&:focus {
+			box-shadow:
+				inset 0 0 0 2px np-colors.$neutral-700,
+				inset 0 0 0 4px np-colors.$neutral-000;
+			outline: 0;
+		}
+	}
+	.swiper-button-next,
+	.swiper-button-prev {
+		left: 1.5em;
+		display: none;
+		right: auto;
+		margin-top: -24px;
+
+		@include mixins.media(mobile) {
+			display: block;
+		}
+	}
+	.swiper-button-prev::after,
+	.swiper-rtl .swiper-button-next::after {
+		content: none;
+	}
+	.swiper-button-next::after,
+	.swiper-rtl .swiper-button-prev::after {
+		content: none;
+	}
+	.swiper-button-next {
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.88%204.12L13.76%2012l-7.88%207.88L8%2022l10-10L8%202z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E");
+		left: auto;
+		right: 1.5em;
+	}
+	.swiper-button-prev {
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E");
+	}
+	.swiper-button-pause,
+	.swiper-button-play {
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019h4V5H6v14zm8-14v14h4V5h-4z'%20fill='white'/%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3C/svg%3E");
+		display: none;
+		margin-top: 0;
+		position: absolute;
+		right: 1.5em;
+		top: 1.5em;
+		transform: none;
+		z-index: 9;
+	}
+	.swiper-button-play {
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'%20fill='white'/%3E%3Cpath%20d='M0 0h24v24H0z'%20fill='none'/%3E%3C/svg%3E");
+	}
+
+	/* Swiper Slide */
+	.swiper-slide {
+		height: auto;
+		max-height: 75vh;
+	}
+
+	/* Image styles */
+	figcaption {
+		font-size: variables.$font__size-xxs;
+	}
+
+	/* Headings */
+	.entry-title {
+		margin: 0 0 0.25em;
+		a {
+			color: np-colors.$neutral-000;
+			text-decoration: none;
+		}
+	}
+
+	/* Article meta */
+	.entry-meta {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		margin-top: 0.5em;
+		.byline:not(:last-child) {
+			margin-right: 1.5em;
+		}
+	}
+	.cat-links {
+		color: np-colors.$neutral-000;
+		font-size: 0.6em;
+		font-weight: bold;
+		margin: 0 0 0.5em;
+
+		&.sponsor-label {
+			align-items: center;
+
+			.flag + a {
+				margin-left: 0.5em;
+			}
+		}
+
+		a {
+			text-decoration: none;
+		}
+	}
+	.avatar {
+		border-radius: 100%;
+		display: block;
+		margin-right: 0.5em;
+	}
+
+	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-pause,
+	.swiper-button-play {
+		display: block;
+	}
+	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-play,
+	.swiper-button-pause {
+		display: none;
+	}
+
+	// Make sure Jetpack Content Options don't affect the block.
+	.posted-on,
+	.cat-links,
+	.tags-links,
+	.byline,
+	.author-avatar {
+		clip: auto;
+		height: auto;
+		position: relative;
+		width: auto;
+	}
+
+	// If hideControls is enabled, visually hide the UI elements.
+	&.hide-controls {
+		button {
+			display: none;
+			visibility: hidden;
+		}
+	}
+
+	&.slides-per-view-2 article {
+		.entry-title {
+			@include mixins.media(tablet) {
+				font-size: 1.4em;
+			}
+		}
+	}
+
+	&.slides-per-view-3 article,
+	&.slides-per-view-4 article {
+		.entry-title {
+			@include mixins.media(tablet) {
+				font-size: 1.2em;
+			}
+			@include mixins.media(desktop) {
+				font-size: 1em;
+			}
+		}
+		.entry-meta {
+			@include mixins.media(tablet) {
+				font-size: 0.7em;
+			}
+		}
+	}
+
+	&.slides-per-view-5 article,
+	&.slides-per-view-6 article {
+		.entry-wrapper {
+			@include mixins.media(desktop) {
+				padding: 1em;
+			}
+		}
+		.entry-title {
+			@include mixins.media(tablet) {
+				font-size: 1.2em;
+			}
+			@include mixins.media(desktop) {
+				font-size: 0.9em;
+
+				a {
+					-webkit-line-clamp: 2;
+				}
+			}
+		}
+		.entry-meta {
+			@include mixins.media(tablet) {
+				font-size: 0.7em;
+			}
+		}
+	}
+}
+
+/* stylelint-disable selector-type-no-unknown  */
+.wpnbpc {
+	.entry-sponsors {
+		align-items: center;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		width: 100%;
+
+		&.plus-author {
+			font-size: 0.9em;
+
+			&:not(:last-child) {
+				margin-bottom: 0.5rem;
+			}
+		}
+	}
+
+	.sponsor-logos {
+		align-items: center;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		line-height: 1;
+	}
+}
+/* stylelint-enable */

package/src/blocks/checkout-button/block.json

@@ -0,0 +1,117 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "newspack-blocks/checkout-button",
+	"title": "Checkout Button",
+	"category": "newspack",
+	"description": "Modal checkout button for WooCommerce products.",
+	"keywords": [
+		"woocommerce",
+		"product",
+		"checkout",
+		"button"
+	],
+	"textdomain": "newspack-blocks",
+	"attributes": {
+		"product": {
+			"type": "string"
+		},
+		"variation": {
+			"type": "string"
+		},
+		"is_variable": {
+			"type": "boolean",
+			"default": false
+		},
+		"price": {
+			"type": "string"
+		},
+		"text": {
+			"type": "string"
+		},
+		"placeholder": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"gradient": {
+			"type": "string"
+		},
+		"afterSuccessBehavior": {
+			"type": "string"
+		},
+		"afterSuccessButtonLabel": {
+			"type": "string",
+			"default": "Continue"
+		},
+		"afterSuccessURL": {
+			"type": "string"
+		},
+		"width": {
+			"type": "number"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": [
+			"center",
+			"wide"
+		],
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"shadow": true,
+		"spacing": {
+			"__experimentalSkipSerialization": true,
+			"padding": [
+				"horizontal",
+				"vertical"
+			],
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		}
+	},
+	"styles": [
+		{
+			"name": "fill",
+			"label": "Fill",
+			"isDefault": true
+		},
+		{
+			"name": "outline",
+			"label": "Outline"
+		}
+	],
+	"editorStyle": "newspack-checkout-button-editor",
+	"style": "newspack-checkout-block-button"
+}

package/src/blocks/checkout-button/deprecated.js

@@ -0,0 +1,81 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+} from '@wordpress/block-editor';
+
+import metadata from './block.json';
+
+const v1 = {
+	...metadata,
+	attributes: {
+		...metadata.attributes,
+		afterSuccessButtonLabel: {
+			type: 'string',
+			default: 'Continue browsing',
+		},
+	},
+
+	save( { attributes, className } ) {
+		const { textAlign, fontSize, style, text, product, price, variation, is_variable, width } = attributes;
+
+		if ( ! text || ! product ) {
+			return null;
+		}
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, borderProps.className, {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+			// For backwards compatibility add style that isn't provided via
+			// block support.
+			'no-border-radius': style?.border?.radius === 0,
+		} );
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+		};
+
+		const wrapperClasses = classnames( className, 'wp-block-button', {
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<form>
+					<RichText.Content tagName="button" className={ buttonClasses } style={ buttonStyle } value={ text } />
+					<input type="hidden" name="product_id" value={ product } />
+					<input type="hidden" name="newspack_checkout" value="1" />
+
+					{ price && <input type="hidden" name="price" value={ price } /> }
+					{ variation && <input type="hidden" name="variation_id" value={ variation } /> }
+					{ is_variable && <input type="hidden" name="is_variable" value="1" /> }
+
+					{ attributes.afterSuccessBehavior && (
+						<input type="hidden" name="after_success_behavior" value={ attributes.afterSuccessBehavior } />
+					) }
+
+					{ attributes.afterSuccessButtonLabel && (
+						<input type="hidden" name="after_success_button_label" value={ attributes.afterSuccessButtonLabel } />
+					) }
+					{ attributes.afterSuccessBehavior && <input type="hidden" name="after_success_url" value={ attributes.afterSuccessURL || '' } /> }
+				</form>
+			</div>
+		);
+	},
+};
+export default [ v1 ];