Canvas Docs

AJAX Buttons

Button that loads external content via AJAX into a container. Supports append, prepend, and replace insertion modes. It is shown in the block inserter as Canvas AJAX Button and registered as canvas-core/ajax-button.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The AJAX Buttons settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Button TextDefaultLoad More

    The wording a visitor reads on the button.

  • IconDefaultEmpty

    An icon shown beside the wording. Leave it unset for a button with words only.

  • Icon PositionDefaultAfter

    Whether the icon sits before the wording or after it.

    ChoicesBeforeAfter

AJAX Settings

  • Content URL / PathDefaultEmpty

    URL of the content to load via AJAX.

  • Target ContainerDefaultEmpty

    Which element on the page receives the loaded content. Give that element an ID in its Advanced panel, then enter the same ID here with a leading hash.

  • Content SelectorDefaultEmpty

    Takes only the matching part of the fetched page rather than all of it, so an ordinary page can be the source instead of a bare fragment. Leave it empty to bring the whole thing across.

  • Insertion ModeDefaultAppend

    Where the loaded content lands in relation to what the target already holds: after it, before it, in place of the target itself, or in place of everything inside it.

    ChoicesAppendPrependReplaceReplace Inner HTML

  • TriggerDefaultOn Click

    What starts the load. On Page Load and On Scroll hide the button, since nobody needs to press it, and fetch the content without being asked.

    ChoicesOn ClickOn Page LoadOn Scroll

  • Hide Button After LoadDefaultOff

    Takes the button away once its content has arrived. Turn it on for a one-off load, and leave it off for a Load More button that runs again.

Style

  • Button StyleDefaultDefault

    How much weight the button carries: a solid filled button, an outlined one, or plain text with no box around it.

    ChoicesDefaultBorder / OutlineFlat / Text

  • Button SizeDefaultDefault

    How large the button is drawn.

    ChoicesSmallDefaultLarge

  • Button ColorDefaultEmpty

    Which of the palette colours fills the button, or outlines it in the Border style. Theme Color falls back to Primary.

    ChoicesTheme Color (empty)PrimarySecondarySuccessInfoWarningDangerDarkLight

  • Full WidthDefaultOff

    Stretches the button across the whole width of the column it sits in, rather than only as wide as its wording.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, Carousels, Cookie Consent, Countdowns, Flip Cards, Galleries.

Was this page helpful?