Contact Form Block: Displays expected success message when used in FSE template, FSE template part, or widget block

[danielbachhuber]

Refactors Contact Form Block generation and processing so that the expected success message displays when the block is used in a FSE template, FSE template part, or block widget.

See Automattic/wp-calypso#60774
See Automattic/wp-calypso#62431

Proposed changes

The refactor follows a pattern similar to how the Contact Form Widget special-case is handled.

For block templates:

1. $_wp_current_template_content is filtered on template_include to add a block_template=canvas attribute to all contact form blocks in the block template.
2. The Grunion_Contact_Form class interprets the block_template attribute accordingly when present.
3. The ::process_form_submission() method properly interprets contact-form-id=canvas. It has to hackily reproduce part of wp-includes/template-loader.php in order to hydrate $_wp_current_template_content(because $_wp_current_template_content needs to be rendered in order to populate Grunion_Contact_Form::$last.

For block template parts:

1. The $GLOBALS['grunion_block_template_part_id'] global variable is set when the wp:core/template-part block is rendered.
2. If the $GLOBALS['grunion_block_template_part_id'] is set when the contact form block is rendered, a block_template_part=<part-id> attribute is added to the block attributes.
3. The Grunion_Contact_Form class interprets the block_template_part attribute accordingly when present.
4. The ::process_form_submission() method properly interprets contact-form-id=block-template-part-<part-id>.

For block widgets:

1. widget_block_content is filtered to apply widget=<widget-id> as an attribute to each block within the block widget.
2. The rest of the existing logic for widgets is reused.

Does this pull request change what data or activity we track or use?

No.

Testing instructions

To test the block template integration:

1. Activate a FSE theme (Twenty Twenty-Two is a good one).
2. Add a Contact Form Block to the Single Template.
3. Change "On Submission" to "Show a custom text message". Write a custom text message.
4. Navigate to an individual blog post.
5. Submit the Contact Form Block.
6. Observe your custom success message in the Contact Form Block.
7. Return to Full Site Editor and change your Contact Form Block to use "Show a summary of submitted fields".
8. Navigate to an individual blog post.
9. Submit the Contact Form Block.
10. Observe your submitted fields in the Contact Form block.

To test the block template part integration:

1. Activate a FSE theme (Twenty Twenty-Two is a good one).
2. Add a Contact Form Block to the Footer template part.
3. Change "On Submission" to "Show a custom text message". Write a custom text message.
4. Navigate to the footer on the frontend.
5. Submit the Contact Form Block.
6. Observe your custom success message in the Contact Form Block.
7. Return to Full Site Editor and change your Contact Form Block to use "Show a summary of submitted fields".
8. Navigate to the footer on the frontend.
9. Submit the Contact Form Block.
10. Observe your submitted fields in the Contact Form block.

To test the widget block integration:

1. Activate a legacy theme (Twenty Twenty is a good one).
2. Add a Contact Form Block to a block editor-enabled sidebar.
3. Change "On Submission" to "Show a custom text message". Write a custom text message.
4. Navigate to the sidebar on the frontend.
5. Submit the Contact Form Block.
6. Observe your custom success message in the Contact Form Block.
7. Return to widgets in the backend and change your Contact Form Block to use "Show a summary of submitted fields".
8. Navigate to the sidebar on the frontend.
9. Submit the Contact Form Block.
10. Observe your submitted fields in the Contact Form block.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello danielbachhuber! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D82492-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: July 5, 2022.
• Scheduled code freeze: June 28, 2022.

[wojtekn]

@danielbachhuber I tested it on my sandbox after synchronizing the grunion-contact-form.php file from the Jetpack repository to my sandbox. I couldn’t make it work and was still reproducing the bug. In my case, contact-form-id is set to an integer each time. I found out that render_block_core_template_part_post is never triggered. I was adding a form as a block to one of the widget areas. I was using the Blask theme.

Then I reread the testing instructions and realized I should use FSE to place the form in the footer. I changed the theme to Twenty Twenty Two and used FSE to add a form as a block into the home page footer, and I still couldn’t make it work. It seems that grunion_contact_form_set_block_template_part_id_global is still not executed.

Any idea what I’m doing wrong here? I understand how you approach that. However, I still miss some context on how to run this particular use case.

[sejas]

@wojtekn @danielbachhuber here is the diff related to this PR: D82492-code , I've also tested it using the sandbox, and I can confirm that the issue is still there for simple sites.

I think #62431 is a dup of #60774, we should close one of them.

[sejas]

I've tested it on an external jetpack site, and it works for template parts such as the header and footer. But it doesn't work in templates like single or home.

Maybe the issues are very similar but not the same after all.

Screenshot of templates vs template parts.

[danielbachhuber]

@wojtekn @sejas Thanks for your testing! I addressed FSE templates with e694eb3 and block widgets with 4566a76

Still need to test the wpcom diff. I'll re-flag for review after I've done so.

[danielbachhuber]

@wojtekn @sejas Fortunately, a simple solution for dotcom (and Gutenberg plugin) compatibility: d247dda

😅

[sejas]

@danielbachhuber The PR looks great.
I've tested it and it's working in every case: on simple sites, atomic sites, jetpack sites with the form inside the templates and also in template parts.

Great work!!

I've added a suggestion about showing a different title on the Form Responses page.

[sejas]

It would be great if we can modify the saved title to keep the context.

The user cannot track from which page was sent the message.

Before the fix, the title was: Site Title] Hello World!.
After applying the fix it says: [Site Title] Block Template or [Site Title] Block Template Part

Responses page:
/wp-admin/edit.php?post_type=feedback

[danielbachhuber]

It would be great if we can modify the saved title to keep the context.

That would be a great improvement 😄

Unfortunately, I don't know of a good way to identify a name for the context (aside from inventing our own system). Do you know of any ways? Alternatively, maybe there's a more generic title we could use?

[wojtekn]

Before our changes, when there was no separate handling for block_template and block_template_part, we were using $postcontext in such a case - it was caught by the last elseif condition.

What if we remove $default_subject from all those conditions and then use this below?

		if ( $post ) {
			// translators: the blog name and post title.
			$default_subject = sprintf( _x( '%1$s %2$s', '%1$s = blog name, %2$s = post title', 'jetpack' ), $default_subject, Grunion_Contact_Form_Plugin::strip_tags( $post->post_title ) );
		}

[danielbachhuber]

What if we remove $default_subject from all those conditions and then use this below?

While we'd have a blog post title, it may or may not be accurate:

• On the homepage, $post would be the last post in the main query, unless...
• Anywhere there's a WP_Query immediately before the contact form, $post would be the last post in that query.

[wojtekn]

@danielbachhuber isn't it how it worked before the change? I've roughly tested that case and it was not using the last post, but the homepage's main $post.

[danielbachhuber]

isn't it how it worked before the change? I've roughly tested that case and it was not using the last post, but the homepage's main $post.

@wojtekn Oh, fair enough. I've restored the prior (somewhat inaccurate) behavior for all contexts with 888a8ad. Here's what it looks like:

[wojtekn]

@danielbachhuber it looks solid and works well for me in all cases now.

[sdixon194]

Did some extensive testing on this one and everything worked well! Noting that this fixes #24519

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D82492-code, and deploy it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[sejas]

r247680-wpcom

[jeherve]

Nice work! I was hoping this would also fix #22749 so we wouldn't need something like #24701, but I still see the problem on trunk right now. Do you think you could take a look at it?

Thanks!

[danielbachhuber]

@jeherve I've assigned myself #22749 to take a look.