Skip to content

FocalPointPicker: SVG images without a width attribute are not displayed #43869

@lichtmetzger

Description

@lichtmetzger

Description

If I use a SVG image with the FocalPointPicker component, it will be set to a width of 0 if no width is specified in the SVG itself.

I fixed this by overriding the generated CSS like this:

.components-focal-point-picker__media--image {
	width: 100%;
}

Step-by-step reproduction instructions

  1. Create a block with a MediaUpload control and set the media url as the (full width) background of the block.
  2. Insert a FocalPointPicker control into the block
  3. Upload a SVG image without any width attribute (like the attached one, for example)
  4. Try to use the Focal Point Picker, it will not be displayed correctly.

Screenshots, screen recording, code snippet

image
test

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] MediaAnything that impacts the experience of managing media[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions