Skip to content
This repository was archived by the owner on Oct 4, 2022. It is now read-only.

P2 686 render svg icon #1135

Merged
merged 5 commits into from
Apr 1, 2021
Merged

P2 686 render svg icon #1135

merged 5 commits into from
Apr 1, 2021

Conversation

andizer
Copy link
Contributor

@andizer andizer commented Mar 31, 2021

Summary

This PR can be summarized in the following changelog entry:

  • [@yoast/schema-blocks] When the icon contains a svg string just convert it to an icon element.

Relevant technical choices:

Test instructions

This PR can be tested by following these steps:

Impact check

  • This PR affects the following parts of the plugin, which may require extra testing:
    *

UI changes

  • This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Quality assurance

  • I have tested this code to the best of my abilities
  • I have added unittests to verify the code works as intended

Fixes #

@andizer andizer added innovation changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog labels Mar 31, 2021
Copy link
Contributor

@hansjovis hansjovis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple of remarks.

@@ -87,6 +93,23 @@ export default class BlockDefinition extends Definition {

logger.debug( "registering block " + name );

if ( configuration.icon && typeof configuration.icon === "string" && configuration.icon.includes( "<svg" ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps startsWith is a bit more robust for detecting valid svg images:

Suggested change
if ( configuration.icon && typeof configuration.icon === "string" && configuration.icon.includes( "<svg" ) ) {
if ( configuration.icon && typeof configuration.icon === "string" && configuration.icon.startsWith( "<svg" ) ) {

Comment on lines 97 to 110
configuration.icon = createElement(
BlockIcon,
{
icon: createElement(
"span",
{
className: "yoast-schema-blocks-icon",
dangerouslySetInnerHTML: {
__html: configuration.icon,
},
},
),
},
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be improved by using JSX:

Suggested change
configuration.icon = createElement(
BlockIcon,
{
icon: createElement(
"span",
{
className: "yoast-schema-blocks-icon",
dangerouslySetInnerHTML: {
__html: configuration.icon,
},
},
),
},
);
const icon = <span className="yoast-schema-blocks-icon" dangerouslySetInnerHTML= { { __html: configuration.icon } } />;
configuration.icon = <BlockIcon icon={ icon }/>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And/or it could be made into a separate private method.

@increddibelly increddibelly merged commit a4fc1ce into develop Apr 1, 2021
@increddibelly increddibelly deleted the P2-686-render-svg-icon branch April 1, 2021 14:32
@increddibelly increddibelly added this to the 16.2 milestone Apr 6, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog innovation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants