Merge pull request #78 from a8cteam51/fix/76-stretchy-text-block-not-resizing

Stretchy-type: Fix front-end view

Author: tommusrhodus

stretchy-type/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.2  (2025-08-02)
+
+- Fixed front-end class not applying.
+
 ## 0.1.1 (2025-08-02)
 
 ### Added

stretchy-type/classes/class-wpsp-blocks-self-update.php

@@ -31,7 +31,7 @@ public static function get_instance() {
 	 * Initialize WordPress hooks
 	 */
 	public function hooks() {
-		add_filter( 'update_plugins_opsoasis-develop.mystagingwebsite.com', array( $this, 'self_update' ), 10, 3 );
+		add_filter( 'update_plugins_opsoasis.wpspecialprojects.com', array( $this, 'self_update' ), 10, 3 );
 	}
 
 	/**
@@ -53,7 +53,7 @@ public function self_update( $update, array $plugin_data, string $plugin_file )
 
 		// Ask opsoasis.mystagingwebsite.com if there's an update.
 		$response = wp_remote_get(
-			'https://opsoasis-develop.mystagingwebsite.com/wp-json/opsoasis-blocks-version-manager/v1/update-check',
+			'https://opsoasis.wpspecialprojects.com/wp-json/opsoasis-blocks-version-manager/v1/update-check',
 			array(
 				'body' => array(
 					'plugin'  => $plugin_filename_parts[0],
@@ -77,4 +77,4 @@ public function self_update( $update, array $plugin_data, string $plugin_file )
 			'package' => $updated_array['package_url'],
 		);
 	}
-}
+}

stretchy-type/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "stretchy-type",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "A block that expands to fill the width of its container.",
 	"author": "Studio 51",
 	"license": "GPL-2.0-or-later",

stretchy-type/package.json

@@ -2,12 +2,11 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "wpsp/stretchy-type",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"title": "Stretchy Type",
 	"category": "theme",
 	"icon": "text",
 	"description": "Text that expands to fill the width of its container.",
-	"example": {},
 	"textdomain": "stretchy-type",
 	"attributes": {
 		"content": {
@@ -22,6 +21,5 @@
 	"editorScript": "file:./index.js",
 	"style": "file:./style-index.css",
 	"editorStyle": "file:./style-index.css",
-	"viewScript": "file:./view.js",
-	"render": "file:./render.php"
+	"viewScript": "file:./view.js"
 }

stretchy-type/src/block.json

@@ -1,47 +1,47 @@
-import { RichText, useBlockProps } from "@wordpress/block-editor";
-import { useRef, useEffect } from "@wordpress/element";
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { useRef, useEffect } from '@wordpress/element';
 
-export default function Edit({ attributes, setAttributes }) {
+export default function Edit( { attributes, setAttributes } ) {
 	const { content, viewBox } = attributes;
-	const blockProps = useBlockProps(viewBox ? { viewBox } : {});
+	const blockProps = useBlockProps( viewBox ? { viewBox } : {} );
 	const wrapperRef = useRef();
 	const richTextRef = useRef();
 
-	useEffect(() => {
-		const observer = new window.ResizeObserver(() => {
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
 			const { offsetWidth, offsetHeight } = wrapperRef.current;
-			setAttributes({
-				viewBox: `0 0 ${offsetWidth} ${offsetHeight}`,
-			});
+			setAttributes( {
+				viewBox: `0 0 ${ offsetWidth } ${ offsetHeight }`,
+			} );
 			// This hack is required to prevent RichText to overwrite `white-space`.
-			if (richTextRef.current) {
-				richTextRef.current.style.whiteSpace = "nowrap";
+			if ( richTextRef.current ) {
+				richTextRef.current.style.whiteSpace = 'nowrap';
 			}
-		});
-		observer.observe(wrapperRef.current);
+		} );
+		observer.observe( wrapperRef.current );
 
 		return () => {
 			observer.disconnect();
 		};
-	}, []);
+	}, [] );
 
-	const onChange = (nextContent) => {
-		setAttributes({ content: nextContent });
+	const onChange = ( nextContent ) => {
+		setAttributes( { content: nextContent } );
 	};
 
 	return (
-		<svg {...blockProps}>
+		<svg { ...blockProps }>
 			<foreignObject x="0" y="0" width="100%" height="100%">
-				<span ref={wrapperRef}>
+				<span ref={ wrapperRef }>
 					<RichText
 						disableLineBreaks
 						tagName="span"
 						identifier="content"
 						placeholder="Stretchy text goes here"
 						preserveWhiteSpace
-						value={content}
-						onChange={onChange}
-						ref={richTextRef}
+						value={ content }
+						onChange={ onChange }
+						ref={ richTextRef }
 					/>
 				</span>
 			</foreignObject>

stretchy-type/src/edit.js

@@ -2,19 +2,19 @@ import {
 	createBlock,
 	getBlockType,
 	registerBlockType,
-} from "@wordpress/blocks";
-import { subscribe } from "@wordpress/data";
-import "./style.scss";
-import Edit from "./edit";
-import save from "./save";
-import metadata from "./block.json";
+} from '@wordpress/blocks';
+import { subscribe } from '@wordpress/data';
+import './style.scss';
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
 
 // Subscribe is needed to wait for the core/paragraph block to be registered.
-const unsubscribe = subscribe(() => {
-	const paragraphBlockType = getBlockType("core/paragraph");
-	if (paragraphBlockType) {
+const unsubscribe = subscribe( () => {
+	const paragraphBlockType = getBlockType( 'core/paragraph' );
+	if ( paragraphBlockType ) {
 		unsubscribe();
-		registerBlockType(metadata.name, {
+		registerBlockType( metadata.name, {
 			edit: Edit,
 			save,
 			supports: {
@@ -27,27 +27,27 @@ const unsubscribe = subscribe(() => {
 			transforms: {
 				from: [
 					{
-						type: "block",
-						blocks: ["core/paragraph", "core/heading"],
-						transform: ({ content }) => {
-							return createBlock(metadata.name, {
+						type: 'block',
+						blocks: [ 'core/paragraph', 'core/heading' ],
+						transform: ( { content } ) => {
+							return createBlock( metadata.name, {
 								content,
-							});
+							} );
 						},
 					},
 				],
 				to: [
 					{
-						type: "block",
-						blocks: ["core/paragraph"],
-						transform: ({ content }) => {
-							return createBlock("core/paragraph", {
+						type: 'block',
+						blocks: [ 'core/paragraph' ],
+						transform: ( { content } ) => {
+							return createBlock( 'core/paragraph', {
 								content,
-							});
+							} );
 						},
 					},
 				],
 			},
-		});
+		} );
 	}
-});
+} );

stretchy-type/src/index.js

@@ -19,7 +19,11 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  */
 export default function save( { attributes } ) {
 	const { content, viewBox } = attributes;
-	const blockProps = useBlockProps.save( viewBox ? { viewBox } : {} );
+	const blockProps = useBlockProps.save( {
+		viewBox: viewBox ? viewBox : null,
+		className: 'wp-block-wpsp-stretchy-type',
+	} );
+
 	return (
 		<svg { ...blockProps }>
 			<foreignObject x="0" y="0" width="100%" height="100%">

stretchy-type/src/save.js

@@ -4,13 +4,14 @@
  * Description:       A block that expands to fill the width of its container.
  * Requires at least: 6.1
  * Requires PHP:      7.0
- * Version:           0.1.1
+ * Version:           0.1.2
  * Author:            Studio 51
  * Author URI:        https://wpspecialprojects.wordpress.com/
  * Update URI:        https://opsoasis.wpspecialprojects.com/stretchy-type/
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain:       stretchy-type
+ * Update URI:        https://opsoasis.wpspecialprojects.com/
  *
  * @package Wpsp
  */