Images in Lesson and Course Content

When you add an image to a lesson or course description in the block editor, you can control how wide it is and how it sits next to your text, instead of it always filling the whole content column.

What you can do

Set an image's width to 25%, 50%, 75%, or 100% of the content column.
Align an image left, center, or right. A left- or right-aligned image lets text flow around it, like a magazine layout.
Use the editor's border, background, and stretch toggles on an image. These now save correctly; previously they reverted after saving even though the toggle looked like it worked.
Don't worry about phones: every image renders full width on a small screen automatically, no matter what width you chose on desktop.

How to use it

Step 1 - select the image

Open a lesson or the course description in the content editor and click an image block to select it.

Step 2 - set the width

In the image's tune panel, use the Width control to choose 25%, 50%, 75%, or 100%. 100% is the default.

Step 3 - set the alignment

Use the Align control to choose left, center, or right. Center is the default. Choosing left or right lets the following text wrap around the image.

Step 4 - optional styling

Turn on border, background, or stretch as needed. These are independent of width and alignment.

Step 5 - save and check both views

Save the lesson or course, then check it on a desktop-sized screen and on a phone. On the phone, the image should fill the width regardless of what you picked in Step 2.

Settings and options

Defaults. A new image starts at 100% width, centered.
Text wrap only applies at less than 100% width. A left- or right-aligned image at 100% width has no room for text to wrap into, so it behaves like a centered full-width image.
Mobile override is automatic. There's no separate mobile setting to configure; the full-width behavior on small screens applies to every image regardless of its desktop width or alignment.
Applies everywhere content is edited. The same width and alignment choices render identically in the lesson editor preview, the front-end course builder, and the student-facing lesson or course page.

For developers

The layout choice is stored on the image block as { width, align } and rendered as CSS classes on the <figure> element (.lrn-image--w-25/-50/-75, .lrn-image--left/-right; 100% width and center alignment need no modifier class). The plugin's HTML content converter is responsible for the block-to-HTML and HTML-to-block conversion in both directions, and a content round-trip check enforces that a layout choice that can't be read back fails the build rather than being silently dropped -- the same protection that closed the earlier border/background/stretch persistence bug.