Topic: AI prompts for GenerateBlocks 2.x

TWarrior
May 13, 2026 at 4:40 am

Hi,

I’m using GeneratePress + GenerateBlocks 2.x and I’m trying to create a reliable AI prompt to generate GenerateBlocks code from a design image, text, or layout idea…

The goal is to get code that can be pasted directly into the WordPress Gutenberg Code Editor, using current GenerateBlocks v2.x blocks.

This is the draft prompt I’m working with:

Act as an expert in WordPress, Gutenberg, and GenerateBlocks v2.x.

I will provide you with an image, text, or idea. Return GenerateBlocks v2.x block code that can be copied directly into the Gutenberg Code Editor.

Mandatory rules:

1. Use only current GenerateBlocks v2.x blocks:
– generateblocks/element
– generateblocks/text
– generateblocks/shape
– generateblocks/media, only if needed

2. Do not use legacy or old blocks:
– generateblocks/container
– generateblocks/grid
– generateblocks/headline
– generateblocks/button
– generateblocks/image

3. The code must use valid WordPress block comments:
<!– wp:generateblocks/element {…} –>
…
<!– /wp:generateblocks/element –>

4. Each block must have a unique, stable, short, and readable uniqueId.

5. Each block must include:
– uniqueId
– tagName when applicable
– className
– styles
– css

6. For generateblocks/element, always use className with this structure:
“gb-element-ID gb-element”

7. For generateblocks/text, always use className with this structure:
“gb-text-ID gb-text”

8. For generateblocks/shape, always use className with this structure:
“gb-shape-ID gb-shape”

9. htmlAttributes must always be a JSON object, never an array.

10. Use semantic HTML tags:
– section for main sections
– div for internal groups
– p for paragraphs
– h2, h3, etc. for headings
– a for links

11. For icons, use generateblocks/shape with inline SVG and currentColor.

12. Include styles and css inside each block. Do not use external CSS, JavaScript, or <style> tags.

13. CSS should be responsive when needed, using:
– @media (max-width:1024px)
– @media (max-width:767px)

14. Do not use extra HTML comments. Only WordPress block comments.

15. The result must be complete, properly nested, and correctly closed.

16. The code must not trigger “This block contains unexpected or invalid content” or block recovery in Gutenberg.

17. Return only the final code inside an html code block, without explanations.

Now create the block from this:

[paste image, text, or idea here]

My main questions are:

1. Is it correct to require a manual className structure such as:

* gb-element-ID gb-element
* gb-text-ID gb-text
* gb-shape-ID gb-shape

2. Is it recommended to always include both styles and css inside each block, or does GenerateBlocks expect a different structure in some cases?

3. Are there any specific rules for generating valid uniqueId values and avoiding Gutenberg marking the block as invalid?

4. Is there anything important missing from this prompt to keep the generated code aligned with GenerateBlocks 2.x standards?

I’m not looking for a long explanation, just any basic correction, guideline, or reference example that would help make this prompt safer and more accurate.

Thanks.
Ying
May 13, 2026 at 12:26 pm

Hi there,

I don’t think it will work, but feel free to try.

1. Yes. But when there are no styles added to the block, the block does not have a unique class, it just has the general class like gb-element.

2. GB generates CSS in a CSS file or inline CSS, depending on your setting at generateblocks > settings.

3. I’m not sure. Make sure they are all unique.

4. To be honest, I don’t know. This is not my expertise, unfortunately.

TWarrior

May 14, 2026 at 6:32 am

Thanks for reply.

I’ve made a few minor tweaks and run just one test, and I think the result seems brilliant

I’ll leave the prompt and the result here, in case anyone’s interested.

If it’s not too much inconvenience, could you please take a look at the generated code to see if you spot any errors or anything that doesn’t comply with Generateblocks’ standards?

PROMPT:

Act as an expert in WordPress, Gutenberg, and GenerateBlocks v2.x.
I will provide you with an image, text, or idea. Return GenerateBlocks v2.x block code that can be copied directly into the Gutenberg Code Editor.
Main objective:
Create a clean, valid, editable GenerateBlocks v2.x structure. Prioritize structure over final visual styling. Visual details will be adjusted manually later in the editor.
CONTINUE IN https://pastebin.com/2qPBiCDi

CASE 1:

FROM THIS SCREEN CAPTURE:
https://i.imgur.com/G3DhEmj.png

THE IA (CHATGPT 5.5 THINKINK) CREATE THIS:
https://i.imgur.com/6SgQCIo.png
(It is also responsive)

<!-- wp:generateblocks/element {"uniqueId":"7f3a9c2e","tagName":"section","styles":{"paddingTop":"4rem","paddingBottom":"4rem","paddingLeft":"1rem","paddingRight":"1rem"},"css":".gb-element-7f3a9c2e{padding-top:4rem;padding-bottom:4rem;padding-left:1rem;padding-right:1rem}"} -->
<section class="gb-element gb-element-7f3a9c2e">
	<!-- wp:generateblocks/element {"uniqueId":"c91e4a6b","tagName":"div","styles":{"maxWidth":"1360px","marginLeft":"auto","marginRight":"auto"},"css":".gb-element-c91e4a6b{max-width:1360px;margin-left:auto;margin-right:auto}"} -->
	<div class="gb-element gb-element-c91e4a6b">
		<!-- wp:generateblocks/element {"uniqueId":"a8d0f237","tagName":"div","styles":{"textAlign":"center","marginBottom":"5rem"},"css":".gb-element-a8d0f237{text-align:center;margin-bottom:5rem}"} -->
		<div class="gb-element gb-element-a8d0f237">
			<!-- wp:generateblocks/text {"uniqueId":"e4b7a1c9","tagName":"h2","styles":{"fontSize":"clamp(2rem, 4vw, 3rem)","fontWeight":"700","lineHeight":"1.15","marginBottom":"1.25rem"},"css":".gb-text-e4b7a1c9{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;line-height:1.15;margin-bottom:1.25rem}"} -->
			<h2 class="gb-text gb-text-e4b7a1c9">Testimonials Style 3</h2>
			<!-- /wp:generateblocks/text -->

			<!-- wp:generateblocks/text {"uniqueId":"0c6f92d1","tagName":"p","styles":{"fontSize":"1.25rem","lineHeight":"1.7","maxWidth":"780px","marginLeft":"auto","marginRight":"auto"},"css":".gb-text-0c6f92d1{font-size:1.25rem;line-height:1.7;max-width:780px;margin-left:auto;margin-right:auto}"} -->
			<p class="gb-text gb-text-0c6f92d1">Habitant mollis ut non velit hendrerit litora bibendum rhoncus eros montes torquent pellentesque aliquet inceptos nisi magnis at molestie euismod</p>
			<!-- /wp:generateblocks/text -->
		</div>
		<!-- /wp:generateblocks/element -->

		<!-- wp:generateblocks/element {"uniqueId":"b35c8e0a","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(3, 1fr)","gap":"1.5rem"},"css":".gb-element-b35c8e0a{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem}@media (max-width:1024px){.gb-element-b35c8e0a{grid-template-columns:repeat(2, 1fr)}}@media (max-width:767px){.gb-element-b35c8e0a{grid-template-columns:1fr}}"} -->
		<div class="gb-element gb-element-b35c8e0a">
			<!-- wp:generateblocks/element {"uniqueId":"4a19d7e3","tagName":"div","styles":{"position":"relative","paddingTop":"4rem","paddingRight":"2.25rem","paddingBottom":"2rem","paddingLeft":"2.25rem","borderWidth":"1px","borderStyle":"solid","borderColor":"#6f5cff","borderRadius":"6px"},"css":".gb-element-4a19d7e3{position:relative;padding-top:4rem;padding-right:2.25rem;padding-bottom:2rem;padding-left:2.25rem;border-width:1px;border-style:solid;border-color:#6f5cff;border-radius:6px}"} -->
			<div class="gb-element gb-element-4a19d7e3">
				<!-- wp:generateblocks/media {"uniqueId":"62f0b9a4","mediaType":"image","htmlAttributes":{"src":"https://i.pravatar.cc/160?img=47","alt":"Emily","loading":"lazy","width":"120","height":"120"},"styles":{"position":"absolute","top":"-3.75rem","right":"2.25rem","width":"7.5rem","height":"7.5rem","borderRadius":"50%","objectFit":"cover"},"css":".gb-media-62f0b9a4{position:absolute;top:-3.75rem;right:2.25rem;width:7.5rem;height:7.5rem;border-radius:50%;object-fit:cover}"} -->
				<img class="gb-media gb-media-62f0b9a4" src="https://i.pravatar.cc/160?img=47" alt="Emily" loading="lazy" width="120" height="120" />
				<!-- /wp:generateblocks/media -->

				<!-- wp:generateblocks/text {"uniqueId":"d8c3e1f6","tagName":"h3","styles":{"fontSize":"1.5rem","fontWeight":"700","lineHeight":"1.2","marginBottom":"0.25rem"},"css":".gb-text-d8c3e1f6{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:0.25rem}"} -->
				<h3 class="gb-text gb-text-d8c3e1f6">Emily</h3>
				<!-- /wp:generateblocks/text -->

				<!-- wp:generateblocks/text {"uniqueId":"1e9b5c0a","tagName":"p","styles":{"fontSize":"1.125rem","lineHeight":"1.4","marginBottom":"2rem"},"css":".gb-text-1e9b5c0a{font-size:1.125rem;line-height:1.4;margin-bottom:2rem}"} -->
				<p class="gb-text gb-text-1e9b5c0a">Designer</p>
				<!-- /wp:generateblocks/text -->

				<!-- wp:generateblocks/text {"uniqueId":"f47a2d8b","tagName":"p","styles":{"fontSize":"1.125rem","lineHeight":"1.8","marginBottom":"0"},"css":".gb-text-f47a2d8b{font-size:1.125rem;line-height:1.8;margin-bottom:0}"} -->
				<p class="gb-text gb-text-f47a2d8b">Tristique et netus gravida sodales ad hac mattis tellus lectus tempus per maximus lacinia massa dignissim class fames conubia eros</p>
				<!-- /wp:generateblocks/text -->
			</div>
			<!-- /wp:generateblocks/element -->

			<!-- wp:generateblocks/element {"uniqueId":"9b6e0a3c","tagName":"div","styles":{"position":"relative","paddingTop":"4rem","paddingRight":"2.25rem","paddingBottom":"2rem","paddingLeft":"2.25rem","borderWidth":"1px","borderStyle":"solid","borderColor":"#6f5cff","borderRadius":"6px"},"css":".gb-element-9b6e0a3c{position:relative;padding-top:4rem;padding-right:2.25rem;padding-bottom:2rem;padding-left:2.25rem;border-width:1px;border-style:solid;border-color:#6f5cff;border-radius:6px}"} -->
			<div class="gb-element gb-element-9b6e0a3c">
				<!-- wp:generateblocks/media {"uniqueId":"0d1a5f8e","mediaType":"image","htmlAttributes":{"src":"https://i.pravatar.cc/160?img=47","alt":"Emily","loading":"lazy","width":"120","height":"120"},"styles":{"position":"absolute","top":"-3.75rem","right":"2.25rem","width":"7.5rem","height":"7.5rem","borderRadius":"50%","objectFit":"cover"},"css":".gb-media-0d1a5f8e{position:absolute;top:-3.75rem;right:2.25rem;width:7.5rem;height:7.5rem;border-radius:50%;object-fit:cover}"} -->
				<img class="gb-media gb-media-0d1a5f8e" src="https://i.pravatar.cc/160?img=47" alt="Emily" loading="lazy" width="120" height="120" />
				<!-- /wp:generateblocks/media -->

				<!-- wp:generateblocks/text {"uniqueId":"c2f9e7d0","tagName":"h3","styles":{"fontSize":"1.5rem","fontWeight":"700","lineHeight":"1.2","marginBottom":"0.25rem"},"css":".gb-text-c2f9e7d0{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:0.25rem}"} -->
				<h3 class="gb-text gb-text-c2f9e7d0">Emily</h3>
				<!-- /wp:generateblocks/text -->

				<!-- wp:generateblocks/text {"uniqueId":"6a4b8c1d","tagName":"p","styles":{"fontSize":"1.125rem","lineHeight":"1.4","marginBottom":"2rem"},"css":".gb-text-6a4b8c1d{font-size:1.125rem;line-height:1.4;margin-bottom:2rem}"} -->
				<p class="gb-text gb-text-6a4b8c1d">Designer</p>
				<!-- /wp:generateblocks/text -->

				<!-- wp:generateblocks/text {"uniqueId":"b7e3d9a2","tagName":"p","styles":{"fontSize":"1.125rem","lineHeight":"1.8","marginBottom":"0"},"css":".gb-text-b7e3d9a2{font-size:1.125rem;line-height:1.8;margin-bottom:0}"} -->
				<p class="gb-text gb-text-b7e3d9a2">Tristique et netus gravida sodales ad hac mattis tellus lectus tempus per maximus lacinia massa dignissim class fames conubia eros</p>
				<!-- /wp:generateblocks/text -->
			</div>
			<!-- /wp:generateblocks/element -->

			<!-- wp:generateblocks/element {"uniqueId":"5d0c7a8e","tagName":"div","styles":{"position":"relative","paddingTop":"4rem","paddingRight":"2.25rem","paddingBottom":"2rem","paddingLeft":"2.25rem","borderWidth":"1px","borderStyle":"solid","borderColor":"#6f5cff","borderRadius":"6px"},"css":".gb-element-5d0c7a8e{position:relative;padding-top:4rem;padding-right:2.25rem;padding-bottom:2rem;padding-left:2.25rem;border-width:1px;border-style:solid;border-color:#6f5cff;border-radius:6px}"} -->
			<div class="gb-element gb-element-5d0c7a8e">
				<!-- wp:generateblocks/media {"uniqueId":"3f6b1d9c","mediaType":"image","htmlAttributes":{"src":"https://i.pravatar.cc/160?img=47","alt":"Emily","loading":"lazy","width":"120","height":"120"},"styles":{"position":"absolute","top":"-3.75rem","right":"2.25rem","width":"7.5rem","height":"7.5rem","borderRadius":"50%","objectFit":"cover"},"css":".gb-media-3f6b1d9c{position:absolute;top:-3.75rem;right:2.25rem;width:7.5rem;height:7.5rem;border-radius:50%;object-fit:cover}"} -->
				<img class="gb-media gb-media-3f6b1d9c" src="https://i.pravatar.cc/160?img=47" alt="Emily" loading="lazy" width="120" height="120" />
				<!-- /wp:generateblocks/media -->

				<!-- wp:generateblocks/text {"uniqueId":"8c1e4f7a","tagName":"h3","styles":{"fontSize":"1.5rem","fontWeight":"700","lineHeight":"1.2","marginBottom":"0.25rem"},"css":".gb-text-8c1e4f7a{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:0.25rem}"} -->
				<h3 class="gb-text gb-text-8c1e4f7a">Emily</h3>
				<!-- /wp:generateblocks/text -->

				<!-- wp:generateblocks/text {"uniqueId":"2a9d0e5b","tagName":"p","styles":{"fontSize":"1.125rem","lineHeight":"1.4","marginBottom":"2rem"},"css":".gb-text-2a9d0e5b{font-size:1.125rem;line-height:1.4;margin-bottom:2rem}"} -->
				<p class="gb-text gb-text-2a9d0e5b">Designer</p>
				<!-- /wp:generateblocks/text -->

				<!-- wp:generateblocks/text {"uniqueId":"e6f8a0c3","tagName":"p","styles":{"fontSize":"1.125rem","lineHeight":"1.8","marginBottom":"0"},"css":".gb-text-e6f8a0c3{font-size:1.125rem;line-height:1.8;margin-bottom:0}"} -->
				<p class="gb-text gb-text-e6f8a0c3">Tristique et netus gravida sodales ad hac mattis tellus lectus tempus per maximus lacinia massa dignissim class fames conubia eros</p>
				<!-- /wp:generateblocks/text -->
			</div>
			<!-- /wp:generateblocks/element -->
		</div>
		<!-- /wp:generateblocks/element -->
	</div>
	<!-- /wp:generateblocks/element -->
</section>
<!-- /wp:generateblocks/element -->

George
May 14, 2026 at 6:44 am
Hello,

Media blocks have a few issues:
- mediaType isn’t a real GB v2 attribute — remove it
- tagName is missing — should be "tagName":"img"
- mediaId is missing — GB expects an integer here (e.g. "mediaId":0 if you don’t have a real ID yet)
className on elements — real GB v2 only outputs the unique class on the element (e.g. class="gb-element-7f3a9c2e"). The generated code adds gb-element as a second class alongside it, which GB doesn’t actually do. This is cosmetic and unlikely to break anything, but worth adding a rule to your prompt to prevent it.

Everything else looks good — the nesting, the styles/css pairing, the uniqueIds, and the responsive grid are all correct. With those media block fixes and a small prompt tweak on className output, you’d be in good shape.

Another thing you could try since you are going down this route is to feed the AI with some block code from a starter site, eg, the homepage, and some hero elements, etc and ask him to correct your code!
TWarrior
May 14, 2026 at 12:11 pm

I’m really grateful for your input.

The idea of feeding it with one or two starter sites is going to be crucial.

I can’t wait to try it out and get a the version “2.0.”
George
May 15, 2026 at 2:05 am

Great, no problem!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.