CF7 Gutenberg Block

Last Updated on April 5, 2022 by Neil Murray

CF7 Gutenberg Block

See https://github.com/takayukister/contact-form-7/pull/156 .. Detailed feedback on that is my top priority.

Sastra
I see Takayuki still make basic configuration and script for the block editor.
Should we contribute or just see what’s happening to it?

Neil
We should not contribute code to Contact Form 7 at this stage. Taka rejects 90% of pull requests. He has very specific ideas on what he wants in CF7 & assume he will be the same with CF7 Block Editor work.
Rather I want you to examine his code in detail & tell me what we can learn from it – both good & bad.

Chat 2020-10-06

Sastra Manurung
I’ve checked.
There is nothing new to CF7 block.
The different is it displays the title only. Should we apply the same?

Neil Murray
No – we don’t want to change what we set out do.
But we may want to change how we do it. My interest is HOW Taka has coded this.
I’m looking for you to give a detailed discussion on Taka’s code & build process.
Please spend enough time this week so that you can do that in next week’s meeting.

Sastra Manurung
He splits block parameters/functions into each file and not using class component at this stage. I’ll take a deep look for the changes he made.

Neil Murray
Don’t forget his build process – I’m hoping we can also learn from that.
Also interested in how he is testing that it works – if he does that.

CF7 Block Summary – Sastra

Development

  • Uses wp-scripts with webpack watch for working with WordPress environment.
  • Changed files compiled directly to build directory, and the changes are applied after hard reloading the page.
  • Refer npm start at package.json.

Production

  • Uses wp-scripts with webpack to generate minified build file and its .map file.
  • Refer npm start at package.json.

Libraries

  • Only uses ‘@wordpress/scripts’ package.
  • Uses ‘@wordpress/api-fetch’ for fetching data.
  • Uses ‘@wordpress/i18n’ for translation.

Styling

  • Does not use CSS currently.
  • Create its own block icon component.