FEATURE Introducing the component
This commit is contained in:
Antoine M
parent
5a7cfe63da
commit
a62f00f31e
54
plugins/carhop-blocks/src/document-card/block.json
Normal file
54
plugins/carhop-blocks/src/document-card/block.json
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "carhop-blocks/document-card",
|
||||
"version": "0.1.0",
|
||||
"title": "Document Card",
|
||||
"category": "carhop-blocks",
|
||||
"icon": "smiley",
|
||||
"description": "Document Card pour la mise en forme supérieure d'éléments de contenu",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false,
|
||||
"color": {
|
||||
"text": true,
|
||||
"background": false,
|
||||
"link": false
|
||||
}
|
||||
},
|
||||
"textdomain": "document-card",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js",
|
||||
"attributes": {
|
||||
"isInitilized": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"documentType": {
|
||||
"type": "string",
|
||||
"default": "document",
|
||||
"enum": [
|
||||
"internal",
|
||||
"external"
|
||||
]
|
||||
},
|
||||
"documentFileSize": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"documentUrl": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"documentId": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"UserhasValidatedExternalUrl": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
}
|
||||
}
|
||||
342
plugins/carhop-blocks/src/document-card/edit.js
Normal file
342
plugins/carhop-blocks/src/document-card/edit.js
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
import { __ } from "@wordpress/i18n";
|
||||
import {
|
||||
useBlockProps,
|
||||
InnerBlocks,
|
||||
InspectorControls,
|
||||
MediaUpload,
|
||||
MediaUploadCheck,
|
||||
BlockControls,
|
||||
MediaReplaceFlow,
|
||||
} from "@wordpress/block-editor";
|
||||
import { __experimentalHStack as HStack } from "@wordpress/components";
|
||||
|
||||
import {
|
||||
PanelBody,
|
||||
TextControl,
|
||||
Button,
|
||||
Placeholder,
|
||||
ToolbarButton,
|
||||
Icon,
|
||||
__experimentalToggleGroupControl as ToggleGroupControl,
|
||||
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
|
||||
} from "@wordpress/components";
|
||||
import { file, link, external } from "@wordpress/icons";
|
||||
|
||||
import { MediaPlaceholder } from "@wordpress/block-editor";
|
||||
import "./editor.scss";
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const {
|
||||
isInitilized,
|
||||
documentType,
|
||||
documentUrl,
|
||||
documentId,
|
||||
UserhasValidatedExternalUrl,
|
||||
documentFileSize,
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps({
|
||||
className: "document-card",
|
||||
});
|
||||
|
||||
const hasDocument =
|
||||
(documentType === "internal" && documentId && documentUrl) ||
|
||||
(documentType === "external" && documentUrl && UserhasValidatedExternalUrl);
|
||||
|
||||
const resetDocument = () => {
|
||||
setAttributes({
|
||||
documentId: 0,
|
||||
documentUrl: "",
|
||||
documentFileSize: 0,
|
||||
isInitilized: false,
|
||||
UserhasValidatedExternalUrl: false,
|
||||
});
|
||||
};
|
||||
|
||||
const setInternalDocument = (media) => {
|
||||
const fileSize = media.filesizeInBytes || 0;
|
||||
const fileSizeInKB = Math.round(fileSize / 1024);
|
||||
|
||||
setAttributes({
|
||||
documentType: "internal",
|
||||
documentFileSize: fileSizeInKB,
|
||||
documentId: media.id,
|
||||
documentUrl: media.url,
|
||||
isInitilized: true,
|
||||
});
|
||||
};
|
||||
|
||||
const setExternalDocument = (url) => {
|
||||
setAttributes({
|
||||
documentType: "external",
|
||||
documentFileSize: 0,
|
||||
documentId: 0,
|
||||
documentUrl: url,
|
||||
isInitilized: true,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<PanelBody title={__("Type de document", "carhop-blocks")}>
|
||||
<ToggleGroupControl
|
||||
label={__("Document relié", "carhop-blocks")}
|
||||
value={documentType}
|
||||
onChange={(value) => {
|
||||
setAttributes({ documentType: value, isInitilized: true });
|
||||
resetDocument();
|
||||
}}
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
label={__("PDF interne", "carhop-blocks")}
|
||||
value="internal"
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
label={__("Lien externe", "carhop-blocks")}
|
||||
value="external"
|
||||
/>
|
||||
</ToggleGroupControl>
|
||||
{documentType === "external" && (
|
||||
<>
|
||||
<TextControl
|
||||
label={__("URL du document", "carhop-blocks")}
|
||||
value={documentUrl}
|
||||
onChange={(value) => setExternalDocument(value)}
|
||||
placeholder={__(
|
||||
"https://example.com/document.pdf",
|
||||
"carhop-blocks",
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{documentType === "internal" && (
|
||||
<MediaUploadCheck>
|
||||
<MediaUpload
|
||||
onSelect={(media) => {
|
||||
setInternalDocument(media);
|
||||
}}
|
||||
allowedTypes={["application/pdf"]}
|
||||
value={documentId}
|
||||
render={({ open }) => (
|
||||
<>
|
||||
{documentUrl ? (
|
||||
<div className="document-card__media-preview">
|
||||
<span
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Icon icon={file} />
|
||||
</span>
|
||||
<span className="document-card__media-filename">
|
||||
{documentUrl.split("/").pop()?.split("?")[0] ||
|
||||
__("Document", "carhop-blocks")}
|
||||
</span>
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={open}
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
{__("Remplacer", "carhop-blocks")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
isDestructive
|
||||
onClick={() => resetDocument()}
|
||||
>
|
||||
{__("Supprimer", "carhop-blocks")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button variant="secondary" onClick={open}>
|
||||
{__("Choisir un document", "carhop-blocks")}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</MediaUploadCheck>
|
||||
)}
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...blockProps}>
|
||||
{!isInitilized && (
|
||||
<Placeholder
|
||||
icon={file}
|
||||
label={__("Document Card", "carhop-blocks")}
|
||||
instructions={__(
|
||||
"Choisissez le type de document que vous souhaitez afficher.",
|
||||
"carhop-blocks",
|
||||
)}
|
||||
className="document-card__initialization"
|
||||
>
|
||||
<HStack spacing={3} alignment="stretch" expanded={false}>
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={file}
|
||||
onClick={() =>
|
||||
setAttributes({
|
||||
isInitilized: true,
|
||||
documentType: "internal",
|
||||
})
|
||||
}
|
||||
>
|
||||
{__("PDF interne", "carhop-blocks")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={link}
|
||||
onClick={() =>
|
||||
setAttributes({
|
||||
isInitilized: true,
|
||||
documentType: "external",
|
||||
})
|
||||
}
|
||||
>
|
||||
{__("Lien externe", "carhop-blocks")}
|
||||
</Button>
|
||||
</HStack>
|
||||
</Placeholder>
|
||||
)}
|
||||
|
||||
{isInitilized &&
|
||||
documentType === "internal" &&
|
||||
!documentId &&
|
||||
!documentUrl && (
|
||||
<MediaPlaceholder
|
||||
icon="media-default"
|
||||
labels={{
|
||||
title: "Fichier",
|
||||
instructions:
|
||||
"Glissez-déposez, téléversez ou sélectionnez un fichier depuis votre médiathèque.",
|
||||
}}
|
||||
onSelect={(media) => setInternalDocument(media)}
|
||||
accept="application/pdf"
|
||||
allowedTypes={["application/pdf"]}
|
||||
multiple={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isInitilized &&
|
||||
documentType === "external" &&
|
||||
!UserhasValidatedExternalUrl && (
|
||||
<Placeholder
|
||||
icon={link}
|
||||
label={__("Lien externe", "carhop-blocks")}
|
||||
instructions={__(
|
||||
"Entrez l'URL du document (PDF, etc.) ou utilisez le panneau de réglages à droite.",
|
||||
"carhop-blocks",
|
||||
)}
|
||||
className="document-card__url-placeholder"
|
||||
>
|
||||
<TextControl
|
||||
value={documentUrl}
|
||||
onChange={(value) => setExternalDocument(value)}
|
||||
placeholder="https://example.com/document.pdf"
|
||||
style={{ minWidth: 320 }}
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
setAttributes({ UserhasValidatedExternalUrl: true })
|
||||
}
|
||||
>
|
||||
{__("Valider le lien", "carhop-blocks")}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
)}
|
||||
|
||||
{hasDocument && (
|
||||
<>
|
||||
<BlockControls group="other">
|
||||
{documentType === "internal" ? (
|
||||
<MediaReplaceFlow
|
||||
mediaId={documentId}
|
||||
mediaUrl={documentUrl}
|
||||
allowedTypes={["application/pdf"]}
|
||||
accept="application/pdf"
|
||||
onSelect={(media) => setInternalDocument(media)}
|
||||
name={__("Remplacer le document", "carhop-blocks")}
|
||||
/>
|
||||
) : null}
|
||||
<ToolbarButton onClick={() => resetDocument()}>
|
||||
{__("Supprimer le document", "carhop-blocks")}
|
||||
</ToolbarButton>
|
||||
</BlockControls>
|
||||
|
||||
<div className="document-card__preview">
|
||||
<div className="document-card__content">
|
||||
<InnerBlocks
|
||||
allowedBlocks={[
|
||||
"core/heading",
|
||||
"core/paragraph",
|
||||
"core/list",
|
||||
"core/button",
|
||||
"core/buttons",
|
||||
"core/image",
|
||||
"core/embed",
|
||||
"core/quote",
|
||||
"core/pullquote",
|
||||
"core/media-text",
|
||||
"core/table",
|
||||
"core/group",
|
||||
"core/columns",
|
||||
"core/post-title",
|
||||
"carhop-blocks/cta",
|
||||
"carhop-blocks/heading",
|
||||
"carhop-blocks/cta-group",
|
||||
"carhop-blocks/audio-player",
|
||||
"carhop-blocks/content-box",
|
||||
"carhop-blocks/notice-panel",
|
||||
"shortcode",
|
||||
]}
|
||||
template={[
|
||||
[
|
||||
"carhop-blocks/heading",
|
||||
{},
|
||||
[
|
||||
[
|
||||
"core/heading",
|
||||
{
|
||||
content: "Titre du document",
|
||||
placeholder: "Saisir le titre",
|
||||
},
|
||||
],
|
||||
[
|
||||
"core/paragraph",
|
||||
{
|
||||
content: "Sous-titre du document",
|
||||
placeholder: "Saisir le sous-titre",
|
||||
},
|
||||
],
|
||||
],
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="file_info">
|
||||
<div className="file_info__type">
|
||||
{documentType === "internal" ? "PDF" : "Document externe"}
|
||||
</div>
|
||||
{documentFileSize > 0 && (
|
||||
<div className="file_info__size">
|
||||
( {documentFileSize} Ko )
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
0
plugins/carhop-blocks/src/document-card/editor.scss
Normal file
0
plugins/carhop-blocks/src/document-card/editor.scss
Normal file
31
plugins/carhop-blocks/src/document-card/index.js
Normal file
31
plugins/carhop-blocks/src/document-card/index.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { registerBlockType } from "@wordpress/blocks";
|
||||
import "./style.scss";
|
||||
|
||||
import Edit from "./edit";
|
||||
import save from "./save";
|
||||
import metadata from "./block.json";
|
||||
|
||||
registerBlockType(metadata.name, {
|
||||
icon: {
|
||||
src: (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
context="list-view"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#146E63"
|
||||
d="M12.848 8a1 1 0 0 1-.914-.594l-.723-1.63a.5.5 0 0 0-.447-.276H5a.5.5 0 0 0-.5.5v11.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-9A.5.5 0 0 0 19 8h-6.152Zm.612-1.5a.5.5 0 0 1-.462-.31l-.445-1.084A2 2 0 0 0 10.763 4H5a2 2 0 0 0-2 2v11.5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-5.54Z"
|
||||
></path>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
edit: Edit,
|
||||
save,
|
||||
});
|
||||
39
plugins/carhop-blocks/src/document-card/save.js
Normal file
39
plugins/carhop-blocks/src/document-card/save.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { useBlockProps } from "@wordpress/block-editor";
|
||||
import { InnerBlocks } from "@wordpress/block-editor";
|
||||
|
||||
export default function save({ attributes }) {
|
||||
const { documentUrl, documentType, documentFileSize } = attributes;
|
||||
const blockProps = useBlockProps.save({
|
||||
className: "document-card",
|
||||
});
|
||||
|
||||
if (!documentUrl) {
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
{...blockProps}
|
||||
href={documentUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`${blockProps.className || ""} document-card--${documentType}`}
|
||||
>
|
||||
<div className="document-card__content">
|
||||
<InnerBlocks.Content />
|
||||
<div className="file_info">
|
||||
<div className="file_info__type">
|
||||
{documentType === "internal" ? "PDF" : "Document externe"}
|
||||
</div>
|
||||
{documentFileSize > 0 && (
|
||||
<div className="file_info__size">( {documentFileSize} KB )</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
0
plugins/carhop-blocks/src/document-card/style.scss
Normal file
0
plugins/carhop-blocks/src/document-card/style.scss
Normal file
Loading…
Reference in New Issue
Block a user