web_blockquote Shortcode
The web_blockquote shortcode renders the blockquote component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_blockquote blockquote_author="Example author" blockquote_author_color="2" blockquote_icon_color="1"]<p>Quoted content.</p>[/web_blockquote]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
| Enclosed content | Empty | Paragraphs and supported content HTML | Place content between the opening and closing shortcode tags. |
blockquote_author |
Empty | Text with passive emphasis, links or line breaks | Optional citation. |
blockquote_author_color |
Empty | Numeric palette slot 1–15 | Adds text-main-N to the citation. |
blockquote_icon_color |
Empty | Numeric palette slot 1–15 | Adds text-main-N to the decorative quotation mark. |
blockquote_background_image_url |
Empty | HTTP(S) or site-relative image URL | Enables the styled quotation, even without encoded settings. |
blockquote_background_image |
Empty | Background settings produced by the visual editor | Size (auto/cover/contain/custom), width/height percentages, nine positions, repeat and scroll/fixed attachment. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Customize the stylesheet
Administrators can replace the complete Blockquote stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Blockquote. Saving publishes an optimized per-site copy without adding the stylesheet to unrelated pages. Reverting returns the existing web-blockquotes handle to the theme stylesheet. The same component is used by native Gutenberg Quote and its editor preview; neither requires quotation-specific JavaScript.
Target .web-blockquote-content for quoted paragraphs and cite.web-blockquote-author for attribution. The quotation mark is decorative and hidden from assistive technologies. Background settings default to Cover, Center center, No repeat and Scroll; the image layer has 60% opacity. Custom percentages are bounded to 0–1000. Legacy continues to output validated inline background declarations; Gutenberg stores its arbitrary background declarations in the unified page stylesheet. Existing shortcode content does not require conversion.
Verification
Verify web_blockquote with representative content, its empty state and every enabled responsive range. Pay particular attention to content and blockquote_author.
For native authoring, see Add a quotation in Gutenberg.