ルクセリタスのコード表示部分をいじり、パス表示を追加してみました。
diff --git a/js/luxe-blocks.js b/js/luxe-blocks.js
index 47d3ce8..a6e77ef 100644
--- a/js/luxe-blocks.js
+++ b/js/luxe-blocks.js
@@ -4411,6 +4411,10 @@ window.addEventListener("DOMContentLoaded", function() {
language: {
type: "string",
default: ""
+ },
+ filename: {
+ type: "string",
+ default: ""
}
},
supports: {
@@ -4464,45 +4468,66 @@ window.addEventListener("DOMContentLoaded", function() {
value: ""
}];
return Object.keys(luxeHighlighterList).forEach(function(e) {
- c.push({
- label: this[e],
- value: e
- })
- }, luxeHighlighterList), l.push(s(d.SelectControl, {
- label: u("Code Language", "luxeritas"),
- value: a,
- options: c,
- onChange: function(e) {
- return n({
- language: e
- })
- }
- })), t = s("p", null, u("* The theme can be changed from the CSS tab of Luxeritas menu.", "luxeritas")), [s(p.InspectorControls, {
- key: "syntaxHighlighterInspectorControls"
- }, s(d.PanelBody, {
- title: u("Settings")
- }, l, t)), s("div", {
- className: r + " wp-block-code"
- }, s(p.PlainText, {
- value: i,
- onChange: function(e) {
- return n({
- content: e
+ c.push({
+ label: this[e],
+ value: e
})
- },
- placeholder: u("To the right, choose a code language from the block settings.", "luxeritas"),
- "aria-label": u("Syntax Highlighter", "luxeritas")
- }))]
+ }, luxeHighlighterList), l.push(s(d.SelectControl, {
+ label: u("Code Language", "luxeritas"),
+ value: a,
+ options: c,
+ onChange: function(e) {
+ return n({
+ language: e,
+ filename: o.filename
+ })
+ }
+ })),
+ l.push(s(d.TextControl, {
+ label: u("File Name", "luxeritas"),
+ value: o.filename,
+ onChange: function(e) {
+ return n({
+ language: a,
+ filename: e
+ })
+ }
+ })), t = s("p", null, u("* The theme can be changed from the CSS tab of Luxeritas menu.", "luxeritas")), [s(p.InspectorControls, {
+ key: "syntaxHighlighterInspectorControls"
+ }, s(d.PanelBody, {
+ title: u("Settings")
+ }, l, t)), s("div", {
+ className: r + " wp-block-code"
+ }, s(p.PlainText, {
+ value: i,
+ onChange: function(e) {
+ return n({
+ content: e
+ })
+ },
+ placeholder: u("To the right, choose a code language from the block settings.", "luxeritas"),
+ "aria-label": u("Syntax Highlighter", "luxeritas")
+ }))]
},
save: function(e) {
var t = e.attributes,
o = t.content,
n = t.language.replace("highlight_", "");
- return "" != n ? s("pre", {
- className: "line-numbers language-" + n
- }, s("code", {
- className: "language-" + n
- }, o)) : s("pre", null, s("code", null, o))
+ var obj;
+ if ("" != n) {
+ var pre = {
+ className: "line-numbers language-" + n,
+ };
+ if (t.filename) {
+ pre["data-label"] = t.filename;
+ }
+ obj = s("pre", pre, s("code", {
+ className: "language-" + n
+ }, o));
+ } else {
+ obj = s("pre", null, s("code", null, o));
+ }
+ return obj;
}
})
}(),
diff --git a/languages/admin/luxeritas-ja-luxe-blocks.json b/languages/admin/luxeritas-ja-luxe-blocks.json
index 4d04781..8381a3c 100644
--- a/languages/admin/luxeritas-ja-luxe-blocks.json
+++ b/languages/admin/luxeritas-ja-luxe-blocks.json
@@ -200,6 +200,9 @@
"Code Language": [
"言語"
],
+ "File Name" : [
+ "ファイル名"
+ ],
"* The theme can be changed from the CSS tab of Luxeritas menu.": [
"※ テーマ(見た目)は Luxeritas メニューの CSS タブから変更できます。"
],
luxe-blocks.jsはminifyされてたので、以下で整形してから編集してdiffを取っています。
$ npx js-beautify -s 2 luxe-blocks.js >luxe-blocks.js.new
$ mv luxe-blocks.js.new luxe-blocks.js
編集後は以下でminifyして使っています。
$ npx -p uglify-js uglifyjs luxe-blocks.js -c --output luxe-blocks.js.new
$ mv luxe-blocks.js.new luxe-blocks.js
$ 手作業でライセンスの貼り付け
上記作業はパッチにして以下にまとめてあります。
