refining the page card component

blocks/page-card/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '1c6a4d9d6b4b9015b004');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '741e30b111a2465ca4f5');

blocks/page-card/build/index.css

@@ -1,13 +0,0 @@
-/*!****************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
-  \****************************************************************************************************************************************************************************************************************************************************/
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-test {
-  border: 1px dotted #f00;
-}
-
-/*# sourceMappingURL=index.css.map*/

blocks/page-card/build/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://test/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-test {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}

blocks/page-card/build/index.js

@@ -2,6 +2,60 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./src/img/arrow-right-circle.svg":
+/*!****************************************!*\
+  !*** ./src/img/arrow-right-circle.svg ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ReactComponent: () => (/* binding */ SvgArrowRightCircle),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgArrowRightCircle = function SvgArrowRightCircle(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 47,
+    height: 47
+  }, props), _g || (_g = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    "data-name": "Groupe 3134",
+    fill: "none",
+    stroke: "#000",
+    strokeWidth: 2
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    "data-name": "Groupe 1270",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    "data-name": "Ligne 6",
+    d: "M13.929 23.15H33.75"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    "data-name": "Trac\\xE9 162",
+    d: "m27.419 29.478 6.33-6.33-6.33-6.33"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    "data-name": "Ellipse 202"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
+    cx: 23.5,
+    cy: 23.5,
+    r: 23.5,
+    stroke: "none"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
+    cx: 23.5,
+    cy: 23.5,
+    r: 22.5
+  })))));
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NyIgaGVpZ2h0PSI0NyIgdmlld0JveD0iMCAwIDQ3IDQ3Ij4KICA8ZyBpZD0iR3JvdXBlXzMxMzQiIGRhdGEtbmFtZT0iR3JvdXBlIDMxMzQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNjAuODQyIC00NTkpIj4KICAgIDxnIGlkPSJHcm91cGVfMTI3MCIgZGF0YS1uYW1lPSJHcm91cGUgMTI3MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0Ljc3MSA0NzUuODIpIj4KICAgICAgPGxpbmUgaWQ9IkxpZ25lXzYiIGRhdGEtbmFtZT0iTGlnbmUgNiIgeDI9IjE5LjgyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2LjMzKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cGF0aCBpZD0iVHJhY8OpXzE2MiIgZGF0YS1uYW1lPSJUcmFjw6kgMTYyIiBkPSJNMTA0LjgxOCw4Mi44bDYuMzMtNi4zMy02LjMzLTYuMzMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05MS4zMjggLTcwLjE0MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDwvZz4KICAgIDxnIGlkPSJFbGxpcHNlXzIwMiIgZGF0YS1uYW1lPSJFbGxpcHNlIDIwMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjYwLjg0MiA0NTkpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgIDxjaXJjbGUgY3g9IjIzLjUiIGN5PSIyMy41IiByPSIyMy41IiBzdHJva2U9Im5vbmUiLz4KICAgICAgPGNpcmNsZSBjeD0iMjMuNSIgY3k9IjIzLjUiIHI9IjIyLjUiIGZpbGw9Im5vbmUiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
+
+/***/ }),
+
 /***/ "./src/OptionsSelectControl.js":
 /*!*************************************!*\
   !*** ./src/OptionsSelectControl.js ***!
@@ -137,6 +191,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
 /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
+/* harmony import */ var _img_arrow_right_circle_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./img/arrow-right-circle.svg */ "./src/img/arrow-right-circle.svg");
+
 
 
 
@@ -171,10 +227,24 @@ function Edit({
       className: `homegrade-blocks-page-card`
     })
   }, page && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
-    class: "page-card__icon",
+    className: "homegrade-blocks-page-card__icon",
     src: pageIconUrl,
     alt: ""
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", null, page.title.rendered), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, page.excerpt?.raw))));
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
+    className: "homegrade-blocks-page-card__title"
+  }, page.title.rendered), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
+    className: "homegrade-blocks-page-card__excerpt"
+  }, page.excerpt?.raw), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    class: "homegrade-blocks-page-card__cta",
+    href: "<?php echo $relatedPostUrl ?>",
+    target: "_self",
+    rel: "noopener"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "En savoir plus"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    class: "cta_arrow_button"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: _img_arrow_right_circle_svg__WEBPACK_IMPORTED_MODULE_6__["default"],
+    alt: ""
+  }))))));
 }
 
 /***/ }),
@@ -293,6 +363,16 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+  !*** external "React" ***!
+  \************************/
+/***/ ((module) => {
+
+module.exports = window["React"];
+
 /***/ }),
 
 /***/ "@wordpress/block-editor":

blocks/page-card/build/render.php

@@ -7,7 +7,6 @@ $relatedPostUrl = get_permalink($relatedPostId) ?? null;
 $postIcon =  get_field("step_icon", $relatedPostId) ?? null;
 $excerpt = get_the_excerpt($relatedPostId) ?? null;
 
-
 ?>
 <a class="homegrade-blocks-page-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
 	<img class="homegrade-blocks-page-card__icon" src="<?php echo $postIcon['url'] ?>" alt="">

blocks/page-card/build/style-index.css

@@ -1,16 +0,0 @@
-/*!***************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
-  \***************************************************************************************************************************************************************************************************************************************************/
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-test {
-  background-color: #21759b;
-  color: #fff;
-  padding: 2px;
-}
-
-/*# sourceMappingURL=style-index.css.map*/

blocks/page-card/build/style-index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://test/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-test {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

blocks/page-card/src/edit.js

@@ -3,6 +3,7 @@ import { useBlockProps } from "@wordpress/block-editor";
 import OptionsSelectControl from "./OptionsSelectControl";
 import { useSelect } from "@wordpress/data";
 import "./editor.scss";
+import arrow from "./img/arrow-right-circle.svg";
 
 export default function Edit({ attributes, setAttributes }) {
 	const { relatedPostId, postType } = attributes;
@@ -31,6 +32,7 @@ export default function Edit({ attributes, setAttributes }) {
 				setAttributes={setAttributes}
 				postType={postType}
 			/>
+
 			<div
 				{...useBlockProps({
 					className: `homegrade-blocks-page-card`,
@@ -38,10 +40,29 @@ export default function Edit({ attributes, setAttributes }) {
 			>
 				{page && (
 					<>
-						<img class="page-card__icon" src={pageIconUrl} alt="" />
+						<img
+							className="homegrade-blocks-page-card__icon"
+							src={pageIconUrl}
+							alt=""
+						/>
 
-						<h3>{page.title.rendered}</h3>
+						<h3 className="homegrade-blocks-page-card__title">
-						<p>{page.excerpt?.raw}</p>
+							{page.title.rendered}
+						</h3>
+						<p className="homegrade-blocks-page-card__excerpt">
+							{page.excerpt?.raw}
+						</p>
+						<div
+							class="homegrade-blocks-page-card__cta"
+							href="<?php echo $relatedPostUrl ?>"
+							target="_self"
+							rel="noopener"
+						>
+							<p>En savoir plus</p>
+							<div class="cta_arrow_button">
+								<img src={arrow} alt="" />
+							</div>
+						</div>
 					</>
 				)}
 			</div>

blocks/page-card/src/img/arrow-right-circle.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
+  <g id="Groupe_3134" data-name="Groupe 3134" transform="translate(-260.842 -459)">
+    <g id="Groupe_1270" data-name="Groupe 1270" transform="translate(274.771 475.82)">
+      <line id="Ligne_6" data-name="Ligne 6" x2="19.821" transform="translate(0 6.33)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Tracé_162" data-name="Tracé 162" d="M104.818,82.8l6.33-6.33-6.33-6.33" transform="translate(-91.328 -70.142)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+    <g id="Ellipse_202" data-name="Ellipse 202" transform="translate(260.842 459)" fill="none" stroke="#000" stroke-width="2">
+      <circle cx="23.5" cy="23.5" r="23.5" stroke="none"/>
+      <circle cx="23.5" cy="23.5" r="22.5" fill="none"/>
+    </g>
+  </g>
+</svg>

blocks/page-card/src/render.php

@@ -7,7 +7,6 @@ $relatedPostUrl = get_permalink($relatedPostId) ?? null;
 $postIcon =  get_field("step_icon", $relatedPostId) ?? null;
 $excerpt = get_the_excerpt($relatedPostId) ?? null;
 
-
 ?>
 <a class="homegrade-blocks-page-card" href="<?php echo $relatedPostUrl ?>" target="<?php echo $target ?>">
 	<img class="homegrade-blocks-page-card__icon" src="<?php echo $postIcon['url'] ?>" alt="">