Shared APB settings

Component tutorials do not re-explain margin, padding, containers, or border radius. Those controls live here. A component page only notes a component-specific effect (for example: Slideshow container settings are spacing only; Overlay Content has none).

Section title

field_apb_section_title is a 255-character string. field_apb_show_section_title is yes / no (default no on Accordion and most parents). Showing both the node title and the section title with the same string produces two large headings — hide the section title when the node title already says it.

Width

field_apb_width_tx points at vocabulary apb_tax_width. Machine names end with an underscore: 25_, 33_, 40_, 50_, 60_, 66_, 70_, 75_, 80_, 90_, 100_. Default is usually 100_. Widths below 100% are centered in Twig with !important (max-width plus auto margins). That still applies on a 390px viewport. Overlay Content has no width field.

Color styles

Two vocabularies. apb_tax_cs_01 (Color style 1): black, white, teal_blue, blue, orange, green, red, silver_and_blue. apb_tax_cs_02 (Color style 2): blue, blue_and_green, gray, green, orange, red, teal_blue, yellow_orange_and_red. Accordion and Tabs use CS02 on the parent. Feature boxes and special lists often use CS01, including per-item overrides. Front-end CSS is injected per instance from term color fields. Code reads machine_name, never the label.

Custom class

field_apb_custom_class on parents (and field_apb_pi_custom_class on items) is a free-text CSS class string. Empty by default.

Intro

field_apb_pb_intro is a long text field restricted to apb_full_html where present. Some parents (Read more) have no intro.

Container settings (2.1+)

Opt-in per parent. Three pieces must exist: a plugin src/Plugin/ApbContainerSettings/*ContainerSettings.php, field instances plus a form group, and a Twig wrapper apb-pb-container with data-apb-container-id.

Fields: field_apb_pb_container_settings (JSON in value, no text format) and field_apb_pb_container_bg_media (image, video, or remote_video; merged into JSON background.media at render).

Canonical JSON defaults (ContainerSettingsDefaults::CORE):

• padding — top/right/bottom/left, default 0px
• margin — top/right/left 0px, bottom 32px
• border — sides none, color #000000, radius none
• background — color and text_color empty; text_color_items exclude or include; opacity 0–1 in JSON (the widget shows 0–100%); blur 0; parallax off (orientation: up, scale: 1.4, delay: 1)

Lengths must match /^(\d+(\.\d+)?)(px|em|rem|%)$/ or none. text_color_items=exclude colors parent chrome only and reverts nested apb_pi_*; include lets nested items inherit.

Full profile (padding, margin, border, background + media): accordion, carousel, feature box, image gallery, infinite logos, links, profiles, read more, special list, tabs, video, views, simple content. Slideshow: spacing only (padding + margin; slides own their backgrounds). Overlay Content: none.

The CSS generator emits scoped !important rules. It does not call the widget validator, so scripts can write unitless 20 or the keyword foo; browsers drop those. Negative margin is valid CSS and does apply. Opacity 2.5 is clamped to 1 in hexToRgba(). Simple content also has a separate per-item parallax system on apb_pi_sc_background — a parent can have both.

Access control

field_access_control (entity_access_by_role_field) ships on several parents. Default role_id null / access forbidden with empty_roles_access_fallback=allowed means an untouched row hides nothing. Setting role=anonymous and access=forbidden omits that parent from anonymous HTML while remaining visible to editors. This is per-parent view access, not a substitute for node moderation. Overlay JSON for a hidden sibling is still a separate route.

Scripting gotchas that apply across components

• Container settings JSON is a string in value, no format.
• Views field_apb_vw_view.data is PHP serialize(), not JSON. Boxed-card border is a JSON string.
• Carousel autoplay/loop/nav are integers 1/0. Infinite logos pause is 'true'/'false'. Links show thumb/icon is '1'/'0'. Slideshow text shadow is '1'/'0'; overlay opacity is a string key such as '0.45'.
• Social network machine name is linkedln (seed spelling).
• Width machine names end with _.