[IMP/ADD] website_themes: Building blocks page update

- Add "Text highlights"
- Add "grid-item-padding" and "grid-gap"
- Add Inner content snippet process

closes odoo/documentation#12623

X-original-commit: 6b73fe9f5a
Signed-off-by: Brandon Mercier (bram) <bram@odoo.com>

content/developer/howtos/website_themes/building_blocks.rst

@@ -248,6 +248,11 @@ Add a custom gradient filter.
 Features
 ~~~~~~~~
 
+.. _website_themes/building_blocks/layout/non_editable_areas:
+
+Non-editable areas
+******************
+
 Make an element not editable.
 
 .. code-block:: xml
@@ -260,6 +265,11 @@ Make an element not removable.
 
    <div class="oe_unremovable">
 
+.. _website_themes/building_blocks/layout/background:
+
+Backgrounds
+***********
+
 Add a background image and have it centered.
 
 .. code-block:: xml
@@ -283,6 +293,43 @@ Add parallax effect.
 
    A video background can be set on a section. Refer to the ":doc:`media`" chapter of this documentation.
 
+.. _website_themes/building_blocks/layout/text_highlights:
+
+Text highlights
+***************
+
+Text highlights are SVG files that can be incorporated onto specific words or phrases to emphasize them. Text highlights offer customizable options for colors and thickness.
+
+.. image:: building_blocks/text-highlight.jpg
+   :alt: Example of text highlight
+   :width: 500
+
+.. code-block:: xml
+
+   <h2>
+      Title with
+      <span class="o_text_highlight o_text_highlight_fill" style="--text-highlight-width: 10px !important; --text-highlight-color: #FFFF00;">
+         <span class="o_text_highlight_item">
+            highlighted text
+            <svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none">
+               <!-- SVG path -->
+            </svg>
+         </span>
+      </span>
+   </h2>
+
+.. list-table::
+   :header-rows: 1
+   :stub-columns: 1
+   :widths: 35 65
+
+   * - CSS custom property
+     - Description
+   * - `--text-highlight-width`
+     - Thickness of the SVG borders
+   * - `--text-highlight-color`
+     - Color of the SVG object
+
 .. _website_themes/building_blocks/layout/grid:
 
 Grid layout
@@ -291,17 +338,27 @@ Grid layout
 Grid Layout is a powerful and flexible layout system in CSS that enables users to design complex
 building block layouts with ease.
 
-Enable the Grid Layout by adding the `o_grid_mode` class on the `row`. The number of rows in your
-grid is defined in the `data-row-count` attribute. The grid always contains 12 columns.
+.. _website_themes/building_blocks/layout/grid_use:
 
-**Use**
+Use
+~~~
+
+Enable the Grid Layout by adding the `o_grid_mode` CSS class on the `row`. The number of rows in
+your grid is defined by the `data-row-count` attribute. The grid always contains 12 columns. The
+grid gap, specified in the `style` attribute, determines the gaps (or gutters) between rows and
+columns.
 
 .. code-block:: xml
 
-   <div class="row o_grid_mode" data-row-count="13">
+   <div class="row o_grid_mode" data-row-count="13" style="gap: 20px 10px">
       <!-- Content -->
    </div>
 
+.. _website_themes/building_blocks/layout/grid_items:
+
+Items in a grid
+~~~~~~~~~~~~~~~
+
 Add items in the grid with the `o_grid_item` class. If the grid item contains an image, use the
 `o_grid_item_image` class.
 
@@ -322,6 +379,32 @@ in the `style` attribute along with the z-index.
 
 The `g-height-*` and `g-col-lg-*` classes are generated by the Website Builder for editing purposes.
 
+.. _website_themes/building_blocks/layout/grid_items_padding:
+
+Grid item padding
+~~~~~~~~~~~~~~~~~
+
+.. code-block:: xml
+   :emphasize-lines: 2
+
+   <div class="row o_grid_mode" data-row-count="13" style="gap: 20px 10px;">
+      <div class="o_grid_item g-height-* g-col-lg-*" style="--grid-item-padding-y: 20px; --grid-item-padding-x: 15px; grid-area: 2 / 1 / 7 / 8; z-index: 3;">
+         <!-- Content -->
+      </div>
+   </div>
+
+.. list-table::
+   :header-rows: 1
+   :stub-columns: 1
+   :widths: 35 65
+
+   * - CSS custom property
+     - Description
+   * - `--grid-item-padding-y`
+     - Vertical paddings (Y axis)
+   * - `--grid-item-padding-x`
+     - Horizontal paddings (X axis)
+
 .. _website_themes/building_blocks/compatibility:
 
 Compatibility system
@@ -469,6 +552,26 @@ Then insert the different available options:
       </xpath>
    </template>
 
+**Inner content**
+
+Make a custom snippet "inner content" (droppable in an other building block) by extending the
+`so_content_addition_selector` variable which contains all CSS selectors referring to the existing
+inner content building blocks:
+
+.. code-block:: xml
+   :caption: `/website_airproof/views/snippets/options.xml`
+
+   <template id="snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
+      <xpath expr="//t[@t-set='so_content_addition_selector']" position="after">
+         <t t-set="so_content_addition_selector"
+            t-value="so_content_addition_selector + ', .s_airproof_snippet'" />
+      </xpath>
+   </template>
+
+.. seealso::
+
+   `Standard "inner content" snippets declaration on Odoo's GitHub repository <https://github.com/odoo/odoo/blob/f922f09b83c68dff36c064d20709a6e6ba4541dc/addons/website/views/snippets/snippets.xml#L720>`_
+
 .. _website_themes/building_blocks/custom/options/binding:
 
 Binding