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

package/src/blocks/donate/index.js

@@ -0,0 +1,72 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+import { gift as icon } from 'newspack-icons';
+
+/**
+ * WordPress dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { registerBlockStyle } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Style dependencies - will load in editor
+ */
+import './styles/editor.scss';
+import './styles/view.scss';
+
+const { name, attributes, apiVersion, category, supports } = metadata;
+
+// Name must be exported separately.
+export { name };
+
+export const title = __( 'Donate', 'newspack-blocks' );
+
+export const settings = {
+	apiVersion,
+	title,
+	icon: {
+		src: icon,
+		foreground: colors[ 'primary-400' ],
+	},
+	category,
+	keywords: [ __( 'donate', 'newspack-blocks' ), __( 'memberships', 'newspack-blocks' ), __( 'subscriptions', 'newspack-blocks' ) ],
+	description: (
+		<>
+			<p>{ __( 'Manually place a donation block on any post or page on your site.', 'newspack-blocks' ) }</p>
+			<ExternalLink href="https://help.newspack.com/publishing-and-appearance/blocks/donate-block/">
+				{ __( 'Support reference', 'newspack-blocks' ) }
+			</ExternalLink>
+		</>
+	),
+	attributes,
+	supports,
+	edit,
+	save: () => null, // to use view.php
+};
+
+/**
+ * Block Styles
+ */
+registerBlockStyle( 'newspack-blocks/donate', {
+	name: 'alternate',
+	label: __( 'Alternate', 'newspack-blocks' ),
+} );
+
+registerBlockStyle( 'newspack-blocks/donate', {
+	name: 'minimal',
+	label: __( 'Minimal', 'newspack-blocks' ),
+} );
+
+registerBlockStyle( 'newspack-blocks/donate', {
+	name: 'modern',
+	label: __( 'Modern', 'newspack-blocks' ),
+} );

package/src/blocks/donate/styles/editor.scss

@@ -0,0 +1,230 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "newspack-colors" as np-colors;
+@use "../../../shared/sass/variables";
+@use "../frequency-based/style" as frequency-based;
+@use "../tiers-based/style" as tiers-based;
+
+.wp-block-newspack-blocks-donate {
+	&__tier--frequency {
+		position: relative;
+	}
+
+	&__panel-inputs {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin-bottom: 21px;
+		input,
+		span {
+			min-width: 0;
+		}
+		span {
+			margin-bottom: 7px;
+			display: inline-block;
+			width: 32%;
+		}
+		input {
+			max-width: 100%;
+		}
+	}
+
+	.submit-button {
+		display: inline-block;
+		text-align: center;
+	}
+
+	button,
+	.submit-button {
+		font-family: var(--newspack-theme-font-heading, sans-serif);
+		font-size: variables.$font__size-sm;
+		font-weight: bold;
+		outline: none;
+
+		&[type="submit"] {
+			border: none;
+		}
+	}
+	button[type="submit"],
+	.submit-button {
+		border-radius: 5px;
+		box-sizing: border-box;
+		color: np-colors.$neutral-000;
+		line-height: 3;
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+}
+
+.wp-block-newspack-blocks-donate.wpbnbd--frequency-based.tiered {
+	.tiers {
+		input.frequency-input {
+			~ input[type="number"] {
+				position: absolute;
+				max-width: 81px;
+				top: -31px;
+				z-index: 9;
+				left: 5px;
+				display: none;
+			}
+
+			&:checked ~ input[type="number"] {
+				display: flex;
+			}
+		}
+	}
+}
+
+.block-editor-block-list__layout
+.block-editor-block-list__block
+.wp-block-newspack-blocks-donate.tiered.is-style-minimal
+.wp-block-newspack-blocks-donate__tiers
+input[type="radio"]:checked + .tier-select-label {
+	background: transparent;
+	color: np-colors.$neutral-900;
+}
+
+.components-frequency-donations {
+	p {
+		margin-bottom: 8px;
+	}
+
+	.components-base-control {
+		margin-bottom: 0;
+
+		&:last-child {
+			margin-bottom: 0;
+
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	&__minimum-donation {
+		margin-top: 16px;
+	}
+
+	&__error {
+		color: np-colors.$error-500;
+	}
+}
+
+.newspack-blocks-donate {
+	&__layout-selector {
+		display: grid;
+		gap: 8px;
+		grid-template-columns: repeat(2, 1fr);
+		margin-bottom: 1.8em;
+
+		.components-button {
+			justify-content: center;
+
+			&.is-secondary {
+				box-shadow: inset 0 0 0 1px wp-colors.$gray-400;
+				color: wp-colors.$gray-900;
+			}
+		}
+	}
+
+	&__notice {
+		margin: 0 0 20px;
+	}
+}
+
+.newspack-blocks-additional-fields-editor {
+	&__field {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 10px;
+		border: 1px solid wp-colors.$gray-300;
+		& + & {
+			border-top: none;
+		}
+		&:first-of-type {
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+		}
+		&:last-of-type {
+			margin-bottom: 20px;
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+		}
+		&__left-section {
+			display: flex;
+			align-items: center;
+			> div {
+				display: flex;
+				flex-direction: column;
+				button {
+					padding: 0 !important;
+					height: 15px;
+					min-width: 0 !important;
+					width: 24px;
+				}
+			}
+			> span {
+				padding-left: 10px;
+			}
+			&__icon {
+				margin-right: 8px;
+			}
+		}
+	}
+	&__field-edited {
+		&__help,
+		&__validation-message {
+			font-size: 12px;
+			line-height: 1.4;
+		}
+		&__help {
+			margin-bottom: 20px;
+		}
+		&__validation-message {
+			margin-bottom: 8px;
+			color: wp-colors.$alert-red !important;
+		}
+		&__width {
+			margin-bottom: 20px;
+			div:first-child {
+				margin-bottom: 8px;
+			}
+		}
+		&--name input {
+			font-family: monospace !important;
+		}
+		&--invalid input {
+			border-color: wp-colors.$alert-red !important;
+		}
+	}
+	&__modal {
+		max-width: 400px !important;
+	}
+	&__options-popover {
+		.components-popover__content {
+			padding: 6px;
+			max-width: 196px;
+		}
+		.components-button {
+			padding: 11px 13px;
+			text-decoration: none;
+			&:not(.is-destructive) {
+				color: wp-colors.$gray-900;
+			}
+			&:focus {
+				box-shadow: none;
+				outline: none;
+			}
+		}
+	}
+	&__edit-buttons {
+		display: flex;
+		justify-content: flex-end;
+		button + button {
+			margin-left: 10px;
+		}
+	}
+	.components-base-control {
+		margin-bottom: 0;
+	}
+}