Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining the page card component

Browse Source
This commit is contained in:
Antoine M 2024-07-17 11:53:51 +02:00
parent fd9a7ee1c2
commit 4e52c87fd1
11 changed files with 120 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/page-card/build/index.asset.php
View File

@ -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');

13
blocks/page-card/build/index.css
View File

@ -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*/

1
blocks/page-card/build/index.css.map
View File

@ -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":""}

84
blocks/page-card/build/index.js
View File

@ -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":

2
blocks/page-card/build/index.js.map
View File

File diff suppressed because one or more lines are too long

1
blocks/page-card/build/render.php
View File

@ -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="">

16
blocks/page-card/build/style-index.css
View File

@ -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*/

1
blocks/page-card/build/style-index.css.map
View File

@ -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":""}

27
blocks/page-card/src/edit.js
View File

@ -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>
<p>{page.excerpt?.raw}</p>
<h3 className="homegrade-blocks-page-card__title">
{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>

12
blocks/page-card/src/img/arrow-right-circle.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

1
blocks/page-card/src/render.php
View File

@ -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="">