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

https://github.com/bangank36/spriral-learning/issues/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