Custom Gutenberg block with color picker.
Create a Gutenberg block within a custom plugin
The block must:
- Have an editable text field within the editor
- Include an option in the panel for modifying a CSS property of the block (such as background color or width)
- Cause React to re-render the block when an option is changed from the sidebar
- Display in the published page/post as it was configured in Gutenberg
Additional information:
- The use of Webpack for compiling the block is encouraged, but not required.
- The plugin should be pushed to a Github repository so that we may review and test it.
- This will then be used for discussion as part of the interview.
- WordPress with Gutenberg editor active
- Download or clone
- Unzip
- Add to WordPress plugins folder
- Activate
- Navigate to any post edit screen
- Add the new Block "UGroup Custom Block", from "Common" group
- Install as described above within a local development environment
cd
to plugin folder- Install Dependencies:
npm install
- For Development:
npm run dev
- Final Build:
npm run build
- Edit .js and .scss files in /src/ folder
- Production files will be compiled in /dist/