What?

This PR addresses and fixes Issue #43869, where SVG images without a width attribute were not displayed correctly in the FocalPointPicker component. The issue arose because such SVG images defaulted to width: 0, rendering them invisible in the UI.

The fix ensures that SVG images are displayed properly by enforcing the following styles via CSS:

• width: 100% to make the SVG scale appropriately.
• height: auto to maintain the aspect ratio of the SVG.

Why?

Previously, when an SVG image lacking a width attribute was uploaded and used with the FocalPointPicker component, the image would not display properly due to its width defaulting to 0. This created a poor user experience, as users could not adjust the focal point for SVGs. The fix ensures consistency across different types of images used with the FocalPointPicker component.

How?

The implementation involves:

1. Updating the styles applied to the FocalPointPicker component.
2. Adding CSS rules to enforce width: 100% and height: auto for SVG images, ensuring they are displayed properly while maintaining their aspect ratio.

Testing Instructions

To test this PR:

1. Open the block editor in WordPress.
2. Add a block that uses the FocalPointPicker component (e.g., a Cover block).
3. Upload an SVG image that does not include a width attribute (e.g., use the SVG file provided in Issue #43869).
4. Verify that:
   • The SVG image is displayed correctly within the FocalPointPicker.
   • Adjusting the focal point works as expected.
   • No regressions occur for other image types.

Screenshots

Before	After

Additional Notes

This fix ensures compatibility and a better user experience for users working with SVG images in the block editor. It has been tested to verify that other image formats and features of the FocalPointPicker component are unaffected.

Closes #43869.