Block Rendering

Block rendering is handled by og-core and the code that does this can be seen below.

Within the render.twig template for blocks, blocks are wrapped in a div with the block id and class. There is also a div just inside the outer wrapper of the div that would apply the blocks anchor tag if one is assigned through the Wordpress editor. This means we can assign alignment, custom classes, and anchors to the block through the WordPress editor and scope our styles to just the block using the unique id on the outer wrapper or add specific classes to the outermost div wrapper if needed for functionality such as for swiper.js.

An additional comment line is added just before the block when in debug mode, to help identify the block when in development.

There is also conditionals to add an edit tooltip to a block with a link to where information for the block can be edited if certain attributes are added in the block.json of a block. See block.json for more information on how to do that.

render.twig Template for Blocks

{% if is_debugging() %}
<!-- {{ block.title }} Block -->
{% endif %}

<div id="{{block.unique_slug}}" class="{{block.classes}}">

    {% if block.anchor is not empty %}
        <div id="{{block.anchor}}"></div>
    {% endif %}

    {% include block_template %}

    {% if edit_link and fn('is_admin') %}
        <div class="edit-wrapper">

            <a href="{{ edit_link }}" target="_blank" class="edit-link">
                <svg xmlns='http://www.w3.org/2000/svg' height='24' viewbox='0 -960 960 960' width='24'>
                    <path d='M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z'/>
                </svg>
            </a>

            {% if edit_tooltip %}
                <div class='edit-tooltip'>
                    {{ edit_tooltip }}
                </div>
            {% endif %}
    </div>
        {% endif %}
</div>

The functions for building out the block with all of its data context can be found in Blocks/Data.php and Blocks/Factory.php in og-core.