Skip to content

Commit

Permalink
Merge pull request #724 from ConvertKit/form-position-element-headings
Browse files Browse the repository at this point in the history 
Support for Headings in `After Element` Form Positioning
  • Loading branch information
@n7studios
n7studios authored Oct 17, 2024
2 parents a9cb842 + 8faa867 commit d60a60f
Show file tree
Hide file tree
Showing 6 changed files with 274 additions and 107 deletions.
7 changes: 6 additions & 1 deletion admin/section/class-convertkit-settings-general.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,12 @@ 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' ),
'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' ),
),
esc_html__( 'The number of elements before outputting the form.', 'convertkit' ),
array( 'after_element' )
Expand Down
12 changes: 11 additions & 1 deletion tests/_support/Helper/Acceptance/ConvertKitForms.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,17 @@ public function seeFormOutput($I, $formID, $position = false, $element = false,
break;

case 'after_element':
$I->seeInSource('<' . $element . '>Item #' . $element_index . '</' . $element . '><form action="https://app.convertkit.com/forms/' . $formID . '/subscriptions" ');
// The block editor automatically adds CSS classes to some elements.
switch ( $element ) {
case 'p':
$I->seeInSource('<' . $element . '>Item #' . $element_index . '</' . $element . '><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" ');
break;
}
break;
}
}
Expand Down
116 changes: 116 additions & 0 deletions tests/_support/Helper/Acceptance/WPGutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,4 +368,120 @@ function($I) {
// Return URL from 'View page' button.
return $I->grabAttributeFrom('.post-publish-panel__postpublish-buttons a.components-button', 'href');
}

/**
* Add a Page, Post or Custom Post Type directly to the WordPress database,
* with dummy content used for testing.
*
* @since 2.6.2
*
* @param AcceptanceTester $I Acceptance Tester.
* @param string $postType Post Type.
* @param string $title Post Title.
* @param string $formID Meta Box `Form` value (-1: Default).
*/
public function addGutenbergPageToDatabase($I, $postType = 'page', $title = 'Gutenberg Title', $formID = '-1')
{
return $I->havePostInDatabase(
[
'post_title' => $title,
'post_type' => $postType,
'post_status' => 'publish',
'meta_input' => [
'_wp_convertkit_post_meta' => [
'form' => $formID,
'landing_page' => '',
'tag' => '',
],
],
'post_content' => '<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Item #1</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Item #1</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Item #2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- 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>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Item #2</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Item #3</p>
<!-- /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>
<!-- /wp:image -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Item #1</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Item #4</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Item #1</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Item #5</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Item #1</h5>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Item #6</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":6} -->
<h6 class="wp-block-heading">Item #1</h6>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Item #7</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Item #2</h3>
<!-- /wp:heading -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Item #2</h4>
<!-- /wp:heading -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Item #2</h5>
<!-- /wp:heading -->
<!-- wp:heading {"level":6} -->
<h6 class="wp-block-heading">Item #2</h6>
<!-- /wp:heading -->',
]
);
}
}
82 changes: 47 additions & 35 deletions tests/acceptance/forms/post-types/CPTFormCest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ public function testAddNewCPTUsingDefaultFormBeforeAndAfterContent(AcceptanceTes
*
* @param AcceptanceTester $I Tester.
*/
public function testAddNewCPTUsingDefaultFormAfterElement(AcceptanceTester $I)
public function testAddNewCPTUsingDefaultFormAfterParagraphElement(AcceptanceTester $I)
{
// Setup ConvertKit plugin with Default Form for CPTs set to be output after the 3rd paragraph of content.
$I->setupConvertKitPlugin(
Expand All @@ -303,30 +303,53 @@ public function testAddNewCPTUsingDefaultFormAfterElement(AcceptanceTester $I)
);
$I->setupConvertKitPluginResources($I);

// Add a CPT using the Gutenberg editor.
$I->addGutenbergPage($I, 'article', 'Kit: CPT: Form: Default: After 3rd Paragraph Element');
// Setup Article with placeholder content.
$pageID = $I->addGutenbergPageToDatabase($I, 'article', 'Kit: CPT: Form: Default: After 3rd Paragraph Element');

// Add 5 paragraphs to CPT.
$I->addGutenbergParagraphBlock($I, 'Item #1');
$I->addGutenbergParagraphBlock($I, 'Item #2');
$I->addGutenbergParagraphBlock($I, 'Item #3');
$I->addGutenbergParagraphBlock($I, 'Item #4');
$I->addGutenbergParagraphBlock($I, 'Item #5');
// View the CPT on the frontend site.
$I->amOnPage('?p=' . $pageID);

// Configure metabox's Form setting = Default.
$I->configureMetaboxSettings(
// Check that no PHP warnings or notices were output.
$I->checkNoWarningsAndNoticesOnScreen($I);

// Confirm that one ConvertKit Form is output in the DOM after the third paragraph.
$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'p', 3);
}

/**
* 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 <h2> element.
*
* @since 2.6.2
*
* @param AcceptanceTester $I Tester.
*/
public function testAddNewCPTUsingDefaultFormAfterHeadingElement(AcceptanceTester $I)
{
// Setup ConvertKit plugin with Default Form for CPTs set to be output after the 2nd <h2> of content.
$I->setupConvertKitPlugin(
$I,
'wp-convertkit-meta-box',
[
'form' => [ 'select2', 'Default' ],
'article_form' => $_ENV['CONVERTKIT_API_FORM_ID'],
'article_form_position' => 'after_element',
'article_form_position_element' => 'h2',
'article_form_position_element_index' => 2,
]
);
$I->setupConvertKitPluginResources($I);

// Publish and view the CPT on the frontend site.
$I->publishAndViewGutenbergPage($I);
// Setup Article with placeholder content.
$pageID = $I->addGutenbergPageToDatabase($I, 'article', 'Kit: CPT: Form: Default: After 2nd H2 Element');

// Confirm that one ConvertKit Form is output in the DOM after the third paragraph.
$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'p', 3);
// 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 <h2> element.
$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'h2', 2);
}

/**
Expand All @@ -347,30 +370,19 @@ public function testAddNewCPTUsingDefaultFormAfterOutOfBoundsElement(AcceptanceT
'article_form' => $_ENV['CONVERTKIT_API_FORM_ID'],
'article_form_position' => 'after_element',
'article_form_position_element' => 'p',
'article_form_position_element_index' => 7,
'article_form_position_element_index' => 9,
]
);
$I->setupConvertKitPluginResources($I);

// Add a CPT using the Gutenberg editor.
$I->addGutenbergPage($I, 'article', 'Kit: CPT: Form: Default: After 7th Paragraph Element');
// Setup Article with placeholder content.
$pageID = $I->addGutenbergPageToDatabase($I, 'article', 'Kit: CPT: Form: Default: After 9th Paragraph Element');

// Add 5 paragraphs to CPT.
$I->addGutenbergParagraphBlock($I, 'Item #1');
$I->addGutenbergParagraphBlock($I, 'Item #2');
$I->addGutenbergParagraphBlock($I, 'Item #3');
// View the CPT on the frontend site.
$I->amOnPage('?p=' . $pageID);

// Configure metabox's Form setting = Default.
$I->configureMetaboxSettings(
$I,
'wp-convertkit-meta-box',
[
'form' => [ 'select2', 'Default' ],
]
);

// Publish and view the CPT on the frontend site.
$I->publishAndViewGutenbergPage($I);
// Check that no PHP warnings or notices were output.
$I->checkNoWarningsAndNoticesOnScreen($I);

// Confirm that one ConvertKit Form is output in the DOM after the content, as
// the number of paragraphs is less than the position.
Expand Down
82 changes: 47 additions & 35 deletions tests/acceptance/forms/post-types/PageFormCest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ public function testAddNewPageUsingDefaultFormBeforeAndAfterContent(AcceptanceTe
*
* @param AcceptanceTester $I Tester.
*/
public function testAddNewPageUsingDefaultFormAfterElement(AcceptanceTester $I)
public function testAddNewPageUsingDefaultFormAfterParagraphElement(AcceptanceTester $I)
{
// Setup ConvertKit plugin with Default Form for Pages set to be output after the 3rd paragraph of content.
$I->setupConvertKitPlugin(
Expand All @@ -227,30 +227,53 @@ public function testAddNewPageUsingDefaultFormAfterElement(AcceptanceTester $I)
);
$I->setupConvertKitPluginResources($I);

// Add a Page using the Gutenberg editor.
$I->addGutenbergPage($I, 'page', 'Kit: Page: Form: Default: After 3rd Paragraph Element');
// Setup Page with placeholder content.
$pageID = $I->addGutenbergPageToDatabase($I, 'page', 'Kit: Page: Form: Default: After 3rd Paragraph Element');

// Add 5 paragraphs to Page.
$I->addGutenbergParagraphBlock($I, 'Item #1');
$I->addGutenbergParagraphBlock($I, 'Item #2');
$I->addGutenbergParagraphBlock($I, 'Item #3');
$I->addGutenbergParagraphBlock($I, 'Item #4');
$I->addGutenbergParagraphBlock($I, 'Item #5');
// View the Page on the frontend site.
$I->amOnPage('?p=' . $pageID);

// Configure metabox's Form setting = Default.
$I->configureMetaboxSettings(
// Check that no PHP warnings or notices were output.
$I->checkNoWarningsAndNoticesOnScreen($I);

// Confirm that one ConvertKit Form is output in the DOM after the third paragraph.
$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'p', 3);
}

/**
* 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.
*
* @since 2.6.2
*
* @param AcceptanceTester $I Tester.
*/
public function testAddNewPageUsingDefaultFormAfterHeadingElement(AcceptanceTester $I)
{
// Setup ConvertKit plugin with Default Form for Posts set to be output after the 2nd <h2> of content.
$I->setupConvertKitPlugin(
$I,
'wp-convertkit-meta-box',
[
'form' => [ 'select2', 'Default' ],
'page_form' => $_ENV['CONVERTKIT_API_FORM_ID'],
'page_form_position' => 'after_element',
'page_form_position_element' => 'h2',
'page_form_position_element_index' => 2,
]
);
$I->setupConvertKitPluginResources($I);

// Publish and view the Page on the frontend site.
$I->publishAndViewGutenbergPage($I);
// Setup Page with placeholder content.
$pageID = $I->addGutenbergPageToDatabase($I, 'page', 'Kit: Page: Form: Default: After 2nd H2 Element');

// Confirm that one ConvertKit Form is output in the DOM after the third paragraph.
$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'p', 3);
// 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 <h2> element.
$I->seeFormOutput($I, $_ENV['CONVERTKIT_API_FORM_ID'], 'after_element', 'h2', 2);
}

/**
Expand All @@ -271,30 +294,19 @@ public function testAddNewPageUsingDefaultFormAfterOutOfBoundsElement(Acceptance
'page_form' => $_ENV['CONVERTKIT_API_FORM_ID'],
'page_form_position' => 'after_element',
'page_form_position_element' => 'p',
'page_form_position_element_index' => 7,
'page_form_position_element_index' => 9,
]
);
$I->setupConvertKitPluginResources($I);

// Add a Page using the Gutenberg editor.
$I->addGutenbergPage($I, 'page', 'Kit: Page: Form: Default: After 7th Paragraph Element');
// Setup Page with placeholder content.
$pageID = $I->addGutenbergPageToDatabase($I, 'page', 'Kit: Page: Form: Default: After 9th Paragraph Element');

// Add 5 paragraphs to Page.
$I->addGutenbergParagraphBlock($I, 'Item #1');
$I->addGutenbergParagraphBlock($I, 'Item #2');
$I->addGutenbergParagraphBlock($I, 'Item #3');
// View the Page on the frontend site.
$I->amOnPage('?p=' . $pageID);

// Configure metabox's Form setting = Default.
$I->configureMetaboxSettings(
$I,
'wp-convertkit-meta-box',
[
'form' => [ 'select2', 'Default' ],
]
);

// Publish and view the Page on the frontend site.
$I->publishAndViewGutenbergPage($I);
// Check that no PHP warnings or notices were output.
$I->checkNoWarningsAndNoticesOnScreen($I);

// Confirm that one ConvertKit Form is output in the DOM after the content, as
// the number of paragraphs is less than the position.
Expand Down
Loading

0 comments on commit d60a60f

Please sign in to comment.