Fix starscape when plugin isn't active (#341)

blocks/starscape/src/deprecated/index.js

@@ -1,6 +1,7 @@
 import v1 from './v1';
+import v2 from './v2';
 
 // Deprecations should run in reverse chronological order. Most probable
 // deprecations to run are the most recent. This ordering makes the process
 // a little more performant.
-export default [ v1 ];
+export default [ v2, v1 ];

blocks/starscape/src/deprecated/v2/attributes.js

@@ -0,0 +1,55 @@
+export default {
+	align: {
+		type: 'string',
+		default: 'full',
+	},
+	color: {
+		type: 'string',
+		default: '#fff',
+	},
+	background: {
+		type: 'string',
+		// Default #000 in style.scss.
+	},
+	intensity: {
+		type: 'number',
+		default: 80,
+	},
+	density: {
+		type: 'number',
+		default: 20,
+	},
+	speed: {
+		type: 'number',
+		default: 20,
+	},
+	areaWidth: {
+		type: 'integer',
+		default: 1920,
+	},
+	areaHeight: {
+		type: 'integer',
+		default: 1080,
+	},
+	minHeight: {
+		type: 'string',
+		// Default 430px in style.scss.
+	},
+	layout: {
+		type: 'object',
+		default: {
+			type: 'constrained',
+		},
+	},
+	tagName: {
+		type: 'string',
+		default: 'div',
+	},
+	templateLock: {
+		type: [ 'string', 'boolean' ],
+		enum: [ 'all', 'insert', 'contentOnly', false ],
+	},
+	allowedBlocks: {
+		type: 'array',
+	},
+};

blocks/starscape/src/deprecated/v2/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import save from './save';
+
+export default {
+	supports: {
+		className: true,
+		align: [ 'wide', 'full' ],
+		color: {
+			heading: true,
+			text: true,
+			link: true,
+			background: false,
+			gradients: false,
+		},
+		html: false,
+		layout: {
+			allowJustification: false,
+		},
+		spacing: {
+			padding: true,
+			margin: [ 'top', 'bottom' ],
+			blockGap: true,
+			__experimentalDefaultControls: {
+				padding: true,
+				blockGap: true,
+			},
+		},
+	},
+	attributes,
+	save,
+};

blocks/starscape/src/deprecated/v2/save.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Starscape from './starscape';
+import { genStars, genAnimations } from './utils';
+
+function StarscapeSave( { attributes } ) {
+	const {
+		background,
+		color,
+		intensity,
+		density,
+		speed,
+		minHeight,
+		areaWidth,
+		areaHeight,
+		tagName,
+	} = attributes;
+
+	const starStyles = genStars( { color, density, areaWidth, areaHeight } );
+	const animationStyles = genAnimations( { speed } );
+
+	const blockProps = useBlockProps.save( {
+		style: { background, minHeight },
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps.save( {
+		className: 'wp-block-a8c-starscape__inner',
+	} );
+
+	return (
+		<Starscape
+			as={ tagName }
+			starStyles={ starStyles }
+			animationStyles={ animationStyles }
+			intensity={ intensity }
+			{ ...blockProps }
+		>
+			<div { ...innerBlocksProps } />
+		</Starscape>
+	);
+}
+
+export default StarscapeSave;

blocks/starscape/src/deprecated/v2/starscape.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * @typedef {Object} StarscapeProps
+ * @property {string}    [as]            HTML tag name.
+ * @property {Object}    starStyles      Styles for the stars.
+ * @property {Object}    animationStyles Styles for the animation.
+ * @property {number}    intensity       Intensity of the stars.
+ * @property {WPElement} [children]      Children of the component.
+ */
+
+/**
+ * Starscape background effect component.
+ *
+ * @param {StarscapeProps} props Starscape props
+ * @param {Ref}            ref   React ref
+ *
+ * @returns {WPElement} Starscape component
+ */
+const Starscape = (
+	{
+		as: Component = 'div',
+		starStyles,
+		animationStyles,
+		intensity,
+		children,
+		...props
+	},
+	ref
+) => {
+	return (
+		<Component ref={ ref } { ...props }>
+			{ [ 0, 1, 2 ].map( ( i ) => (
+				<div
+					key={ i }
+					className="wp-block-a8c-starscape__stars"
+					style={ {
+						opacity: intensity / 100,
+						...starStyles[ i ],
+						...animationStyles[ i ],
+					} }
+				/>
+			) ) }
+			{ children }
+		</Component>
+	);
+};
+
+export default forwardRef( Starscape );