Add a spinner style for use in interactive blocks.

[StevenDufresne]

This PR converts the javascript spinner from the google-maps blocks to be used in child themes.

Screenshots

How to test the changes in this Pull Request:

1. Add <span class="wporg-spinner"></span>

[adamwoodnz]

Tried it out and the styles aren't being built. Need to add to source/wp-content/themes/wporg-parent-2021/sass/blocks/_index.scss

[adamwoodnz]

I misunderstood this, and tried to change the color of the spinning bit by putting the span in a paragraph block and changing the text color to orange, which didn't work. If we reversed this that would work, but would default to charcoal most of the time. Maybe that's ok, in allowing us to have editor customisation.

Use case would be on a page like SotW, where we show the map of watch parties and there is usually a custom link color.

[StevenDufresne]

If we reversed this that would work, but would default to charcoal most of the time.

I don't know if that's possible seeing that currentColor would always be set or inherited so we would never get the blueberry coloring unless explicitly set.

We could do something like this though:

--spinner-color: var(--wp--custom--wporg-spinner--color, var(--wp--preset--color--blueberry-1, currentColor));

We could then set --wp--custom--wporg-spinner--color to give it a specific color.

[ryelle]

--spinner-color: var(--wp--preset--color--blueberry-1, currentColor);

Since this CSS exists in the parent theme, --wp--preset--color--blueberry-1 will always exist. So it will never use currentColor.

Maybe that's ok, in allowing us to have editor customisation.

Do we need editor customization? This seems like a helper class we might use in another block, where we could override with custom properties in the containing block. That said, I would change it to populate the custom properties from theme.json, for consistency with other block settings.

"settings": {
	"custom": {
		"wporg-spinner": {
			"color": {
				"background": "var(--wp--preset--color--black-opacity-15)",
				"stroke": "var(--wp--preset--color--blueberry-1)"
			}
		}

Which would generate --wp--custom--wporg-spinner--color--background & --wp--custom--wporg-spinner--color--stroke, so you don't need to set them in the CSS either.

[ryelle]

In the past I've found it simple enough to just include the CSS for a spinner in the blocks using it (example on patterns, example on themes). That's not a reason not to do this, but it is a slightly different approach to the spinner.

Anyway, for this PR, I saw a few stylelint issues, I've noted them here. To run the stylelint checks locally, you can use yarn workspace wporg-parent-2021 lint:css

[ryelle]

Minor, but can you move this file to /base/? /blocks/* should be for real blocks.

[ryelle]

--spinner-color: var(--wp--preset--color--blueberry-1, currentColor);

Since this CSS exists in the parent theme, --wp--preset--color--blueberry-1 will always exist. So it will never use currentColor.

Maybe that's ok, in allowing us to have editor customisation.

Do we need editor customization? This seems like a helper class we might use in another block, where we could override with custom properties in the containing block. That said, I would change it to populate the custom properties from theme.json, for consistency with other block settings.

"settings": {
	"custom": {
		"wporg-spinner": {
			"color": {
				"background": "var(--wp--preset--color--black-opacity-15)",
				"stroke": "var(--wp--preset--color--blueberry-1)"
			}
		}

Which would generate --wp--custom--wporg-spinner--color--background & --wp--custom--wporg-spinner--color--stroke, so you don't need to set them in the CSS either.

[adamwoodnz]

To run the stylelint checks locally, you can use yarn workspace wporg-parent-2021 lint:css

I noticed these using the stylelint extension for VSCode too

Stale