Gitenberg: exploring cf7-blocks plugin

[bangank36]

Summary

• As part of the gitenberg implementation, I looked into the cf7-blocks plugin, a Wordpress plugin that bring Gutenberg editor into Contact Form 7
• Some points worth mentioning
  • The default settings for the Editor could be extracted
  • Cf7-blocks brought some custom block in block-library dir, worth looking

Dev notes

• To start development on frontend
  1. Create new site in WP Local
  2. Install Cf7 plugin
  3. Fork the cf7-blocks (no) Install cf7-blocks in app/wp-content/plugins (nit: add new form on first try)
  4. Run npm install --legacy-peer-deps
  5. Run npm run start and start tweaking

Reference

#17

[bangank36]

Update

• How the Iso instance settings is registered
  • Looking at the core/core.php file
  • The editor settings is enqueued as global variable cf7BlockEditorSettings
• How the new blocks is registered
  • Custom blocks js files are loaded in
• Cf7 blocks has more elegant design compare to the origin iso block editor

Origin	Cf7

[bangank36]

25 May 2023

• Option to enable inserter in sidebar

iso: {
						moreMenu: {
							topToolbar: true
						},
						sidebar: {inserter: false, inspector: true},
						toolbar: {navigation: true, inspector: true}
					}

[bangank36]

27 May 2023

• How the new block is registered
  1. Define name in block.json and use registerBlockType for register new block
  2. nit: in the supports prop we can tweak the controls , more samples on blocks-everywhere
  3. Add new blocks into iso config, allowedBlocks