The method
Use these prompts in ChatGPT/Gemini/Claude to generate code snippets or design ideas for custom Gutenberg blocks. Provide context about the block’s purpose and desired functionality. Refine results iteratively by feeding back AI suggestions. Perfect for developers building unique WP features.
The prompts
Prompt 1
I want to create a Gutenberg block that displays a dynamic product review slider. The block should fetch reviews from a WooCommerce product based on its ID. The slider should include the reviewer's name, rating (out of 5 stars), and review text. Provide the necessary PHP, JavaScript, and CSS code for this block, including error handling for cases where no reviews are available. Make sure the block is easily customizable via the Gutenberg editor.
Prompt 2
Design a Gutenberg block for showcasing team members. The block should include a circular image of the team member, their name, title, and a short bio. Offer various styling options, such as the ability to change the background color, text alignment, and image size. Provide suggestions for making the block responsive and visually appealing on different screen sizes. Generate the required ReactJS code for the block's front-end display, ensuring compatibility with the latest Gutenberg editor version.
Prompt 3
Generate a Gutenberg block that allows users to embed interactive charts using Chart.js. The block should accept data in a JSON format and allow users to select the chart type (e.g., bar chart, line chart, pie chart). Include options for customizing chart labels, colors, and tooltips. Provide a complete example of how to implement this block, including the necessary JavaScript code to integrate Chart.js and the PHP code for registering the block in WordPress. Focus on simplicity and ease of use for non-technical users.
Prompt 4
I want to create a Gutenberg block for showcasing a pricing table. The block should include a title, description, pricing, features, and a call-to-action button. Offer various styling options, such as the ability to change the background color, text alignment, and button color. The pricing table should display up to 3 pricing plans and should be responsive on different screen sizes. Generate the required ReactJS code for the block's front-end display, and the PHP code for block registration.