Image Text Wrap
| 开发者 | cmtkennyb |
|---|---|
| 更新时间 | 2026年8月25日 07:17 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Image Text Wrap adds a Gutenberg block that flows your body text around an image the way a page-layout program does. Drop the block into a post, type your paragraphs after it, and the text reflows around the image.
You get real control over the wrap instead of the all-or-nothing float the core Image block gives you:
- Float left or right, with the image aligned to your content column (not thrown into the page gutter).
- Vertical offset slides the image down into the copy so text flows above it, then wraps beside and below.
- Bounding box wrap flows text around the image's box, with independent gaps for the text side, above, and below, like a page-layout program's box wrap.
- Contour wrap flows text along a circle or ellipse enclosing the image and its caption, with a single contour offset controlling the standoff (the gap above the image is limited by the vertical offset).
- Top & bottom mode drops the image into its own band with text above and below only.
- Captions appear below the image, edited from the sidebar, with the body text wrapping around image and caption together. They accept simple inline HTML (em, strong, links), and the standard WordPress Typography panel (font size, line height, appearance, letter spacing, letter case, decoration) styles the caption text.
安装:
- Upload the
image-text-wrapfolder to/wp-content/plugins/, or install the plugin through the Plugins screen in WordPress. - Activate the plugin through the Plugins screen.
- In the post editor, add the Image Text Wrap block, choose an image, and type your paragraphs after it. Adjust the wrap in the block's Text Wrap panel.
屏幕截图:
常见问题:
How do I get text above the image?
Raise the Vertical offset slider. The text that flows above the image comes from the block placed immediately after it, so make sure a paragraph follows the image block.
Can text wrap around all four sides of a centered image?
No. Text flows above, below, and on one side. Simultaneous wrapping on both sides of a mid-column image requires CSS Exclusions, which no current browser supports.
Does it work on mobile?
Yes. Below 600px the image drops to full width with text above and below, so a narrow column never gets squeezed. Above that it keeps the float and wrap.
Does it need a build step?
No. The block is authored in plain JavaScript against the WordPress editor APIs, with no compile step, bundler, or external libraries.
更新日志:
1.3.4
- Documentation only: brought the Upgrade Notice section in line with 1.3.3 (the 1.3.1 notice no longer advertises the reverted in-canvas caption editing) and added notices for 1.3.2 and 1.3.3. No code changes.
- Restored the Caption field in the block sidebar, removed by mistake in 1.3.1, and removed the in-canvas caption editing that replaced it. The caption in the canvas is a display-only preview again, now sanitized (scripts and event attributes stripped) so the 1.3.1 hardening is preserved.
- Blocks using the silhouette contour wrap removed in 1.2.0 (shape-outside from the image's alpha channel) now validate and migrate instead of showing "unexpected or invalid content": deprecated save formats for 1.0.0 and 1.1.x now include the contour branch, and those blocks convert to the enclosing ellipse contour, the closest modern equivalent.
- Legacy migrations now scrub generated wrap classes (has-shape, shape-*) that earlier block recoveries had captured into the block's custom class name, which would have wrongly restyled migrated blocks.
- Blocks published under any earlier version now upgrade cleanly: deprecated save formats for 1.0.0 through 1.3.0 are registered, so existing posts no longer show "unexpected or invalid content", and the old vertical gap's top spacing carries over into the new Gap above image setting.
- Captions are now written directly under the image in the editor canvas (like the core Image block), with bold, italics, and links via the formatting toolbar. This also hardens the caption against markup injection and against server-side filters rewriting it out from under the editor.
- The caption is read from the saved markup rather than duplicated in the block comment, so security filters (KSES, link rel rewriting) can no longer make the stored post invalid.
- Allowed the wrap's shape-outside and box-sizing styles through KSES, so authors without the unfiltered_html capability keep their wrap when saving.
- Fixed the Typography panel's line height having no effect on the caption.
- Fixed a stale Gap below image value distorting the contour geometry after switching from Bounding box to Contour mode.
- On narrow viewports the wrap box now stays inside the content column instead of overflowing it; a clamped image gets a proportionally wider standoff and never overlaps text.
- The editor script's strings are now translatable (wp_set_script_translations).
- Copy cleanup: the contour offset help now notes the gap above the image is limited by the vertical offset, and the screenshot description matches the 1.3.0 controls.
- Reworked text wrapping around the two wrap models used in page-layout programs: Bounding box (wrap to the image's box with independent per-side gaps) and Contour (wrap along a circle or ellipse with one uniform offset).
- Contour wrap: new Contour offset control, a uniform standoff between the text and the wrap contour, holding evenly all the way around the shape, including its widest point. Adjusting it never moves the image.
- Contour wrap: the contour always encloses the image and its caption, at any caption height, so the caption is never overrun and never dropped. (A perfect circle cannot enclose a caption, so with a caption the contour is the enclosing ellipse.)
- Fixed: circle and ellipse wraps were silently dropped to a rectangular wrap whenever a vertical offset or vertical gap was set, or when the image had a caption.
- Bounding box wrap: independent Text-side gap, Gap above image, and Gap below image controls.
- The image now stays flush with the content column on its non-text side in all wrap modes.
- Added the standard WordPress Typography panel to the block (font size, line height, appearance, letter spacing, letter case, decoration), using the theme's own presets; it styles the caption text, which stays proportionally smaller than the chosen size.
- Removed the contour (silhouette) wrap shape. Rectangle, circle, and ellipse wraps remain.
- Removed the one-time rename migration now that its purpose is complete. No functional change.
- Added image captions, edited from the block sidebar and shown below the image. Body text wraps around the image and caption together.
- Captions accept simple inline HTML (em, strong, a).
- One-time content migration: posts published under the plugin's former name are rewritten to the current block name, CSS class, and offset variable on update, so existing content keeps rendering and stays editable.
- Initial release.
- Beside-text float (left/right) with content-width alignment.
- Vertical offset (text flows above the image), vertical gap, and wrap offset controls.
- Wrap shapes: rectangle, circle, ellipse, and alpha-channel contour.
- Top & bottom (stacked) wrap mode.
- Responsive: stacks full width below 600px.