Add Marquee and Word Art Blocks

[brentjett]

This is the initial implementation for the marquee and word art blocks. Still plenty to fix and add here.

Known issues

• Marquee doesn't show a cursor upon initially adding to the page.
• Word Art block doesn't set the default style initially
• Backspace to delete block isn't happening for some reason.

More Controls Intended

• Font Size Control
• Tag Control
• Direction Control (marquee)
• Speed Control (marquee)
• More Word Art styles

I was originally going to implement the marquee with a custom web component (using LitElement) but babel is tripping over web components and I haven't figured out why yet.

[pento]

Nice work, @brentjett!

Did you investigate adding these as extra options to core blocks? There are a bunch of filters you can use to add the appropriate InspectorControls, store additional attributes, and modify the saved HTML. This way, it would be possible to have marquee-ed Word Art, which feels extremely Geocities appropriate. 😁

[brentjett]

Thanks @pento! I would love it not to have to add additional blocks for these. I originally created the two word art styles using block style variations but the issue i'm running into is needing some additional markup. The marquee needs to print the text twice to make the effect happen and the word art needs two wrapping elements for the styles. I looked at Word Art-ing the Heading block initially, but there's only the one element. The button block has two elements but the structure is way different in the editor vs. outside. If there's a way to modify the markup structure for built-in blocks then maybe that is possible.

[pento]

Modifying the save() markup is pretty straightforward, using the blocks.getSaveElement filter.

Modifying the edit() markup is a little trickier: the editor.BlockEditor is the way to go, and not too trickier compared to what you've already done.

Here's a little example I hacked together, which hopefully makes sense: 🙂

const addMarqueeOption = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		const { name, className, isSelected } = props;
		const { content, placeholder } = props.attributes;
		if ( 'core/paragraph' !== name ) {
			return <BlockEdit { ...props } />;
		}

		return (
			<Fragment>
				<span className="gc-marquee-content">
					<BlockEdit { ...props } />
				</span>
				{ ! isSelected &&
				<span className="gc-marquee-content">
					<RichText
						identifier="content"
						value={ content }
						tagName="div"
						className={ className }
						placeholder={ placeholder || __( 'Write Something...' ) }
					/>
				</span> }
				<InspectorControls>
					<PanelBody title={ __( 'Marquee Settings', 'geocities-blocks' ) }>
						{
							// Add settings.
						}
					</PanelBody>
				</InspectorControls>
			</Fragment>
		);
	};
}, 'withInspectorControl' );

addFilter(
	'editor.BlockEdit',
	'geocities/add-marquee-option',
	addMarqueeOption
);

And to store settings in the block attributes, you can use the blocks.getBlockAttributes filter.

[brentjett]

Oh cool! That's very helpful! I'll see where it leads.

[brentjett]

Thanks to @pento pointing me in the right direction, the Heading block now supports marquee, and the marquee block is no more. Shouldn't be much trouble to fold word art into core/heading as well.

Additional marquee settings might include:

• Speed
• Direction

Semantically this is a little icky, cause there are actually two identical headings in the DOM. Any ideas there are welcome.