Feature/21 An SVG Gutenberg Block

[faisal-alvi]

Description of the Change

• This PR introduces a new SVG block.
• Inspired by the core image block but it only allows SVG files to be selected/uploaded.
• Adds "Alignment" and "Replace" Block controls the same as the core image block.
• Also adds the Image settings in the block sidebar (image size dropdown, image dimensions, with a reset button).

image link

image link

image link

image link

Closes #21

How to test the Change

1. Create a new page/post.
2. Add a block "Safe SVG Icon".
3. Click "Select an SVG icon".
4. Try alignment, replace, various image sizes.
5. Confirm the FE should be same as BE.

Changelog Entry

Added - An SVG Gutenberg Block.

Credits

Props @faisal-alvi @jeffpaul @Sidsector9

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

[Sidsector9]

@faisal-alvi thanks for working on this.

I have used this image to test:

Few things I would like to point out:

1. When you first select the SVG, the rendered image dimensions is very small, even when Image size is set to Full Size.
2. When you first select the SVG, the default values set are: Full Size, 200x200, 100%, but when you switch to Medium and back to Full Size, the dimension changes to 575x188.
3. The SVG width doesn't stretch to 100% width of the editor when setting dimension to 100%.
4. Without an SVG selected, the controls are practically dead. We can hide settings if the SVG is not selected.

Please watch the video for more details, I have compared it with the core/image block.

PR-80.mp4

Note

PR #79 uses 10up-toolkit whereas this one uses wp-scripts. We need to decide which one to go ahead with and make changes to the other PR accordingly.

[cr0ybot]

I just reviewed this code and it seems to be outputting an <image> tag within an <svg> tag for the front-end block output. The point of #21 was to output an inline SVG, this is just like outputting an <img> tag but with extra steps. The linked SVG will be external and non-interactive.

On top of that, only admins will be able to save a post with this block since it's saving an <svg> tag directly into the content. I proposed a dynamic block here: #21 (comment)

[darylldoyle]

@jeffpaul @faisal-alvi I have to agree with @cr0ybot here. The reason the original pro version of the plugin used a dynamic block, was to get around the issue with the unfiltered_html capability. Especially when it comes to WordPress multisite where only super admins have that capability out of the box.

We're already restricting who can upload in #76 and unless we also want to give those roles the unfiltered_html capability (we don't), then this will become a sticking point of the block.

I suggest we stick to a dynamically rendered block.

Original implementation for reference: https://github.com/10up/wpsvg/blob/develop/gutenberg/class-wpsvg-gutenberg.php#L103-L194

[faisal-alvi]

@cr0ybot @darylldoyle thank you for the feedback, it all makes sense. I will go ahead and tweak the code to make the block dynamically rendered at the front end. I assume that we have to keep the viewbox value as it is and keep whatever we receive from the file_get_contents, and only apply the height and width $attrs to the <svg> image at the front end. Please let me know if this approach is fine.

[cr0ybot]

@faisal-alvi

I assume that we have to keep the viewbox value as it is and keep whatever we receive from the file_get_contents, and only apply the height and width $attrs to the <svg> image at the front end. Please let me know if this approach is fine.

That sounds right to me. Without viewbox the SVG doesn't know where the virtual artboard is. The width and height attributes can change and the viewbox bounds will be fit within that space according to preserveAspectRatio if set (could be a neat feature to control this value too).

[faisal-alvi]

@Sidsector9 thanks for the feedback.

When you first select the SVG, the rendered image dimensions is very small, even when Image size is set to Full Size.

done

When you first select the SVG, the default values set are: Full Size, 200x200, 100%, but when you switch to Medium and back to Full Size, the dimension changes to 575x188.

done

The SVG width doesn't stretch to 100% width of the editor when setting dimension to 100%.

I don't know if that was an issue, but I've checked after the recent changes and we can set the SVG image to cover 100% of the available width.

Without an SVG selected, the controls are practically dead. We can hide settings if the SVG is not selected.

done

[jeffpaul]

@darylldoyle @Sidsector9 any further code review feedback here or is this good to move along to merge/release?

[jeffpaul]

@faisal-alvi note some merge conflicts to get cleaned up here, please and thanks!

[darylldoyle]

LGTM! Nice work 🙂

[ocean90]

Some quick feedback for this new block:

• Why the imageSizes attribute which just blows up the block content. A SVG image only has one size?

   <!-- wp:safe-svg/svg-icon {"svgURL":"https://example.com/content/uploads/2022/07/desktop-tab-icon.svg","type":"medium","alignment":"center","imageID":36100,"imageWidth":300,"imageHeight":300,"dimensionWidth":300,"dimensionHeight":300,"imageSizes":{"full":{"height":48,"width":48,"url":"https://example.com/content/uploads/2022/07/desktop-tab-icon.svg","orientation":"portrait"},"medium":{"height":"300","width":"300","url":"https://example.com/content/uploads/2022/07/desktop-tab-icon.svg","orientation":"portrait"},"thumbnail":{"height":"150","width":"150","url":"https://example.com/content/uploads/2022/07/desktop-tab- icon.svg","orientation":"portrait"}}} /-->

• All pages now load the block stylesheet even if no block is used on the page
• There's a double slash in the URL: https://example.com/content/plugins/safe-svg//dist/safe-svg-block-frontend.css?ver=2.1.0
• init is an action, not a filter

---

In case anyone is looking for disabling the new block:

// Disable Safe SVG block.
add_action(
	'plugins_loaded',
	static function(): void {
		global $safe_svg;

		if ( ! isset( $safe_svg ) ) {
			return;
		}

		remove_action( 'init', [ $safe_svg, 'setup_blocks' ] );
	}
);