Fix duotone first render in Safari

[ajlende]

Description

In Safari the duotone filters were not painting in the sRGB color space on the initial render. Forcing a re-paint of the element would fix the filter's color space. From some testing, I found that moving the SVG filters before the filtered elements fixed the issue.

How has this been tested?

In Safari, load a post that includes a duotone filter applied via block controls and another duotone filter applied via theme.json.

See that the filter renders correctly.

Screenshots

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[jasmussen]

Nice. I tried with a custom configured duotone preset, and one set via theme.json using this:

    "blocks": {
      "core/image": {
        "filter": {
          "duotone": "var(--wp--preset--duotone--blue-red)"
        }
      },
    }

Before:

After:

[mcsf]

Wonderful, thanks for the fix! Makes sense to me. I trust that the visibility parameters set on SVG were good enough for the footer and hence are good enough for the opening of the body, right? :)

[Mamaduka]

Cherry-picked for 5.9.1. Mostly to fix merge conflicts.