Block Editor: Settings Sidebar: Conditionally display Landing Page setting

includes/plugin-sidebars/class-convertkit-plugin-sidebar-post-settings.php

@@ -157,26 +157,38 @@ public function get_fields() {
 
 		// Get Products.
 		$restrict_content = array(
-			'0' => esc_html__( 'Don\'t restrict content to member-only', 'convertkit' ),
+			'0' => esc_html__( 'Do not restrict content to member-only', 'convertkit' ),
 		);
 		if ( $convertkit_forms->exist() ) {
+			$restrict_content['forms'] = array(
+				'label'  => esc_html__( 'Forms', 'convertkit' ),
+				'values' => array(),
+			);
 			foreach ( $convertkit_forms->get() as $form ) {
 				// Legacy forms don't include a `format` key, so define them as inline.
-				$restrict_content[ 'form_' . absint( $form['id'] ) ] = sprintf(
+				$restrict_content['forms']['values'][ 'form_' . absint( $form['id'] ) ] = sprintf(
 					'%s [%s]',
 					sanitize_text_field( $form['name'] ),
 					( ! empty( $form['format'] ) ? sanitize_text_field( $form['format'] ) : 'inline' )
 				);
 			}
 		}
 		if ( $convertkit_tags->exist() ) {
+			$restrict_content['tags'] = array(
+				'label'  => esc_html__( 'Tags', 'convertkit' ),
+				'values' => array(),
+			);
 			foreach ( $convertkit_tags->get() as $tag ) {
-				$restrict_content[ 'tag_' . absint( $tag['id'] ) ] = sanitize_text_field( $tag['name'] );
+				$restrict_content['tags']['values'][ 'tag_' . absint( $tag['id'] ) ] = sanitize_text_field( $tag['name'] );
 			}
 		}
 		if ( $convertkit_products->exist() ) {
+			$restrict_content['products'] = array(
+				'label'  => esc_html__( 'Products', 'convertkit' ),
+				'values' => array(),
+			);
 			foreach ( $convertkit_products->get() as $product ) {
-				$restrict_content[ 'product_' . $product['id'] ] = sanitize_text_field( $product['name'] );
+				$restrict_content['products']['values'][ 'product_' . $product['id'] ] = sanitize_text_field( $product['name'] );
 			}
 		}
 
@@ -196,6 +208,7 @@ public function get_fields() {
 				'type'        => 'select',
 				'description' => __( 'Select a landing page to make it appear in place of this page.', 'convertkit' ),
 				'values'      => $landing_pages,
+				'post_type'   => 'page',
 			),
 			'tag'              => array(
 				'label'       => __( 'Tag', 'convertkit' ),

resources/backend/js/gutenberg.js

@@ -936,7 +936,7 @@ function convertKitGutenbergRegisterPluginSidebar(sidebar) {
 		const { registerPlugin } = plugins;
 		const { PluginSidebar } = editor;
 		const { TextControl, SelectControl, PanelBody, PanelRow } = components;
-		const { useSelect, useDispatch } = data;
+		const { useSelect, useDispatch, select } = data;
 
 		/**
 		 * Returns a PluginDocumentSettingPanel for this plugin, containing
@@ -952,6 +952,7 @@ function convertKitGutenbergRegisterPluginSidebar(sidebar) {
 			}, []);
 			const { editPost: wpEditPost } = useDispatch('core/editor');
 			const settings = meta[sidebar.meta_key] || sidebar.default_values;
+			const currentPostType = select('core/editor').getCurrentPostType();
 
 			/**
 			 * Updates the Post meta meta_key object.
@@ -1002,28 +1003,92 @@ function convertKitGutenbergRegisterPluginSidebar(sidebar) {
 					},
 				};
 
-				const fieldOptions = [];
-
 				// Define additional Field Properties and the Field Element,
 				// depending on the Field Type (select, textarea, text etc).
 				switch (field.type) {
 					case 'select':
-						// Build options for <select> input.
+						// Check if any values are optgroups.
+						const hasOptgroups = Object.keys(field.values).some(
+							(subKey) =>
+								typeof field.values[subKey] === 'object' &&
+								field.values[subKey].label &&
+								field.values[subKey].values
+						);
+
+						if (hasOptgroups) {
+							const children = [];
+
+							for (const value of Object.keys(field.values)) {
+								if (
+									typeof field.values[value] === 'object' &&
+									field.values[value].label &&
+									field.values[value].values
+								) {
+									// Optgroup.
+									const groupChildren = [];
+									for (const groupValue of Object.keys(
+										field.values[value].values
+									)) {
+										groupChildren.push(
+											el(
+												'option',
+												{
+													value: groupValue,
+													key: groupValue,
+												},
+												field.values[value].values[
+													groupValue
+												]
+											)
+										);
+									}
+									children.push(
+										el(
+											'optgroup',
+											{
+												label: field.values[value]
+													.label,
+												key: value,
+											},
+											...groupChildren
+										)
+									);
+								} else {
+									// Option within optgroup.
+									children.push(
+										el(
+											'option',
+											{ value, key: value },
+											field.values[value]
+										)
+									);
+								}
+							}
+
+							return el(
+								SelectControl,
+								fieldProperties,
+								...children
+							);
+						}
+
+						// Options only, no optgroups.
+						const fieldOptions = [];
 						for (const value of Object.keys(field.values)) {
 							fieldOptions.push({
 								label: field.values[value],
 								value,
 							});
 						}
 
-						// Sort field's options alphabetically by label.
+						// Sort options alphabetically by label.
 						fieldOptions.sort(function (x, y) {
 							const a = x.label.toUpperCase(),
 								b = y.label.toUpperCase();
 							return a.localeCompare(b);
 						});
 
-						// Assign options to field.
+						// Assign options to field properties.
 						fieldProperties.options = fieldOptions;
 
 						// Return field element.
@@ -1047,6 +1112,14 @@ function convertKitGutenbergRegisterPluginSidebar(sidebar) {
 				const rows = [];
 
 				for (const key in fields) {
+					// Skip if the Post Type being edited is not the same as the Post Type specified in the field's post_type property.
+					if (
+						typeof fields[key].post_type !== 'undefined' &&
+						fields[key].post_type !== currentPostType
+					) {
+						continue;
+					}
+
 					rows.push(
 						el(
 							PanelRow,

tests/EndToEnd/landing-pages/PageLandingPageCest.php → tests/EndToEnd/landing-pages/BlockEditorLandingPageCest.php

@@ -5,11 +5,11 @@
 use Tests\Support\EndToEndTester;
 
 /**
- * Tests for Kit Landing Pages on WordPress Pages.
+ * Tests for Kit Landing Pages on WordPress Pages when using the Block Editor.
  *
  * @since   1.9.6
  */
-class PageLandingPageCest
+class BlockEditorLandingPageCest
 {
 	/**
 	 * Run common actions before running the test functions in this class.
@@ -444,8 +444,8 @@ public function testAddNewPageUsingDefinedLandingPageWithWPRocket(EndToEndTester
 			landingPage: $_ENV['CONVERTKIT_API_LANDING_PAGE_NAME']
 		);
 
-		// Publish and view the Page on the frontend site.
-		$url = $I->publishAndViewGutenbergPage($I);
+		// Publish the Page.
+		$url = $I->publishGutenbergPage($I);
 
 		// Log out, as WP Rocket won't cache or minify for logged in WordPress Users.
 		$I->logOut();
@@ -515,8 +515,8 @@ public function testAddNewPageUsingDefinedLandingPageWithRocketLazyLoadPlugin(En
 			landingPage: $_ENV['CONVERTKIT_API_LANDING_PAGE_NAME']
 		);
 
-		// Publish and view the Page on the frontend site.
-		$url = $I->publishAndViewGutenbergPage($I);
+		// Publish the Page.
+		$url = $I->publishGutenbergPage($I);
 
 		// Log out.
 		$I->logOut();
@@ -541,6 +541,37 @@ public function testAddNewPageUsingDefinedLandingPageWithRocketLazyLoadPlugin(En
 		$I->deactivateThirdPartyPlugin($I, 'rocket-lazy-load');
 	}
 
+	/**
+	 * Test that no Landing Page option is displayed in the Plugin Settings when
+	 * creating and viewing a new WordPress Post, and that no attempt to check
+	 * for a Landing Page is made when viewing a Post.
+	 *
+	 * @since   3.3.0
+	 *
+	 * @param   EndToEndTester $I  Tester.
+	 */
+	public function testAddNewPostDoesNotDisplayLandingPageOption(EndToEndTester $I)
+	{
+		// Add a Post using the Gutenberg editor.
+		$I->addGutenbergPage(
+			$I,
+			title: 'Kit: Post: Landing Page',
+			postType: 'post'
+		);
+
+		// Open the Plugin sidebar settings.
+		$I->openPluginSidebarSettings($I);
+
+		// Confirm no Landing Page option is displayed.
+		$I->waitForElementNotVisible('//label[text()="Landing Page"]/following::select[1]');
+
+		// Close the Plugin sidebar settings.
+		$I->closePluginSidebarSettings($I);
+
+		// Publish Page, so no browser warnings are displayed about unsaved changes.
+		$I->publishGutenbergPage($I);
+	}
+
 	/**
 	 * Deactivate and reset Plugin(s) after each test, if the test passes.
 	 * We don't use _after, as this would provide a screenshot of the Plugin