| 1 |
/** |
| 2 |
* Registers a new block provided a unique name and an object defining its behavior. |
| 3 |
* |
| 4 |
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/#registerblocktype |
| 5 |
*/ |
| 6 |
import { registerBlockType, createBlock } from "@wordpress/blocks"; |
| 7 |
import getPenID from "./utils/getPenID"; |
| 8 |
import Edit from "./edit"; |
| 9 |
import Save from "./save"; |
| 10 |
|
| 11 |
try { |
| 12 |
registerBlockType("cp/codepen-gutenberg-embed-block", { |
| 13 |
title: "CodePen Embed", |
| 14 |
category: "embed", |
| 15 |
edit: Edit, |
| 16 |
save: Save, |
| 17 |
attributes: { |
| 18 |
penURL: { |
| 19 |
type: "string", |
| 20 |
default: "", |
| 21 |
}, |
| 22 |
penID: { |
| 23 |
type: "string", |
| 24 |
default: "", |
| 25 |
}, |
| 26 |
penHeight: { |
| 27 |
type: "number", |
| 28 |
default: 450, |
| 29 |
}, |
| 30 |
penTheme: { |
| 31 |
type: "string", |
| 32 |
default: "1", |
| 33 |
}, |
| 34 |
penType: { |
| 35 |
type: "string", |
| 36 |
default: "result", |
| 37 |
}, |
| 38 |
isEditorURL: { |
| 39 |
type: "boolean", |
| 40 |
default: false, |
| 41 |
}, |
| 42 |
}, |
| 43 |
transforms: { |
| 44 |
from: [ |
| 45 |
{ |
| 46 |
type: "raw", |
| 47 |
priority: 8, |
| 48 |
isMatch: (node) => |
| 49 |
node.nodeName === "P" && node.className === "codepen", |
| 50 |
transform: function (node) { |
| 51 |
let penURL = node.querySelector("a").getAttribute("href"); |
| 52 |
return createBlock("cp/codepen-gutenberg-embed-block", { |
| 53 |
penURL: penURL, |
| 54 |
penID: getPenID(penURL), |
| 55 |
}); |
| 56 |
}, |
| 57 |
}, |
| 58 |
{ |
| 59 |
type: "raw", |
| 60 |
priority: 8, |
| 61 |
isMatch: (node) => |
| 62 |
node.nodeName === "P" && |
| 63 |
node.innerText.startsWith("https://codepen.io/"), |
| 64 |
transform: function (node) { |
| 65 |
return createBlock("cp/codepen-gutenberg-embed-block", { |
| 66 |
penURL: node.innerText, |
| 67 |
penID: getPenID(node.innerText), |
| 68 |
}); |
| 69 |
}, |
| 70 |
}, |
| 71 |
], |
| 72 |
}, |
| 73 |
}); |
| 74 |
|
| 75 |
console.log("Block with all required attributes registration completed!"); |
| 76 |
} catch (error) { |
| 77 |
console.error("Error registering block:", error); |
| 78 |
} |
| 79 |
|
