Wrapper

A bare HTML element that carries only the classes you give it and holds other blocks inside. Use it when a design needs an exact wrapper element without any extra editor classes. It is shown in the block inserter as Wrapper and registered as canvas-core/wrapper.

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

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:

Layout

• HTML Element

  Which element this wrapper renders. Add your classes in the Advanced panel: nothing else is added.

  Choices: , and 34 more.

• Inline TextDefaultEmpty

  Text this element carries directly, beside any inner blocks. Use it when the design puts a sentence straight inside the container with no paragraph of its own. Inline markup only (strong, em, a, br). {count} is replaced with how many records the page found.

• Inline Text PositionDefaultBefore inner blocks

  Whether the inline text comes before or after the blocks inside this element: a design that puts a sentence under the container’s own heading needs it after.

  ChoicesBefore inner blocksAfter inner blocksShown when Inline Text is set

• Link URLDefaultEmpty

  Destination for the wrapper. The blocks inside it become the click target.

  Shown when HTML Element is ""

• Open in New TabDefaultOff

  Open this link in a new browser tab, so the visitor keeps your page open behind it.

  Shown when HTML Element is ""

• Add rel="nofollow"DefaultOff

  Tell search engines not to pass any ranking credit through this link. Use it for paid placements and links you do not vouch for.

  Shown when HTML Element is ""

• Link RelationshipDefaultEmpty

  The rel value on the wrapper. Leave empty and a link opening a new tab gets noopener noreferrer automatically; write your own tokens to replace that.

  Shown when HTML Element is ""

• Label For (control id)DefaultEmpty

  The id of the control this label names. Leave empty when the control sits inside the label.

  Shown when HTML Element is ""

• ARIA RoleDefaultEmpty

  Sets role= on this container. Leave empty for the element's implicit role.

• Form ActionDefaultEmpty

  Where the form posts. Leave empty to post back to the current URL.

  Shown when HTML Element is ""

• Form MethodDefaultPOST

  How the form sends its answers. Choose GET for a search box, where the answers belong in the page address; POST for anything a visitor submits.

  ChoicesPOSTGETNot specified (browser default: GET) (empty)Shown when HTML Element is ""

• Form NameDefaultEmpty

  The form element's name attribute: some scripts look a form up by name rather than id.

  Shown when HTML Element is ""

• Encoding TypeDefaultEmpty

  How the answers are packaged for sending. A form that accepts a file upload needs the multipart choice.

  ChoicesDefault (empty)multipart/form-dataapplication/x-www-form-urlencodedtext/plainShown when HTML Element is ""

• Button TypeDefaultbutton

  Reach for the Button block when the control is a piece of text. Use this wrapper only when the control has to CONTAIN other blocks: a play/pause icon pair, a toggler holding an icon.

  ChoicesbuttonsubmitresetNot specified (browser default: submit) (empty)Shown when HTML Element is ""

• Header ScopeDefaultEmpty

  Which cells this header describes. Screen readers use it to announce the right heading for every cell.

  ChoicesNone (empty)colrowcolgrouprowgroupShown when HTML Element is "" or ""

• Column SpanDefault0

  How many columns this cell stretches across. Leave at 0 for a cell that fills one column.

  Shown when HTML Element is "" or ""

• Row SpanDefault0

  How many rows this cell stretches down. Leave at 0 for a cell that fills one row.

  Shown when HTML Element is "" or ""

Settings

• Control TypeDefaultText

  Which control the visitor sees. Use a Form Field block instead for anything the visitor submits.

  ChoicesTextRange sliderCheckboxRadioNumberSearchEmailTelephoneURLHiddenShown when HTML Element is ""

• Control NameDefaultEmpty

  Optional. A control that only drives the page needs no name, and a design that omits it must be reproducible exactly.

  Shown when HTML Element is ""

• Starting ValueDefaultEmpty

  What the control holds when the page loads: a slider's starting position, a text control's prefilled answer.

  Shown when HTML Element is ""

• PlaceholderDefaultEmpty

  Hint text shown in an empty control.

  Shown when HTML Element is ""

• MinimumDefaultEmpty

  Lowest value a slider or number control accepts.

  Shown when HTML Element is ""

• MaximumDefaultEmpty

  Highest value a slider or number control accepts.

  Shown when HTML Element is ""

• StepDefaultEmpty

  How far one nudge of a slider or number control moves. Empty uses the browser default of 1.

  Shown when HTML Element is ""

• Checked by DefaultDefaultOff

  Whether a checkbox or radio starts on.

  Shown when HTML Element is ""

• RequiredDefaultOff

  The browser blocks submission while the control is empty. Only meaningful inside a form.

  Shown when HTML Element is ""

Style

• Background ImageDefault0

  Sets the container background from the Media Library.

• Publish as CSS VariableDefaultOn

  Publish the picture under a name your own styling can pick up, for a design that paints the background on a decorative layer rather than on the container. Turn it off when the container itself carries the picture.

  Shown when Background Image is set

• Overlay ColorDefaultEmpty

  Fills the container with a colour. Use a partly transparent one on a layer sitting above a picture or video to tint what shows through.

Related

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

Other blocks in Layout: Column, Container, Copyrights, Footer About, Footer Contacts, Footer Instagram.