Your First Layout

Your First Layout

Start with a small static section, check it in the editor, then expand it. The same local-style and verification rules apply to a full page.

Give the assistant a brief

Supply the page's purpose, exact copy, destinations, available images, theme, plugin versions and responsive expectations. Identify the output as a draft/file unless you intend publication. If there is an existing page, specify its URL and the section to change.

The assistant should load the chosen skill, the shared authoring contract and only the additional references the task needs.

Choose one ID scope

Use the actual post ID when known. Otherwise make_layout_id() chooses a random integer from 1000 to 9999. Reuse it for the whole layout and increment the sequence: hero-5824-1, hero-5824-2, faq-5824-3.

Pass known occupied scopes through used_ids when combining layouts. Check for duplicate IDs in the destination. A fallback number is not a WordPress record, a form ID or a query record. You do not need to create a draft merely to obtain an ID.

Runnable local example

Save the following as first-layout.py in the repository root, then run it with Python 3. It creates a three-block sample section using local styles. Replace the sample copy before using it on your site.

from pathlib import Path
from html import escape
import sys

sys.path.insert(0, str(Path('skills/generateblocks-layouts/scripts').resolve()))
from gb_serialize import build_css, make_layout_id, make_unique_id, ordered, serialize_attrs

scope = make_layout_id()  # Or make_layout_id(post_id=YOUR_ACTUAL_POST_ID).

def block(kind, sequence, tag, styles, body):
    uid = make_unique_id('intro', scope, sequence)
    base = f'gb-{kind}'
    attrs = {'uniqueId': uid, 'tagName': tag, 'styles': styles,
             'css': build_css(f'.{base}-{uid}', styles)}
    if kind == 'element':
        attrs['className'] = base
        classes = f'{base}-{uid} {base}'
    else:
        classes = f'{base} {base}-{uid}'
    data = serialize_attrs(ordered(kind, attrs))
    return (f'<!-- wp:generateblocks/{kind} {data} -->\n'
            f'<{tag} class="{classes}">{body}</{tag}>\n'
            f'<!-- /wp:generateblocks/{kind} -->')

heading = block('text', 2, 'h2', {
    'fontSize': 'clamp(2rem,1rem + 3vw,3.25rem)',
    'lineHeight': '1.15', 'marginBottom': '16px',
}, escape('A website you can keep editing.'))
paragraph = block('text', 3, 'p', {
    'fontSize': '18px', 'lineHeight': '1.6', 'marginBottom': '0px',
}, escape('This sample section uses native blocks and local styling.'))
section = block('element', 1, 'section', {
    'maxWidth': '720px', 'marginLeft': 'auto', 'marginRight': 'auto',
    'padding': '48px 24px',
    '@media (max-width:767px)': {'padding': '32px 20px'},
}, heading + paragraph)

Path('output').mkdir(exist_ok=True)
Path('output/first-layout.html').write_text(section, encoding='utf-8')
Path('output/first-layout-scope.txt').write_text(str(scope), encoding='utf-8')
print(f'Saved output/first-layout.html with ID scope {scope}')

Run the preflight check using the numeric scope printed by the example:

python3 first-layout.py
python3 skills/generateblocks-layouts/scripts/preflight.py \
  output/first-layout.html --id-scope NUMBER_PRINTED_ABOVE

NUMBER_PRINTED_ABOVE must be replaced with the generated number. --post-id remains an alias for --id-scope.

This example is a local authoring exercise, not proof of compatibility with every plugin/theme combination. For unfamiliar blocks, especially Pro components, use the installed editor's native serializer instead of extending this small helper into a replacement block engine.

Check the result in WordPress

Paste the generated file through the editor's Code editor on a draft. Return to the visual editor and inspect the actual content, styles and mobile layout. Save, reload and confirm there are no invalid blocks. If you use an API, compare the stored content.raw with what you sent.

Continue with Styling and Responsive Design or WordPress Editing and Publishing.

---

Back to wiki home · Reference library