MR-5: Metered Paywall

wordpress/wp-content/plugins/memberful-wp/js/src/blocks/extensions/block-visibility/index.js

@@ -1,4 +1,5 @@
 import {
+  __experimentalSpacer as Spacer,
   ToggleControl,
   SelectControl,
   CheckboxControl,
@@ -95,11 +96,11 @@ const MemberfulVisibilityControlsOptions = (props) => {
           { value: "none", label: __("All users (Default)", "memberful") },
           {
             value: "logged_in",
-            label: __("All logged-in members", "memberful"),
+            label: __("All members (active, inactive, or free)", "memberful"),
           },
           {
             value: "specific",
-            label: __("Specific membership plan", "memberful"),
+            label: __("Members with an active subscription", "memberful"),
           },
         ]}
       />
@@ -123,9 +124,11 @@ const MemberfulVisibilityControlsOptions = (props) => {
             />
           ))}
           {memberful_visibility_plans.length === 0 && (
-            <Notice status="error" isDismissible={false}>
-              {__("Please select at least one plan.", "memberful")}
-            </Notice>
+            <Spacer marginBottom={3}>
+              <Notice status="error" isDismissible={false}>
+                {__("Please select at least one plan.", "memberful")}
+              </Notice>
+            </Spacer>
           )}
         </>
       )}
@@ -149,7 +152,7 @@ const MemberfulVisibilityControls = createHigherOrderComponent((BlockEdit) => {
         {props.isSelected && !excludedBlocks.includes(props.name) && (
           <InspectorControls>
             <PanelBody
-              title={__("Memberful Visibility", "memberful")}
+              title={__("Memberful: Restrict Access", "memberful")}
               initialOpen={false}
             >
               {MemberfulVisibilityControlsOptions(props)}

wordpress/wp-content/plugins/memberful-wp/js/src/blocks/metering-countdown/block.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "memberful/metering-countdown",
+  "version": "1.0.0",
+  "title": "Memberful Metering Countdown",
+  "category": "memberful",
+  "icon": "clock",
+  "description": "Shows visitors how many free articles they have left under metering.",
+  "keywords": [
+    "Memberful",
+    "Metering",
+    "Paywall"
+  ],
+  "textdomain": "memberful",
+  "attributes": {
+    "template": {
+      "type": "string",
+      "default": "You have {count} free articles left."
+    },
+    "singularTemplate": {
+      "type": "string",
+      "default": "You have {count} free article left."
+    },
+    "lastArticleTemplate": {
+      "type": "string",
+      "default": "This is your last free article."
+    }
+  },
+  "supports": {
+    "html": false
+  },
+  "editorScript": "memberful-wp-block-editor",
+  "render": "file:./render.php"
+}

wordpress/wp-content/plugins/memberful-wp/js/src/blocks/metering-countdown/edit.js

@@ -0,0 +1,157 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import {
+	BlockControls,
+	InspectorControls,
+	RichText,
+	store as blockEditorStore,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	TextControl,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { create, insert, toHTMLString } from '@wordpress/rich-text';
+
+const COUNT_PLACEHOLDER = '{count}';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {Element} Element to render.
+ */
+export default function Edit( { attributes, setAttributes, clientId } ) {
+	const { template, singularTemplate, lastArticleTemplate } = attributes;
+	const { selectionStart, selectionEnd } = useSelect(
+		( select ) => {
+			const { getSelectionStart, getSelectionEnd } =
+				select( blockEditorStore );
+			const start = getSelectionStart();
+			const end = getSelectionEnd();
+
+			if (
+				start.clientId !== clientId ||
+				end.clientId !== clientId ||
+				start.attributeKey !== 'template' ||
+				end.attributeKey !== 'template'
+			) {
+				return {};
+			}
+
+			return {
+				selectionStart: start.offset,
+				selectionEnd: end.offset,
+			};
+		},
+		[ clientId ]
+	);
+
+	const insertCountPlaceholder = () => {
+		const value = create( { html: template || '' } );
+		const selectedStart = Number.isInteger( selectionStart )
+			? selectionStart
+			: value.text.length;
+		const selectedEnd = Number.isInteger( selectionEnd )
+			? selectionEnd
+			: selectedStart;
+		const insertStart = Math.max(
+			0,
+			Math.min( selectedStart, selectedEnd, value.text.length )
+		);
+		const insertEnd = Math.max(
+			0,
+			Math.min( Math.max( selectedStart, selectedEnd ), value.text.length )
+		);
+		const nextValue = insert(
+			value,
+			COUNT_PLACEHOLDER,
+			insertStart,
+			insertEnd
+		);
+
+		setAttributes( {
+			template: toHTMLString( { value: nextValue } ),
+		} );
+	};
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Countdown messages', 'memberful' ) }>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'One article left message', 'memberful' ) }
+						help={ __(
+							'Shown when exactly one free article remains after this one. Leave empty to hide the block at that point.',
+							'memberful'
+						) }
+						value={ singularTemplate }
+						onChange={ ( value ) =>
+							setAttributes( { singularTemplate: value } )
+						}
+						placeholder={ __(
+							'You have {count} free article left.',
+							'memberful'
+						) }
+					/>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Last article message', 'memberful' ) }
+						help={ __(
+							'Shown instead of the countdown when the visitor is reading their last free article. Leave empty to hide the block on the last article.',
+							'memberful'
+						) }
+						value={ lastArticleTemplate }
+						onChange={ ( value ) =>
+							setAttributes( { lastArticleTemplate: value } )
+						}
+						placeholder={ __(
+							'This is your last free article.',
+							'memberful'
+						) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<BlockControls group="block">
+				<ToolbarGroup>
+					<ToolbarButton
+						title={ __( 'Insert count placeholder', 'memberful' ) }
+						onClick={ insertCountPlaceholder }
+					>
+						{ COUNT_PLACEHOLDER }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			<RichText
+				{ ...useBlockProps() }
+				identifier="template"
+				tagName="p"
+				value={ template }
+				onChange={ ( value ) => setAttributes( { template: value } ) }
+				placeholder={ __(
+					'You have {count} free articles left.',
+					'memberful'
+				) }
+			/>
+		</>
+	);
+}

wordpress/wp-content/plugins/memberful-wp/js/src/blocks/metering-countdown/index.js

@@ -0,0 +1,25 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+	save: () => null,
+} );

wordpress/wp-content/plugins/memberful-wp/js/src/blocks/metering-countdown/render.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * PHP file to use when rendering the block type on the server to show on the front end.
+ *
+ * The following variables are exposed to the file:
+ *     $attributes (array): The block attributes.
+ *     $content (string): The block default content.
+ *     $block (WP_Block): The block instance.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+
+$post_id = get_queried_object_id();
+
+if ( Memberful_Metering_Access::DECISION_ALLOW_SAMPLE !== Memberful_Metering_Access::get_current_decision( $post_id ) ) {
+	return;
+}
+
+$remaining = Memberful_Metering_Access::get_current_remaining( $post_id );
+
+/**
+ * Remaining counts views left *after* this article, so on the last free article it is zero.
+ * Swap in the dedicated message there instead of rendering "0 free articles left", and use
+ * the singular wording when exactly one view remains.
+ */
+if ( 0 === $remaining ) {
+	$template = isset( $attributes['lastArticleTemplate'] ) ? (string) $attributes['lastArticleTemplate'] : '';
+} elseif ( 1 === $remaining ) {
+	$template = isset( $attributes['singularTemplate'] ) ? (string) $attributes['singularTemplate'] : '';
+} else {
+	$template = isset( $attributes['template'] ) ? (string) $attributes['template'] : '';
+}
+
+$message = str_replace(
+	'{count}',
+	number_format_i18n( $remaining ),
+	$template
+);
+
+if ( '' === trim( $message ) ) {
+	return;
+}
+
+printf(
+	'<p %s>%s</p>',
+	get_block_wrapper_attributes(),
+	wp_kses_post( $message )
+);

wordpress/wp-content/plugins/memberful-wp/js/src/blocks/paywall-divider/index.js

@@ -14,7 +14,7 @@ registerBlockType(metadata.name, {
         {...blockProps}
         style={{
           borderTop: "2px dashed currentColor",
-          margin: "16px 0",
+          margin: "16px auto",
           paddingTop: "8px",
           opacity: 0.6,
         }}

wordpress/wp-content/plugins/memberful-wp/js/src/editor-scripts.js

@@ -7,3 +7,4 @@
 // Block imports.
 import "./blocks/extensions";
 import "./blocks/paywall-divider";
+import "./blocks/metering-countdown";