fix: transform on <g> instead of <svg> as a safari fix

[Arukuen]

fixes #3650

Safari doesn't support transform on the root element when used as a CSS mask. The fix is to wrap the content in a and apply the transform there instead.

Summary by CodeRabbit

• Bug Fixes
  • Fixed flipped image-shape rendering so horizontal and vertical flips now display consistently across contexts by embedding the flip into the image data. This resolves cases where flipped shapes appeared incorrect or misaligned, preserving intended appearance and layout.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 258666b2-0fa4-45c9-bb27-ce574777de5f

📥 Commits

Reviewing files that changed from the base of the PR and between e6ec53e and 5bbb116.

📒 Files selected for processing (1)

• src/block-components/image/get-shape-css.js

🚧 Files skipped from review as they are similar to previous changes (1)

• src/block-components/image/get-shape-css.js

---

📝 Walkthrough

Walkthrough

getShapeCSS now renders the SVG to a string, parses its viewBox when flips are requested, wraps the SVG contents in a <g> with computed translate and scale transforms to implement horizontal/vertical flips, base64-encodes the result, and returns it as a data URL.

Changes

Cohort / File(s)	Summary
SVG Flip Handling src/block-components/image/get-shape-css.js	Replace applying flip via JSX transform prop with rendering SVG to string, parsing viewBox, wrapping contents in a <g> that applies translate(...) scale(...) for flips, then base64-encoding the modified SVG and returning a data:image/svg+xml;base64,... URL.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hummed a little tweak tonight,
I wrapped the SVG snug and tight,
With translate, scale — a flip so neat,
Now shapes align on every screen and beat,
Hooray! 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: moving transform application from the SVG root element to a wrapper element as a Safari compatibility fix.
Linked Issues check	✅ Passed	The code change directly addresses issue #3650 by implementing the fix to make shape flips work in Safari by applying transforms to instead of .
Out of Scope Changes check	✅ Passed	All changes in getShapeCSS are focused on the Safari flip transform fix described in the linked issue; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/3650-safari-image-flip

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3691-stackable-3691-merge.zip	5bbb116

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3691-stackable-3691-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/block-components/image/get-shape-css.js`:
- Around line 43-49: The flip translation is wrong because minX/minY are parsed
then ignored and the viewBox regex only handles double quotes and
space-separated values; update the viewBox extraction to use a regex like
/viewBox=['"]([^'"]+)['"]/ and split the captured string with a separator that
handles spaces and commas (e.g. .split(/[\s,]+/)) to get numeric minX, minY,
width, height, then compute translateX and translateY using the origin-aware
formulas (e.g. translateX = shapeFlipX ? (2 * minX + width) : 0 and translateY =
shapeFlipY ? (2 * minY + height) : 0) so that the flipping in the code that
references viewBoxMatch, _minX/_minY, width, height, translateX, translateY and
svgString.match behaves correctly for non-zero viewBox origins.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ee9f800b-6e76-40fe-8254-a8505c466e4b

📥 Commits

Reviewing files that changed from the base of the PR and between 783643d and e6ec53e.

📒 Files selected for processing (1)

• src/block-components/image/get-shape-css.js