Canvas Docs

Plain Image

A bare img element (no figure wrapper) with exact class control, optional link, and optional retina (2x) srcset pair. It is shown in the block inserter as Canvas Plain Image and registered as canvas-core/plain-image.

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

The Plain Image 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

  • ImageDefault0

    Picture to show. Nothing is rendered until one is set here or an address is given below.

  • Image URL FallbackDefaultEmpty

    Optional. Used when no attachment is selected (e.g. a pattern placeholder). Attachment selection always wins.

  • Retina (2x) ImageDefault0

    Optional. A double-resolution attachment emitted as an explicit srcset "1x, 2x 2x" pair.

  • Use Site LogoDefaultOff

    Resolve the image (and its 2x pair) from the Theme Options site logo instead of a fixed attachment, so a logo placed with this block follows the site identity. The markup shape is unchanged. Falls back to the chosen image when no site logo is set.

  • Site Logo VariantDefaultDefault

    Which Theme Options logo to use. A variant that is not set falls back to the default logo.

    ChoicesDefaultDarkStickyMobileShown when Use Site Logo is on

  • Link Site Logo to HomeDefaultOff

    Replace the Link URL with the site home URL, so the logo link is not hardcoded either.

    Shown when Use Site Logo is on

  • Alt Text OverrideDefaultEmpty

    Optional. Leave empty to use the attachment alt text, or enter "none" if this image is purely decorative here (it then ships an empty alt and screen readers skip it).

  • Link URLDefaultEmpty

    Optional. Wraps the image in a plain link.

  • Link CSS ClassesDefaultEmpty

    Optional. Classes for the wrapping link element (e.g. d-block).

Settings

  • Image SizeDefaultFull

    Which stored copy of the picture is served. Pick a smaller one when the image is drawn small, so the page loads faster.

    ChoicesFullLargeMediumThumbnail

  • Open Link in New TabDefaultOff

    Opens the link in a new browser tab. Use it for a destination that leaves your site.

  • Width Attribute (px)Default0

    Optional explicit width attribute on the img. 0 = omit (use the attachment / browser default).

  • Height Attribute (px)Default0

    Optional explicit height attribute on the img. 0 = omit (use the attachment / browser default).

  • Image Inline StyleDefaultEmpty

    One-off styling for the picture itself. Use it when the image is linked, because the shared styling in the Advanced panel lands on the link around it rather than on the picture.

  • Image AttributesDefaultEmpty

    One name=value per line, added to the picture itself. Use it for a tooltip or a data attribute a script reads, and when the image is linked, because the shared attributes in the Advanced panel land on the link around it rather than on the picture.

  • Media Library ClassDefaultOn

    Adds the wp-image-{id} class WordPress puts on a media-library image, which is what lets the Media Library recognise it. Leave it on unless a stylesheet you do not control targets that class and fights this image.

  • LoadingDefaultEmpty

    When the browser fetches the picture. Lazy waits until a visitor scrolls near it; Eager loads it straight away, which suits an image at the top of the page.

    ChoicesBrowser Default (no attribute) (empty)LazyEager

  • High Fetch PriorityDefaultOff

    Emits fetchpriority="high": use for the LCP hero image only.

  • Theme Lazy Load (data-src)DefaultOff

    Holds the picture back and lets the theme own loader fade it in as a visitor scrolls to it, which is the mode to use when the reveal carries an effect. Add the "lazy" class in the Advanced panel so the loader finds this image. This differs from Loading above, which is the browser plain version with no effect.

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

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?