FEATURE Refactoring block to handle render.php and Handling title trhought Richtext component

plugins/carhop-blocks/blocks/subscribe-infolettre/build/blocks-manifest.php

@@ -20,6 +20,13 @@ return array(
 		'editorScript' => 'file:./index.js',
 		'editorStyle' => 'file:./index.css',
 		'style' => 'file:./style-index.css',
-		'viewScript' => 'file:./view.js'
+		'viewScript' => 'file:./view.js',
+		'render' => 'file:./render.php',
+		'attributes' => array(
+			'title' => array(
+				'type' => 'string',
+				'default' => 'Restez connectés à l’histoire sociale'
+			)
+		)
 	)
 );

plugins/carhop-blocks/blocks/subscribe-infolettre/build/subscribe-infolettre/block.json

@@ -15,5 +15,12 @@
   "editorScript": "file:./index.js",
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
-  "viewScript": "file:./view.js"
+  "viewScript": "file:./view.js",
+  "render": "file:./render.php",
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": "Restez connectés à l’histoire sociale"
+    }
+  }
 }

plugins/carhop-blocks/blocks/subscribe-infolettre/build/subscribe-infolettre/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'f4dd64da00366e8af217');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '2706590dc5f7986977d7');

plugins/carhop-blocks/blocks/subscribe-infolettre/build/subscribe-infolettre/index.js

@@ -8,7 +8,7 @@
   \*********************************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/subscribe-infolettre","version":"0.1.0","title":"Infolettre","category":"carhop-blocks","icon":"smiley","description":"Infolettre","example":{},"supports":{"html":false},"textdomain":"subscribe-infolettre","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js"}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/subscribe-infolettre","version":"0.1.0","title":"Infolettre","category":"carhop-blocks","icon":"smiley","description":"Infolettre","example":{},"supports":{"html":false},"textdomain":"subscribe-infolettre","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"title":{"type":"string","default":"Restez connectés à l’histoire sociale"}}}');
 
 /***/ }),
 
@@ -33,7 +33,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function Edit() {
+function Edit({
+  attributes,
+  setAttributes
+}) {
+  const {
+    title
+  } = attributes;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("section", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
       className: "subscribe-infolettre"
@@ -45,12 +51,25 @@ function Edit() {
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("p", {
           className: "block-title",
           children: "infolettre"
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText, {
+          tagName: "h2",
+          className: "subscribe-infolettre__title",
+          placeholder: "Description",
+          value: title,
+          onChange: value => setAttributes({
+            title: value
+          })
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
-          template: [["core/heading", {
+          template: [
-            className: "subscribe-infolettre__title",
+          // [
-            placeholder: "Titre",
+          // 	"core/heading",
-            content: "Un titre précis "
+          // 	{
-          }], ["core/paragraph", {
+          // 		className: "subscribe-infolettre__title",
+          // 		placeholder: "Titre",
+          // 		content: "Un titre précis ",
+          // 	},
+          // ],
+          ["core/paragraph", {
             className: "subscribe-infolettre__description",
             placeholder: "Description",
             content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. "
@@ -133,36 +152,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function save() {
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("section", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {});
-    ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: "subscribe-infolettre"
-    }),
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
-      className: "subscribe-infolettre__inner",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
-        className: "subscribe-infolettre__content",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p", {
-          className: "block-title",
-          children: "infolettre"
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})]
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
-        className: "subscribe-infolettre__form",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("form", {
-          action: "",
-          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("input", {
-            type: "text",
-            placeholder: "Nom"
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("input", {
-            type: "email",
-            placeholder: "Adresse email"
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("button", {
-            type: "submit",
-            children: "S'abonner"
-          })]
-        })
-      })]
-    })
-  });
 }
 
 /***/ }),

plugins/carhop-blocks/blocks/subscribe-infolettre/build/subscribe-infolettre/render.php

@@ -0,0 +1,24 @@
+<?php
+$wrapper_attributes = get_block_wrapper_attributes(['class' => 'subscribe-infolettre']);
+$title = $attributes['title'] ?? null;
+?>
+
+<section <?php echo $wrapper_attributes; ?>>
+	<div class="subscribe-infolettre__inner">
+		<div class="subscribe-infolettre__content">
+			<p class="block-title">infolettre</p>
+			<?php if ($title) : ?>
+				<h2 class="subscribe-infolettre__title"><?php echo $title; ?></h2>
+			<?php endif; ?>
+			<?php echo $content; ?>
+		</div>
+
+		<div class="subscribe-infolettre__form">
+			<form action="">
+				<input type="text" placeholder="Nom" />
+				<input type="email" placeholder="Adresse email" />
+				<button type="submit">S'abonner</button>
+			</form>
+		</div>
+	</div>
+</section>

plugins/carhop-blocks/blocks/subscribe-infolettre/build/subscribe-infolettre/view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"subscribe-infolettre/view.js","mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACAA,OAAO,CAACC,GAAG,CAAE,6DAA8D,CAAC;AAC5E,8B","sources":["webpack://subscribe-infolettre/./src/subscribe-infolettre/view.js"],"sourcesContent":["/**\n * Use this file for JavaScript code that you want to run in the front-end\n * on posts/pages that contain this block.\n *\n * When this file is defined as the value of the `viewScript` property\n * in `block.json` it will be enqueued on the front end of the site.\n *\n * Example:\n *\n * ```js\n * {\n *   \"viewScript\": \"file:./view.js\"\n * }\n * ```\n *\n * If you're not making any changes to this file because your project doesn't need any\n * JavaScript running in the front-end, then you should delete this file and remove\n * the `viewScript` property from `block.json`.\n *\n * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script\n */\n\n/* eslint-disable no-console */\nconsole.log( 'Hello World! (from create-block-subscribe-infolettre block)' );\n/* eslint-enable no-console */\n"],"names":["console","log"],"sourceRoot":""}

plugins/carhop-blocks/blocks/subscribe-infolettre/src/subscribe-infolettre/block.json

@@ -15,5 +15,12 @@
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
-	"viewScript": "file:./view.js"
+	"viewScript": "file:./view.js",
+	"render": "file:./render.php",
+	"attributes": {
+		"title": {
+			"type": "string",
+			"default": "Restez connectés à l’histoire sociale"
+		}
+	}
 }

plugins/carhop-blocks/blocks/subscribe-infolettre/src/subscribe-infolettre/edit.js

@@ -1,8 +1,9 @@
 import { __ } from "@wordpress/i18n";
-import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
+import { useBlockProps, InnerBlocks, RichText } from "@wordpress/block-editor";
 import "./editor.scss";
 
-export default function Edit() {
+export default function Edit({ attributes, setAttributes }) {
+	const { title } = attributes;
 	return (
 		<section
 			{...useBlockProps({
@@ -12,16 +13,23 @@ export default function Edit() {
 			<div className="subscribe-infolettre__inner">
 				<div className="subscribe-infolettre__content">
 					<p className="block-title">infolettre</p>
+					<RichText
+						tagName="h2"
+						className="subscribe-infolettre__title"
+						placeholder="Description"
+						value={title}
+						onChange={(value) => setAttributes({ title: value })}
+					/>
 					<InnerBlocks
 						template={[
-							[
+							// [
-								"core/heading",
+							// 	"core/heading",
-								{
+							// 	{
-									className: "subscribe-infolettre__title",
+							// 		className: "subscribe-infolettre__title",
-									placeholder: "Titre",
+							// 		placeholder: "Titre",
-									content: "Un titre précis ",
+							// 		content: "Un titre précis ",
-								},
+							// 	},
-							],
+							// ],
 							[
 								"core/paragraph",
 								{

plugins/carhop-blocks/blocks/subscribe-infolettre/src/subscribe-infolettre/render.php

@@ -0,0 +1,24 @@
+<?php
+$wrapper_attributes = get_block_wrapper_attributes(['class' => 'subscribe-infolettre']);
+$title = $attributes['title'] ?? null;
+?>
+
+<section <?php echo $wrapper_attributes; ?>>
+	<div class="subscribe-infolettre__inner">
+		<div class="subscribe-infolettre__content">
+			<p class="block-title">infolettre</p>
+			<?php if ($title) : ?>
+				<h2 class="subscribe-infolettre__title"><?php echo $title; ?></h2>
+			<?php endif; ?>
+			<?php echo $content; ?>
+		</div>
+
+		<div class="subscribe-infolettre__form">
+			<form action="">
+				<input type="text" placeholder="Nom" />
+				<input type="email" placeholder="Adresse email" />
+				<button type="submit">S'abonner</button>
+			</form>
+		</div>
+	</div>
+</section>

plugins/carhop-blocks/blocks/subscribe-infolettre/src/subscribe-infolettre/save.js

@@ -1,26 +1,5 @@
-import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
+import { InnerBlocks } from "@wordpress/block-editor";
 
 export default function save() {
-	return (
+	return <InnerBlocks.Content />;
-		<section
-			{...useBlockProps.save({
-				className: "subscribe-infolettre",
-			})}
-		>
-			<div className="subscribe-infolettre__inner">
-				<div className="subscribe-infolettre__content">
-					<p className="block-title">infolettre</p>
-					<InnerBlocks.Content />
-				</div>
-
-				<div className="subscribe-infolettre__form">
-					<form action="">
-						<input type="text" placeholder="Nom" />
-						<input type="email" placeholder="Adresse email" />
-						<button type="submit">S'abonner</button>
-					</form>
-				</div>
-			</div>
-		</section>
-	);
 }