Merge pull request #726 from ConvertKit/form-position-element-image

Support for Images in After Element Form Positioning
Kit · Oct 17, 2024 · f796e7b · f796e7b
2 parents d60a60f + 7b674f4
commit f796e7b
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 14 deletions.
diff --git a/admin/section/class-convertkit-settings-general.php b/admin/section/class-convertkit-settings-general.php
@@ -610,12 +610,13 @@ public function default_form_position_element_callback( $args ) {
 			$args['post_type'] . '_form_position_element',
 			esc_attr( $this->settings->get_default_form_position_element( $args['post_type'] ) ),
 			array(
-				'p'  => esc_html__( 'Paragraphs', 'convertkit' ),
-				'h2' => esc_html__( 'Headings <h2>', 'convertkit' ),
-				'h3' => esc_html__( 'Headings <h3>', 'convertkit' ),
-				'h4' => esc_html__( 'Headings <h4>', 'convertkit' ),
-				'h5' => esc_html__( 'Headings <h5>', 'convertkit' ),
-				'h6' => esc_html__( 'Headings <h6>', 'convertkit' ),
+				'p'   => esc_html__( 'Paragraphs', 'convertkit' ),
+				'h2'  => esc_html__( 'Headings <h2>', 'convertkit' ),
+				'h3'  => esc_html__( 'Headings <h3>', 'convertkit' ),
+				'h4'  => esc_html__( 'Headings <h4>', 'convertkit' ),
+				'h5'  => esc_html__( 'Headings <h5>', 'convertkit' ),
+				'h6'  => esc_html__( 'Headings <h6>', 'convertkit' ),
+				'img' => esc_html__( 'Images', 'convertkit' ),
 			),
 			esc_html__( 'The number of elements before outputting the form.', 'convertkit' ),
 			array( 'after_element' )

diff --git a/tests/_support/Helper/Acceptance/ConvertKitForms.php b/tests/_support/Helper/Acceptance/ConvertKitForms.php
@@ -56,6 +56,10 @@ public function seeFormOutput($I, $formID, $position = false, $element = false,
 						$I->seeInSource('<' . $element . '>Item #' . $element_index . '</' . $element . '><form action="https://app.convertkit.com/forms/' . $formID . '/subscriptions" ');
 						break;
 
+					case 'img':
+						$I->seeInSource('<' . $element . ' decoding="async" src="https://placehold.co/600x400" alt="Image #' . $element_index . '"><form action="https://app.convertkit.com/forms/' . $formID . '/subscriptions" ');
+						break;
+
 					// Headings.
 					default:
 						$I->seeInSource('<' . $element . ' class="wp-block-heading">Item #' . $element_index . '</' . $element . '><form action="https://app.convertkit.com/forms/' . $formID . '/subscriptions" ');

diff --git a/tests/_support/Helper/Acceptance/WPGutenberg.php b/tests/_support/Helper/Acceptance/WPGutenberg.php
@@ -411,7 +411,7 @@ public function addGutenbergPageToDatabase($I, $postType = 'page', $title = 'Gut
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:image {"id":4237,"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="http://kit.local/wp-content/uploads/2022/05/iLRneK6yxY4WwQUdkkUMaq-122-683x1024.jpg" alt="Flowers" class="wp-image-4237"/></figure>
+<figure class="wp-block-image size-large"><img src="https://placehold.co/600x400" alt="Image #1" /></figure>
 <!-- /wp:image --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
@@ -425,7 +425,7 @@ public function addGutenbergPageToDatabase($I, $postType = 'page', $title = 'Gut
 <!-- /wp:paragraph -->
 
 <!-- wp:image {"id":4240,"aspectRatio":"1","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="http://kit.local/wp-content/uploads/2022/04/qM63x7vF3qN1whboGdEpuL-122.jpg" alt="MacBook Pro beside plant in vase" class="wp-image-4240" style="aspect-ratio:1;object-fit:cover"/></figure>
+<figure class="wp-block-image size-full"><img src="https://placehold.co/600x400" alt="Image #2" /></figure>
 <!-- /wp:image -->
 
 <!-- wp:columns -->

diff --git a/tests/acceptance/forms/post-types/CPTFormCest.php b/tests/acceptance/forms/post-types/CPTFormCest.php
@@ -352,6 +352,42 @@ public function testAddNewCPTUsingDefaultFormAfterHeadingElement(AcceptanceTeste
 		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'h2', 2);
 	}
 
+	/**
+	 * Test that the Default Form specified in the Plugin Settings works when
+	 * creating and viewing a new WordPress CPT, and its position is set
+	 * to after the 2nd <img> element.
+	 *
+	 * @since   2.6.2
+	 *
+	 * @param   AcceptanceTester $I  Tester.
+	 */
+	public function testAddNewCPTUsingDefaultFormAfterImageElement(AcceptanceTester $I)
+	{
+		// Setup ConvertKit plugin with Default Form for CPTs set to be output after the 2nd <img> of content.
+		$I->setupConvertKitPlugin(
+			$I,
+			[
+				'article_form'                        => $_ENV['CONVERTKIT_API_FORM_ID'],
+				'article_form_position'               => 'after_element',
+				'article_form_position_element'       => 'img',
+				'article_form_position_element_index' => 2,
+			]
+		);
+		$I->setupConvertKitPluginResources($I);
+
+		// Setup Article with placeholder content.
+		$pageID = $I->addGutenbergPageToDatabase($I, 'article', 'Kit: CPT: Form: Default: After 2nd Image Element');
+
+		// View the CPT on the frontend site.
+		$I->amOnPage('?p=' . $pageID);
+
+		// Check that no PHP warnings or notices were output.
+		$I->checkNoWarningsAndNoticesOnScreen($I);
+
+		// Confirm that one ConvertKit Form is output in the DOM after the second <img> element.
+		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'img', 2);
+	}
+
 	/**
 	 * Test that the Default Form specified in the Plugin Settings works when
 	 * creating and viewing a new WordPress CPT, and its position is set

diff --git a/tests/acceptance/forms/post-types/PageFormCest.php b/tests/acceptance/forms/post-types/PageFormCest.php
@@ -243,21 +243,21 @@ public function testAddNewPageUsingDefaultFormAfterParagraphElement(AcceptanceTe
 	/**
 	 * Test that the Default Form specified in the Plugin Settings works when
 	 * creating and viewing a new WordPress Page, and its position is set
-	 * to after the 2nd <h2> element.
+	 * to after the 2nd <img> element.
 	 *
 	 * @since   2.6.2
 	 *
 	 * @param   AcceptanceTester $I  Tester.
 	 */
-	public function testAddNewPageUsingDefaultFormAfterHeadingElement(AcceptanceTester $I)
+	public function testAddNewPageUsingDefaultFormAfterImageElement(AcceptanceTester $I)
 	{
-		// Setup ConvertKit plugin with Default Form for Posts set to be output after the 2nd <h2> of content.
+		// Setup ConvertKit plugin with Default Form for Posts set to be output after the 2nd <img> of content.
 		$I->setupConvertKitPlugin(
 			$I,
 			[
 				'page_form'                        => $_ENV['CONVERTKIT_API_FORM_ID'],
 				'page_form_position'               => 'after_element',
-				'page_form_position_element'       => 'h2',
+				'page_form_position_element'       => 'img',
 				'page_form_position_element_index' => 2,
 			]
 		);
@@ -272,8 +272,8 @@ public function testAddNewPageUsingDefaultFormAfterHeadingElement(AcceptanceTest
 		// Check that no PHP warnings or notices were output.
 		$I->checkNoWarningsAndNoticesOnScreen($I);
 
-		// Confirm that one ConvertKit Form is output in the DOM after the second <h2> element.
-		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'h2', 2);
+		// Confirm that one ConvertKit Form is output in the DOM after the second <img> element.
+		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'img', 2);
 	}
 
 	/**

diff --git a/tests/acceptance/forms/post-types/PostFormCest.php b/tests/acceptance/forms/post-types/PostFormCest.php
@@ -275,6 +275,42 @@ public function testAddNewPostUsingDefaultFormAfterHeadingElement(AcceptanceTest
 		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'h2', 2);
 	}
 
+	/**
+	 * Test that the Default Form specified in the Plugin Settings works when
+	 * creating and viewing a new WordPress Post, and its position is set
+	 * to after the 2nd <img> element.
+	 *
+	 * @since   2.6.2
+	 *
+	 * @param   AcceptanceTester $I  Tester.
+	 */
+	public function testAddNewPostUsingDefaultFormAfterImageElement(AcceptanceTester $I)
+	{
+		// Setup ConvertKit plugin with Default Form for Posts set to be output after the 2nd <img> of content.
+		$I->setupConvertKitPlugin(
+			$I,
+			[
+				'post_form'                        => $_ENV['CONVERTKIT_API_FORM_ID'],
+				'post_form_position'               => 'after_element',
+				'post_form_position_element'       => 'img',
+				'post_form_position_element_index' => 2,
+			]
+		);
+		$I->setupConvertKitPluginResources($I);
+
+		// Setup Post with placeholder content.
+		$pageID = $I->addGutenbergPageToDatabase($I, 'post', 'Kit: Post: Form: Default: After 2nd Image Element');
+
+		// View the Post on the frontend site.
+		$I->amOnPage('?p=' . $pageID);
+
+		// Check that no PHP warnings or notices were output.
+		$I->checkNoWarningsAndNoticesOnScreen($I);
+
+		// Confirm that one ConvertKit Form is output in the DOM after the second <img> element.
+		$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'img', 2);
+	}
+
 	/**
 	 * Test that the Default Form specified in the Plugin Settings works when
 	 * creating and viewing a new WordPress Post, and its position is set