Skip to content

Commit 76be81a

Browse files
opera7133opera7133
committed
1.0.8
1 parent a5159c8 commit 76be81a

13 files changed

+885
-37
lines changed

Diff for: ‎blocks/alert/block.js

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
(function (
2+
data,
3+
lodash,
4+
blocks,
5+
editor,
6+
i18n,
7+
element,
8+
hooks,
9+
components,
10+
compose
11+
) {
12+
var el = element.createElement;
13+
const { assign } = lodash;
14+
const { __ } = i18n;
15+
const {
16+
AlignmentToolbar,
17+
BlockControls,
18+
RichText,
19+
InspectorControls,
20+
InnerBlocks,
21+
} = editor;
22+
const { registerBlockType, Editable, Toolbar } = blocks;
23+
24+
registerBlockType("operandi/alert", {
25+
title: "アラート",
26+
icon: {
27+
foreground: "black",
28+
src: "bell",
29+
},
30+
category: "common",
31+
attributes: {
32+
icon: {
33+
type: "string",
34+
},
35+
content: {
36+
type: "string",
37+
selector: "div",
38+
},
39+
},
40+
supports: {
41+
customClassName: true,
42+
className: false,
43+
color: {
44+
background: true,
45+
gradients: false,
46+
},
47+
},
48+
edit: function (props) {
49+
var attributes = props.attributes;
50+
var icon = attributes.icon ? attributes.icon : "warning";
51+
var content = attributes.content;
52+
var alignment = attributes.alignment;
53+
54+
function onChangeContent(newContent) {
55+
props.setAttributes({ content: newContent });
56+
}
57+
function onChangeIcon(newIcon) {
58+
console.log(newIcon.target.value);
59+
props.setAttributes({ icon: newIcon.target.value });
60+
}
61+
62+
return [
63+
el(
64+
"div",
65+
{
66+
className: "alert-editor",
67+
},
68+
[
69+
el(
70+
InspectorControls,
71+
{ key: "setting" },
72+
el(
73+
"div",
74+
{
75+
id: "gutenpride-controls",
76+
className: "block-editor-block-card",
77+
},
78+
el(
79+
"fieldset",
80+
null,
81+
el(
82+
"legend",
83+
{ className: "blocks-base-control__label" },
84+
__("アイコン", "gutenpride")
85+
),
86+
el(
87+
"select",
88+
{
89+
onChange: (value) => onChangeIcon(value),
90+
},
91+
[
92+
el(
93+
"option",
94+
{
95+
value: "warning",
96+
selected: true,
97+
},
98+
"warning"
99+
),
100+
el(
101+
"option",
102+
{
103+
value: "bell",
104+
},
105+
"bell"
106+
),
107+
el(
108+
"option",
109+
{
110+
value: "flag",
111+
},
112+
"flag"
113+
),
114+
el(
115+
"option",
116+
{
117+
value: "info",
118+
},
119+
"info"
120+
),
121+
]
122+
)
123+
)
124+
)
125+
),
126+
el("span", {
127+
className: "dashicons dashicons-" + icon,
128+
}),
129+
el(RichText, {
130+
tagName: "p",
131+
className: "alert-text " + props,
132+
placeholder: "テキストを追加",
133+
value: content,
134+
allowedFormats: [
135+
"core/bold",
136+
"core/italic",
137+
"core/link",
138+
"core/underline",
139+
"core/strikethrough",
140+
"core/subscript",
141+
"core/superscript",
142+
],
143+
onChange: onChangeContent,
144+
}),
145+
]
146+
),
147+
];
148+
},
149+
save: function (props) {
150+
var attributes = props.attributes;
151+
var content = attributes.content;
152+
153+
return [
154+
el(RichText.Content, {
155+
tagName: "a",
156+
className: "alert " + props,
157+
value: content,
158+
}),
159+
];
160+
},
161+
});
162+
})(
163+
window.wp.data,
164+
window.lodash,
165+
window.wp.blocks,
166+
window.wp.editor,
167+
window.wp.i18n,
168+
window.wp.element,
169+
window.wp.hooks,
170+
window.wp.components,
171+
window.wp.compose
172+
);

Diff for: ‎blocks/alert/index.php

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<?php
2+
3+
register_block_type("operandi/alert", [
4+
"editor_script" => "alert",
5+
"attributes" => [
6+
"icon" => [
7+
"type" => "string",
8+
],
9+
"content" => [
10+
"type" => "string",
11+
],
12+
"className" => [
13+
"type" => "string",
14+
],
15+
"textColor" => [
16+
"type" => "string",
17+
],
18+
"backgroundColor" => [
19+
"type" => "string",
20+
],
21+
"style" => [
22+
"type" => "object",
23+
],
24+
],
25+
"render_callback" => "OR_alert",
26+
]);
27+
28+
function OR_alert($attributes)
29+
{
30+
$bgColor = $attributes["style"]["color"]["background"]
31+
? $attributes["style"]["color"]["background"]
32+
: "var(--wp--preset--color--" . $attributes["backgroundColor"] . ")";
33+
$textColor = $attributes["style"]["color"]["text"]
34+
? $attributes["style"]["color"]["text"]
35+
: "var(--wp--preset--color--" . $attributes["textColor"] . ")";
36+
$html = "";
37+
$html .=
38+
'<div class="alert ' .
39+
$attributes["className"] .
40+
'" style="background-color:' .
41+
$bgColor .
42+
"; color:" .
43+
$textColor .
44+
';">';
45+
46+
$html .=
47+
'<span class="dashicons dashicons-' . $attributes["icon"] . '"></span>';
48+
$html .= $attributes["content"];
49+
$html .= "</div>";
50+
return $html;
51+
}

Diff for: ‎blocks/alert/style.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
div.alert-editor {
2+
padding: 1rem;
3+
display: flex;
4+
gap: 1rem;
5+
align-items: center;
6+
}
7+
div.alert-editor p {
8+
margin: 0;
9+
}
10+
div.alert-editor .dashicons {
11+
font-size: 1.75rem;
12+
width: auto;
13+
height: auto;
14+
}

Diff for: ‎blocks/linkcard/block.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
(function (
2+
data,
3+
lodash,
4+
blocks,
5+
editor,
6+
i18n,
7+
element,
8+
hooks,
9+
components,
10+
compose
11+
) {
12+
var el = element.createElement;
13+
const { assign } = lodash;
14+
const { __ } = i18n;
15+
const {
16+
AlignmentToolbar,
17+
BlockControls,
18+
RichText,
19+
InspectorControls,
20+
InnerBlocks,
21+
} = editor;
22+
const { registerBlockType, Editable, Toolbar } = blocks;
23+
24+
registerBlockType("operandi/linkcard", {
25+
title: "リンクカード",
26+
icon: {
27+
foreground: "black",
28+
src: "embed-photo",
29+
},
30+
category: "common",
31+
attributes: {
32+
content: {
33+
type: "string",
34+
selector: "a",
35+
},
36+
},
37+
supports: {
38+
customClassName: true,
39+
className: false,
40+
},
41+
edit: function (props) {
42+
var attributes = props.attributes;
43+
44+
var content = attributes.content;
45+
var alignment = attributes.alignment;
46+
47+
function onChangeContent(newContent) {
48+
props.setAttributes({ content: newContent });
49+
}
50+
51+
return [
52+
el(
53+
"div",
54+
{
55+
className: "linkcard-wrapper",
56+
},
57+
[
58+
el("p", null, "URLを入力"),
59+
el(RichText, {
60+
tagName: "a",
61+
className: "linkcard " + props,
62+
placeholder: "https://example.com",
63+
value: content,
64+
allowedFormats: [],
65+
onChange: onChangeContent,
66+
}),
67+
]
68+
),
69+
];
70+
},
71+
save: function (props) {
72+
var attributes = props.attributes;
73+
var content = attributes.content;
74+
75+
return [
76+
el(RichText.Content, {
77+
tagName: "a",
78+
className: "linkcard " + props,
79+
value: content,
80+
}),
81+
];
82+
},
83+
});
84+
})(
85+
window.wp.data,
86+
window.lodash,
87+
window.wp.blocks,
88+
window.wp.editor,
89+
window.wp.i18n,
90+
window.wp.element,
91+
window.wp.hooks,
92+
window.wp.components,
93+
window.wp.compose
94+
);

Diff for: ‎blocks/linkcard/index.php

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?php
2+
3+
require dirname(__FILE__) . "/../../inc/ogp.php";
4+
5+
register_block_type("operandi/linkcard", [
6+
"editor_script" => "linkcard",
7+
"attributes" => [
8+
"content" => [
9+
"type" => "string",
10+
],
11+
"className" => [
12+
"type" => "string",
13+
],
14+
],
15+
"render_callback" => "OR_linkcard",
16+
]);
17+
18+
function OR_linkcard($attributes)
19+
{
20+
$content = OpenGraph::fetch($attributes["content"]);
21+
$html = "";
22+
$html .=
23+
'<a href="' .
24+
$attributes["content"] .
25+
'" class="linkcard ' .
26+
$attributes["className"] .
27+
'">';
28+
if ($content->image):
29+
$html .= '<img src="' . $content->image . '" class="linkcard-image" />';
30+
endif;
31+
$html .=
32+
"<div class='details'><p class='linkcard-title'>" .
33+
$content->title .
34+
"</p>";
35+
if ($content->description):
36+
$html .=
37+
"<p class='linkcard-description'>" . $content->description . "</p>";
38+
endif;
39+
$html .= "</div></a>";
40+
return $html;
41+
}

Diff for: ‎blocks/linkcard/style.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.linkcard-wrapper {
2+
display: block;
3+
padding: 1rem;
4+
background-color: rgb(243, 243, 243);
5+
}
6+
7+
.linkcard-wrapper p {
8+
margin: 0;
9+
margin-bottom: 0.5rem;
10+
}
11+
12+
.editor-styles-wrapper a.linkcard {
13+
display: block;
14+
padding: 0.5rem;
15+
font-size: 0.875rem;
16+
color: inherit;
17+
width: 100%;
18+
background-color: white;
19+
}

0 commit comments

Comments
 (0)