GB HTML Blocks for Advanced Custom Fields

Adds a ready-made "HTML blocks" Flexible Content field group to pages, posts and products and renders it on the front end. Full guide with screenshots and examples: https://gregbialowas.com/custom-html-blocks-acf-pro Two layouts inside the field:

• Regular content ("Section Content"): a title, an intro text and one or two columns (image with a caption, title, text and a button in each).
• Hero ("Hero Image/Video"): an image or a looped, muted video, optionally stretched edge-to-edge. Features:
• Field group loads automatically from the plugin (ACF Local JSON), no import needed
• Section with title, intro and one or two columns, plus an "Options" row (custom CSS classes, column order and widths, remove top margin)
• Per-column image (with caption), title, content, link and alignment
• Images with a caption inside the editor text (insert an image, fill in "Caption", pick left/right/center): a dedicated html-blocks_page-figure block with the caption below the image; text wraps around left/right images
• "Show on page?" switch, "second column first" (mobile) and "Reverse columns" (desktop) options
• Optional 65/35 column widths
• "Remove top margin": the section touches the previous one, so several sections look like one block
• Optional "Admin section label": your own name of the section in the editor (internal only)
• Lightweight CSS (plain CSS, no dependencies), loaded only on pages that use sections
• Readable section titles in the editor: the Admin section label, otherwise the Title, otherwise the first words of the content
• Every block has a place for your own CSS classes (the "Custom class(es)" option), so you can restyle the content and the columns freely in your theme (see "Style it your way" below)
• Template can be overridden in the theme
• Filters and actions for developers Requires Advanced Custom Fields PRO. The Flexible Content field is not part of the free ACF. If it is missing, the plugin shows a notice in the admin.

How to use

1. Install and activate Advanced Custom Fields PRO, then this plugin.
2. Edit a page (or a post). Under the title you will find the "Flex Blocks" field group. Click + New Page Section and choose a layout: Section Content (title, intro text and one or two columns) or Hero Image/Video (an image or a looped video, optionally edge-to-edge).
3. Fill in what you need. Empty fields are not printed. The Options row has custom CSS classes, "second column first" on mobile, 65/35 widths, reversed columns and "Remove top margin" (the section touches the previous one, so a few sections look like one block).
4. To put an image inside the text, use Add Media, fill in Caption and choose the alignment: the text wraps around it and the caption sits below.
5. Update the page. The sections are printed after the page content.

A longer guide with screenshots: https://gregbialowas.com/custom-html-blocks-acf-pro Style it your way (custom CSS) Every block has the ability to add its own CSS classes, so you can change the look of the content, the columns, the buttons and the images in your own theme, without touching the plugin. Type your own class in the Custom class(es) option of a section and style it in your theme's CSS. You can also override the CSS variables (see "CSS variables") or the classes of the plugin (see "CSS classes"). To use only your own styles, return false from the gb_html_blocks_enqueue_styles filter. You can also override the HTML itself with a template in your theme (see "Theme override").

1. Upload the plugin to WordPress and activate it
2. Edit a page: the "Flex Blocks" field group appears under the title
3. The sections appear automatically after the page content. To place them yourself, turn the automatic output off with add_filter( 'gb_html_blocks_auto_output', '__return_false' ); and print them in your theme template:

<?php if ( function_exists( 'gb_html_blocks_render' ) ) { gb_html_blocks_render(); } ?> or use the shortcode [gb_html_blocks] (optional: post_id="123"; a shortcode in the content also stops the automatic output for that page).

1.4.2

• Removed the section number label ("01 Title") and the line before the section title: only the title is printed
• Readme: the two layouts described in the Description, clearer text about custom CSS classes

1.4.1

• Readme: short "How to use" guide and a note about styling with custom CSS; plugin page: https://gregbialowas.com/custom-html-blocks-acf-pro

1.4.0

• Images with a caption in the editor fields get the markup <div class="html-blocks_page-figure html-blocks_page-figure--right"><img><div class="html-blocks_page-figure__caption">…</div></div> (only inside this plugin's sections; filter gb_html_blocks_custom_captions); left/right images are floated and the text wraps around them (mobile: full width)
• The intro and column text containers keep floated images inside

1.3.0

• New layout "Hero Image/Video" (template media.php): an image or a looped, muted video (the image is its poster), with the option "Is full width?" - the inner wrapper is then 100% of the parent width (edge-to-edge); the section gets the classes media and is-full-width
• In the editor an unnamed non-section layout shows its layout label

1.2.4

• Code cleanup for the WordPress.org review: direct access guards in all PHP files, template variables kept out of the global scope, translatable fallback title, License URI header

1.2.3

• Editor: the section title has no "Section: " prefix; empty sections show "(Page Section)"

1.2.2

• Editor: the section title (Admin section label / Title / Content) is shown right after the page loads, not only after clicking the section

1.2.1

• Editor: Title and Admin section label are shown in one row (50% each) with the same background as the Options row

1.2.0

• The section options (custom classes, column order, 65/35) are grouped in one "Options" row in the editor (field group "options"); new option "Remove top margin" (adds the class remove_top_margin to the section, padding-top: 0)
• Editor stylesheet (assets/css/admin.css), loaded on the post/page edit screens
• Note: the options are stored in a new group, so values saved with an older version have to be set again

1.1.2

• Sections are printed automatically after the content of a single post/page (no theme edit needed). Turn it off with add_filter( 'gb_html_blocks_auto_output', '__return_false' ); when the theme calls gb_html_blocks_render() itself
• With WP_DEBUG on, an HTML comment explains why nothing was printed

1.1.1

• The plugin can't be activated unless ACF PRO is installed and active (activation is stopped with a message)

1.1.0

• Restored "Admin section label" (used first in the section title in the editor)
• New options: Reverse columns (desktop), 65/35 column widths, image captions
• The section layout is now "Section Content"; the field group also loads on posts
• All CSS classes start with html-blocks_page-section (previously gb-section); the stylesheet and the template were updated accordingly
• New filter gb_html_blocks_inner_classes
• Removed the unused "Custom output at the top" and "Image (svg)" fields (the template never printed them)
• A section without a saved "Show on page?" value is visible

1.0.0

• Initial release as a standalone plugin
• Field group shipped as ACF Local JSON
• Dynamic layout titles in the ACF editor
• Renderer with template override and developer hooks
• Plain CSS with customizable CSS variables