From 354e73a4b3d486cc360173105dbe8c4b49f6e958 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 26 Aug 2022 14:43:21 +0900 Subject: [PATCH 01/56] add / css custom-css-extension --- package-lock.json | 231 ++++++++++++++++++ package.json | 6 +- src/blocks/bundle-pro.js | 5 + .../common/custom-css-extension/index.js | 165 +++++++++++++ 4 files changed, 406 insertions(+), 1 deletion(-) create mode 100644 src/extensions/common/custom-css-extension/index.js diff --git a/package-lock.json b/package-lock.json index ac3363166..a52af060d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1317,6 +1317,107 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@codemirror/autocomplete": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.1.0.tgz", + "integrity": "sha512-wtO4O5WDyXhhCd4q4utDIDZxnQfmJ++3dGBCG9LMtI79+92OcA1DVk/n7BEupKmjIr8AzvptDz7YQ9ud6OkU+A==", + "dev": true, + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/commands": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.1.0.tgz", + "integrity": "sha512-qCj2YqmbBjj0P1iumnlL5lBqZvJPzT+t2UvgjcaXErp5ZvMqFRVgQyrEfdXX6SX5UcvcHKBjXqno+MkUp0aYvQ==", + "dev": true, + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/lang-css": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz", + "integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==", + "dev": true, + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/css": "^1.0.0" + } + }, + "@codemirror/language": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz", + "integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==", + "dev": true, + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "@codemirror/lint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz", + "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==", + "dev": true, + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/search": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.1.0.tgz", + "integrity": "sha512-ye6m0jFHSgQ4qnfWVwArvm7XrCMNppMYnL5f4M0WdBScslnckomf5eVacYCw8P0UBWeq72lCSXA0/eo1piZxLA==", + "dev": true, + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/state": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.1.tgz", + "integrity": "sha512-2s+aXsxmAwnR3Rd+JDHPG/1lw0YsA9PEwl7Re88gHJHGfxyfEzKBmsN4rr53RyPIR4lzbbhJX0DCq0WlqlBIRw==", + "dev": true + }, + "@codemirror/theme-one-dark": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz", + "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==", + "dev": true, + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "@codemirror/view": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.2.0.tgz", + "integrity": "sha512-3emW1symh+GoteFMBPsltjmF790U/trouLILATh3JodbF/z98HvcQh2g3+H6dfNIHx16uNonsAF4mNzVr1TJNA==", + "dev": true, + "requires": { + "@codemirror/state": "^6.0.0", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "@discoveryjs/json-ext": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz", @@ -2276,6 +2377,59 @@ "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==", "dev": true }, + "@lezer/common": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz", + "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==", + "dev": true + }, + "@lezer/css": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.0.tgz", + "integrity": "sha512-616VqgDKumHmYIuxs3tnX1irEQmoDHgF/TlP4O5ICWwyHwLMErq+8iKVuzTkOdBqvYAVmObqThcDEAaaMJjAdg==", + "dev": true, + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/highlight": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz", + "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==", + "dev": true, + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/lr": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz", + "integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==", + "dev": true, + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@monaco-editor/loader": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz", + "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==", + "dev": true, + "requires": { + "state-local": "^1.0.6" + } + }, + "@monaco-editor/react": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.5.tgz", + "integrity": "sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==", + "dev": true, + "requires": { + "@monaco-editor/loader": "^1.3.2", + "prop-types": "^15.7.2" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3742,6 +3896,44 @@ } } }, + "@uiw/codemirror-extensions-basic-setup": { + "version": "4.11.6", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.11.6.tgz", + "integrity": "sha512-VW9tmkHvdD5u3osksBrDU/DQYNGcifK3qJPmmMKmje106pZTgIhvxABVhNCEJlDIrG5zYV5cqLtwb9TPbkd5qQ==", + "dev": true, + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, + "@uiw/react-codemirror": { + "version": "4.11.6", + "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.11.6.tgz", + "integrity": "sha512-xPBOHtWE1MqHp8H/hTnOTxnz1ZQiQ2CHi1neiTpnjUxQUNv5mm5vTSgw2POxPh1AJqAVFuS6L1p3EZZPiVyehQ==", + "dev": true, + "requires": { + "@babel/runtime": "^7.18.6", + "@codemirror/theme-one-dark": "^6.0.0", + "@uiw/codemirror-extensions-basic-setup": "4.11.6", + "codemirror": "^6.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", + "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "@use-gesture/core": { "version": "10.2.7", "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.7.tgz", @@ -7343,6 +7535,21 @@ "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, + "codemirror": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", + "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==", + "dev": true, + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -8018,6 +8225,12 @@ } } }, + "crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==", + "dev": true + }, "cross-env": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", @@ -21423,6 +21636,12 @@ "integrity": "sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg==", "dev": true }, + "state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "dev": true + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -21626,6 +21845,12 @@ } } }, + "style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==", + "dev": true + }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -23170,6 +23395,12 @@ "browser-process-hrtime": "^1.0.0" } }, + "w3c-keyname": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz", + "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==", + "dev": true + }, "w3c-xmlserializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz", diff --git a/package.json b/package.json index 4069f3cef..1a6f3c246 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,11 @@ "> 5%" ], "devDependencies": { + "@codemirror/lang-css": "^6.0.0", + "@codemirror/view": "^6.2.0", "@emotion/babel-plugin": "^11.7.2", + "@monaco-editor/react": "^4.4.5", + "@uiw/react-codemirror": "^4.11.6", "@wordpress/babel-plugin-makepot": "^4.2.1", "@wordpress/block-editor": "^8.2.0", "@wordpress/block-library": "^7.0.2", @@ -102,4 +106,4 @@ "rimraf": "^3.0.2", "sass": "1.32.12" } -} \ No newline at end of file +} diff --git a/src/blocks/bundle-pro.js b/src/blocks/bundle-pro.js index 68b866f6c..7e5d73dd9 100644 --- a/src/blocks/bundle-pro.js +++ b/src/blocks/bundle-pro.js @@ -31,6 +31,11 @@ import * as tableofContentsNew from './_pro/table-of-contents-new'; import * as timeline from './_pro/timeline'; import * as timelineItem from './_pro/timeline-item'; +/** + * Extensions + */ +import '@vkblocks/extensions/common/custom-css-extension'; + const vkblocksPro = [ accordion, accordionTarget, diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js new file mode 100644 index 000000000..a57e208da --- /dev/null +++ b/src/extensions/common/custom-css-extension/index.js @@ -0,0 +1,165 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { PanelBody } from '@wordpress/components'; +import { InspectorControls } from '@wordpress/block-editor'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { hasBlockSupport } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; + +/** + * External dependencies + */ +import { assign } from 'lodash'; +import MonacoEditor from '@monaco-editor/react'; +import CodeMirror from '@uiw/react-codemirror'; +import { css } from '@codemirror/lang-css'; +import { EditorView } from '@codemirror/view'; + +/** + * Internal dependencies + */ + +export const inString = (str, keyword) => { + return str.indexOf(keyword) !== -1; +}; + +export const isAddBlockCss = (blockName) => { + const allowed = ['core', 'vk-blocks']; + const returnBool = + allowed.find((item) => inString(blockName, item)) !== undefined; + return returnBool; +}; + +/** + * Block.json + * + * @param {string} settings + */ +addFilter( + 'blocks.registerBlockType', + 'vk-blocks/custom-css', + (settings) => { + if ( + isAddBlockCss(settings.name) && + hasBlockSupport(settings.name, 'customClassName', true) + ) { + settings.attributes = assign(settings.attributes, { + vkbCustomCss: { + type: 'string', + default: null, + }, + }); + } + return settings; + } +); + +/** + * edit.js + */ +addFilter( + 'editor.BlockEdit', + 'vk-blocks/custom-css', + createHigherOrderComponent((BlockEdit) => { + return (props) => { + const { name, attributes, setAttributes, isSelected } = props; + const { vkbCustomCss } = attributes; + const hasCustomClassName = hasBlockSupport( + name, + 'customClassName', + true + ); + if (isAddBlockCss(name) && hasCustomClassName && isSelected) { + return ( + <> + + + + CodeMirror + { + setAttributes({ vkbCustomCss: value }) + }} + /> + MonacoEditor + { + setAttributes({ vkbCustomCss: value }) + }} + /> + + + + ); + } + return ; + }; + }, 'vkbCustomCss') +); + +/** + * edit.js + */ +addFilter( + 'editor.BlockListBlock', + 'vk-blocks/custom-css', + createHigherOrderComponent((BlockListBlock) => { + return (props) => { + const cssTag = props.attributes.vkbCustomCss + ? props.attributes.vkbCustomCss + : ''; + return ( + <> + {cssTag ? : null} + + + ); + }; + }, 'vkbCustomCss') +); + +/** + * save.js + */ +addFilter( + 'blocks.getSaveElement', + 'vk-blocks/custom-css', + (el, type, attributes) => { + const cssTag = attributes.vkbCustomCss; + if (!cssTag) { + return el; + } + // NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、 + // カスタムクラスを追加する処理が失敗する + return ( + <> + {el} + + + ); + } +); From f1562b4ca4879f1a2cf58dd669c197b3781121ea Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 26 Aug 2022 14:44:11 +0900 Subject: [PATCH 02/56] lint --- .../common/custom-css-extension/index.js | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js index a57e208da..869dfa849 100644 --- a/src/extensions/common/custom-css-extension/index.js +++ b/src/extensions/common/custom-css-extension/index.js @@ -37,24 +37,20 @@ export const isAddBlockCss = (blockName) => { * * @param {string} settings */ -addFilter( - 'blocks.registerBlockType', - 'vk-blocks/custom-css', - (settings) => { - if ( - isAddBlockCss(settings.name) && - hasBlockSupport(settings.name, 'customClassName', true) - ) { - settings.attributes = assign(settings.attributes, { - vkbCustomCss: { - type: 'string', - default: null, - }, - }); - } - return settings; +addFilter('blocks.registerBlockType', 'vk-blocks/custom-css', (settings) => { + if ( + isAddBlockCss(settings.name) && + hasBlockSupport(settings.name, 'customClassName', true) + ) { + settings.attributes = assign(settings.attributes, { + vkbCustomCss: { + type: 'string', + default: null, + }, + }); } -); + return settings; +}); /** * edit.js @@ -86,13 +82,13 @@ addFilter( className="custom-css-editor" height="200px" // https://uiwjs.github.io/react-codemirror/#/extensions/color - extensions={ [ + extensions={[ css(), EditorView.lineWrapping, - ] } - value={ vkbCustomCss ? vkbCustomCss : '' } + ]} + value={vkbCustomCss ? vkbCustomCss : ''} onChange={(value) => { - setAttributes({ vkbCustomCss: value }) + setAttributes({ vkbCustomCss: value }); }} /> MonacoEditor @@ -106,9 +102,9 @@ addFilter( wordWrap: true, quickSuggestions: false, //コンテンツエリアに被るため無効 }} - value={ vkbCustomCss ? vkbCustomCss : '' } + value={vkbCustomCss ? vkbCustomCss : ''} onChange={(value) => { - setAttributes({ vkbCustomCss: value }) + setAttributes({ vkbCustomCss: value }); }} /> From aea15e40a431893f104a8403a30f7b0b94c9b225 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Wed, 31 Aug 2022 14:21:55 +0900 Subject: [PATCH 03/56] add / custom-css-extension unique selector method --- editor-css/_editor_before.scss | 2 + .../_editor_before_custom-css-extension.scss | 16 ++ .../common/custom-css-extension.php | 28 +++ inc/vk-blocks/utils/minify-css.php | 25 +++ inc/vk-blocks/vk-blocks-functions.php | 10 +- .../common/custom-css-extension/icon.svg | 1 + .../common/custom-css-extension/index.js | 189 +++++++++++++----- 7 files changed, 216 insertions(+), 55 deletions(-) create mode 100644 editor-css/_editor_before_custom-css-extension.scss create mode 100644 inc/vk-blocks/extensions/common/custom-css-extension.php create mode 100644 inc/vk-blocks/utils/minify-css.php create mode 100644 src/extensions/common/custom-css-extension/icon.svg diff --git a/editor-css/_editor_before.scss b/editor-css/_editor_before.scss index b97e5d580..e3ee353ea 100644 --- a/editor-css/_editor_before.scss +++ b/editor-css/_editor_before.scss @@ -127,6 +127,8 @@ button.image-button:not(.button-delete) { @import "./editor_before_breadcrumb"; // slider @import "./editor_before_slider"; +// edit custom css extension +@import "./editor_before_custom-css-extension"; // VK Outer 編集パネル $color-danger: #dd3333; diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss new file mode 100644 index 000000000..5e05cff60 --- /dev/null +++ b/editor-css/_editor_before_custom-css-extension.scss @@ -0,0 +1,16 @@ +// animationブロックにカスタムCSSを使った時にどうする？ +.vk_edit_custom_css { + border: 1px dashed #ccc; + min-height:3em; + left:0; + &:before { + position:absolute; + right:0; + top:0; + font-size:10px; + background: #eeeeee; + padding: .2em .6em; + z-index:1000; + content:'Custom Css'; + } +} diff --git a/inc/vk-blocks/extensions/common/custom-css-extension.php b/inc/vk-blocks/extensions/common/custom-css-extension.php new file mode 100644 index 000000000..cf3c8ca1c --- /dev/null +++ b/inc/vk-blocks/extensions/common/custom-css-extension.php @@ -0,0 +1,28 @@ +' . $css . '' . $block_content; + } + return $block_content; +} +add_filter( 'render_block', 'vk_blocks_custom_css_extension', 10, 2 ); diff --git a/inc/vk-blocks/utils/minify-css.php b/inc/vk-blocks/utils/minify-css.php new file mode 100644 index 000000000..f9f4300a1 --- /dev/null +++ b/inc/vk-blocks/utils/minify-css.php @@ -0,0 +1,25 @@ + \ No newline at end of file diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js index 869dfa849..c65167c90 100644 --- a/src/extensions/common/custom-css-extension/index.js +++ b/src/extensions/common/custom-css-extension/index.js @@ -2,17 +2,18 @@ * WordPress dependencies */ import { addFilter } from '@wordpress/hooks'; -import { PanelBody } from '@wordpress/components'; +import { PanelBody, Icon } from '@wordpress/components'; import { InspectorControls } from '@wordpress/block-editor'; import { createHigherOrderComponent } from '@wordpress/compose'; import { hasBlockSupport } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; +import { useEffect } from '@wordpress/element'; /** * External dependencies */ +import classnames from 'classnames'; import { assign } from 'lodash'; -import MonacoEditor from '@monaco-editor/react'; import CodeMirror from '@uiw/react-codemirror'; import { css } from '@codemirror/lang-css'; import { EditorView } from '@codemirror/view'; @@ -20,6 +21,8 @@ import { EditorView } from '@codemirror/view'; /** * Internal dependencies */ +import { isParentReusableBlock } from '@vkblocks/utils/is-parent-reusable-block'; +import { ReactComponent as IconSVG } from './icon.svg'; export const inString = (str, keyword) => { return str.indexOf(keyword) !== -1; @@ -60,24 +63,86 @@ addFilter( 'vk-blocks/custom-css', createHigherOrderComponent((BlockEdit) => { return (props) => { - const { name, attributes, setAttributes, isSelected } = props; - const { vkbCustomCss } = attributes; + const { name, attributes, setAttributes, isSelected, clientId } = + props; + const { vkbCustomCss, className } = attributes; const hasCustomClassName = hasBlockSupport( name, 'customClassName', true ); + // 追加CSSクラスを半角文字列で分けて配列化 + const nowClassArray = className ? className.split(' ') : []; + // clientId サンプル7cdd8cf7-7645-4cf5-9d73-1181f8734cfb + const customCssRegex = /vk_custom_css-(|)/; + const customCssSelectorRegex = /selector/; + + // vkbCustomCssが変わった時にclassNameに追加CSSが無いかつ、selectorがあったら追加cssクラスにクラス名を追加する + useEffect(() => { + // vk_custom_css-${clientId}が無いかつselectorがあればユニーククラスを追加 + if ( + !customCssRegex.test(className) && + customCssSelectorRegex.test(vkbCustomCss) + ) { + const newClassName = classnames( + className, + `vk_custom_css-${clientId}` + ); + setAttributes({ className: newClassName }); + } + + // selectorがなければユニーククラスを削除 + if (!customCssSelectorRegex.test(vkbCustomCss)) { + const deleteClass = + nowClassArray.indexOf(/vk_custom_css-(.+)/); + nowClassArray.splice(deleteClass, 1); + const newClassName = classnames(nowClassArray); + setAttributes({ className: newClassName }); + } + }, [vkbCustomCss]); + + // 複製されたら再利用ブロック以外の時は以前付いていたクラス名vk-custom_css-${clientId}は削除する + useEffect(() => { + if ( + customCssSelectorRegex.test(vkbCustomCss) && + isParentReusableBlock(clientId) === false + ) { + // 前のクラス名を削除する + // const deleteClass = nowClassArray.find(/vk_custom_css-(|)/); + const deleteClass = + nowClassArray.indexOf(/vk_custom_css-(.+)/); + nowClassArray.splice(deleteClass, 1); + const newClassName = classnames( + nowClassArray, + `vk_custom_css-${clientId}` + ); + setAttributes({ className: newClassName }); + } + }, [clientId]); + + let iconStyle = { + width: '24px', + height: '24px', + }; + if (vkbCustomCss) { + iconStyle = { + ...iconStyle, + color: '#fff', + background: '#1e1e1e', + }; + } + if (isAddBlockCss(name) && hasCustomClassName && isSelected) { return ( <> } title={__('Custom CSS', 'vk-blocks')} initialOpen={false} > - CodeMirror - MonacoEditor - { - setAttributes({ vkbCustomCss: value }); - }} - /> +

+ {__( + 'If selector is set to "selector", it will be replaced with a block-specific CSS class.', + 'vk-blocks' + )} +

+ 
+									{'selector {\n    background: black;\n}'}
+
@@ -114,7 +172,7 @@ addFilter( } return ; }; - }, 'vkbCustomCss') + }, 'vkbCustomCssSection') ); /** @@ -125,37 +183,70 @@ addFilter( 'vk-blocks/custom-css', createHigherOrderComponent((BlockListBlock) => { return (props) => { - const cssTag = props.attributes.vkbCustomCss - ? props.attributes.vkbCustomCss - : ''; - return ( - <> - {cssTag ? : null} - - + const { name, attributes } = props; + const hasCustomClassName = hasBlockSupport( + name, + 'customClassName', + true ); + const { vkbCustomCss, className } = attributes; + + // editor class + const attachedClass = classnames(className, { + [`vk_edit_custom_css`]: vkbCustomCss, + }); + + // selectorをvk_custom_css-${clientId}に変換する + let cssTag; + const classes = + vkbCustomCss && className?.includes('vk_custom_css-') + ? className + .split(' ') + .find((i) => i.includes('vk_custom_css')) + : null; + if (vkbCustomCss) { + cssTag = vkbCustomCss.replace('selector', '.' + classes); + } + + if (isAddBlockCss(name) && hasCustomClassName) { + return ( + <> + + {(() => { + if (cssTag) { + return ; + } + })()} + + ); + } + return ; }; }, 'vkbCustomCss') ); /** * save.js + * attributeの内容を変更するのでsave.jsの内容とedit.js + * フロントエンドの出力はrender_blockする？ */ -addFilter( - 'blocks.getSaveElement', - 'vk-blocks/custom-css', - (el, type, attributes) => { - const cssTag = attributes.vkbCustomCss; - if (!cssTag) { - return el; - } - // NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、 - // カスタムクラスを追加する処理が失敗する - return ( - <> - {el} - - - ); - } -); +// addFilter( +// 'blocks.getSaveElement', +// 'vk-blocks/custom-css', +// (el, type, attributes) => { +// const cssTag = attributes.vkbCustomCss; +// if (!cssTag) { +// return el; +// } +// // selectorというクラス名をvk_custom_css-${clientId}に変更する + +// // NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、 +// // カスタムクラスを追加する処理が失敗する +// return ( +// <> +// {el} +// +// +// ); +// } +// ); From 4d2e0e1d4ccaec1fe56c387af1fde4f63c2656d4 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Mon, 5 Sep 2022 16:26:40 +0900 Subject: [PATCH 04/56] =?UTF-8?q?add=20/=20custom-css-extension=20attribut?= =?UTF-8?q?es=E3=82=92=E8=BF=BD=E5=8A=A0=E3=82=92php=E3=81=8B=E3=82=89?= =?UTF-8?q?=E8=A1=8C=E3=81=86=E6=96=B9=E5=BC=8F=E3=81=AB=E5=A4=89=E6=9B=B4?= =?UTF-8?q?(dynamic=20block=E3=81=AB=E5=AF=BE=E5=BF=9C=E3=81=99=E3=82=8B?= =?UTF-8?q?=E3=81=9F=E3=82=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/custom-css-extension.php | 61 +++++++++++++ inc/vk-blocks-pro/vk-blocks-pro-functions.php | 2 + .../common/custom-css-extension.php | 28 ------ inc/vk-blocks/vk-blocks-functions.php | 2 - .../common/custom-css-extension/index.js | 85 +++++-------------- 5 files changed, 82 insertions(+), 96 deletions(-) create mode 100644 inc/vk-blocks-pro/extensions/common/custom-css-extension.php delete mode 100644 inc/vk-blocks/extensions/common/custom-css-extension.php diff --git a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php new file mode 100644 index 000000000..8625ea1cd --- /dev/null +++ b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php @@ -0,0 +1,61 @@ +' . $css . '' . $block_content; + } + return $block_content; + } + return $block_content; +} +add_filter( 'render_block', 'vk_blocks_custom_css_extension', 10, 2 ); + +/** + * 各ブロックにvkbCustomCssのattributesを追加する + * + * @param string $settings settings. + * @param array $metadata metadata. + * @return string + */ +function vk_blocks_add_custom_css_attributes( $settings, $metadata ) { + if ( preg_match( '/core|vk-blocks/', $metadata['name'] ) ) { + $attributes = array(); + if ( ! empty( $settings['attributes'] ) ) { + $attributes = $settings['attributes']; + } + $add_attributes = array( + 'vkbCustomCss' => array( + 'type' => 'string', + 'default' => '', + ), + ); + + $settings['attributes'] = array_merge( + $attributes, + $add_attributes + ); + } + return $settings; +} +add_filter( 'block_type_metadata_settings', 'vk_blocks_add_custom_css_attributes', 10, 2 ); diff --git a/inc/vk-blocks-pro/vk-blocks-pro-functions.php b/inc/vk-blocks-pro/vk-blocks-pro-functions.php index 06e381e8a..a6c2ea253 100644 --- a/inc/vk-blocks-pro/vk-blocks-pro-functions.php +++ b/inc/vk-blocks-pro/vk-blocks-pro-functions.php @@ -11,6 +11,8 @@ require_once dirname( __FILE__ ) . '/class-vk-blocks-pro-options.php'; VK_Blocks_Pro_Options::init(); +require_once dirname( __FILE__ ) . '/extensions/common/custom-css-extension.php'; + /** * Pro 専用のスクリプトの読み込み */ diff --git a/inc/vk-blocks/extensions/common/custom-css-extension.php b/inc/vk-blocks/extensions/common/custom-css-extension.php deleted file mode 100644 index cf3c8ca1c..000000000 --- a/inc/vk-blocks/extensions/common/custom-css-extension.php +++ /dev/null @@ -1,28 +0,0 @@ -' . $css . '' . $block_content; - } - return $block_content; -} -add_filter( 'render_block', 'vk_blocks_custom_css_extension', 10, 2 ); diff --git a/inc/vk-blocks/vk-blocks-functions.php b/inc/vk-blocks/vk-blocks-functions.php index 3a1773d29..3c7b93aba 100644 --- a/inc/vk-blocks/vk-blocks-functions.php +++ b/inc/vk-blocks/vk-blocks-functions.php @@ -16,8 +16,6 @@ require_once dirname( __FILE__ ) . '/class-vk-blocks-print-css-variables.php'; -require_once dirname( __FILE__ ) . '/extensions/common/custom-css-extension.php'; - // オプション値を定義 require_once dirname( __FILE__ ) . '/class-vk-blocks-options.php'; VK_Blocks_Options::init(); diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js index c65167c90..d628808c3 100644 --- a/src/extensions/common/custom-css-extension/index.js +++ b/src/extensions/common/custom-css-extension/index.js @@ -1,19 +1,18 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { PanelBody, Icon } from '@wordpress/components'; import { InspectorControls } from '@wordpress/block-editor'; import { createHigherOrderComponent } from '@wordpress/compose'; import { hasBlockSupport } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; import { useEffect } from '@wordpress/element'; /** * External dependencies */ import classnames from 'classnames'; -import { assign } from 'lodash'; import CodeMirror from '@uiw/react-codemirror'; import { css } from '@codemirror/lang-css'; import { EditorView } from '@codemirror/view'; @@ -35,26 +34,6 @@ export const isAddBlockCss = (blockName) => { return returnBool; }; -/** - * Block.json - * - * @param {string} settings - */ -addFilter('blocks.registerBlockType', 'vk-blocks/custom-css', (settings) => { - if ( - isAddBlockCss(settings.name) && - hasBlockSupport(settings.name, 'customClassName', true) - ) { - settings.attributes = assign(settings.attributes, { - vkbCustomCss: { - type: 'string', - default: null, - }, - }); - } - return settings; -}); - /** * edit.js */ @@ -74,7 +53,7 @@ addFilter( // 追加CSSクラスを半角文字列で分けて配列化 const nowClassArray = className ? className.split(' ') : []; // clientId サンプル7cdd8cf7-7645-4cf5-9d73-1181f8734cfb - const customCssRegex = /vk_custom_css-(|)/; + const customCssRegex = /vk_custom_css-(.+)/; const customCssSelectorRegex = /selector/; // vkbCustomCssが変わった時にclassNameに追加CSSが無いかつ、selectorがあったら追加cssクラスにクラス名を追加する @@ -93,30 +72,27 @@ addFilter( // selectorがなければユニーククラスを削除 if (!customCssSelectorRegex.test(vkbCustomCss)) { - const deleteClass = - nowClassArray.indexOf(/vk_custom_css-(.+)/); + const deleteClass = nowClassArray.indexOf(customCssRegex); nowClassArray.splice(deleteClass, 1); - const newClassName = classnames(nowClassArray); - setAttributes({ className: newClassName }); + setAttributes({ className: classnames(nowClassArray) }); } }, [vkbCustomCss]); - // 複製されたら再利用ブロック以外の時は以前付いていたクラス名vk-custom_css-${clientId}は削除する + // 複製されたら再利用ブロック以外の時は以前付いていたクラス名vk-custom_css-${clientId}を振り直す useEffect(() => { if ( customCssSelectorRegex.test(vkbCustomCss) && isParentReusableBlock(clientId) === false ) { // 前のクラス名を削除する - // const deleteClass = nowClassArray.find(/vk_custom_css-(|)/); - const deleteClass = - nowClassArray.indexOf(/vk_custom_css-(.+)/); + const deleteClass = nowClassArray.indexOf(customCssRegex); nowClassArray.splice(deleteClass, 1); - const newClassName = classnames( - nowClassArray, - `vk_custom_css-${clientId}` - ); - setAttributes({ className: newClassName }); + setAttributes({ + className: classnames( + nowClassArray, + `vk_custom_css-${clientId}` + ), + }); } }, [clientId]); @@ -124,7 +100,8 @@ addFilter( width: '24px', height: '24px', }; - if (vkbCustomCss) { + // vkbCustomCssが存在するかつ空白文字のみではない + if (vkbCustomCss && vkbCustomCss.match(/\S/g)) { iconStyle = { ...iconStyle, color: '#fff', @@ -192,8 +169,10 @@ addFilter( const { vkbCustomCss, className } = attributes; // editor class - const attachedClass = classnames(className, { - [`vk_edit_custom_css`]: vkbCustomCss, + const customCssClass = classnames(props.className, { + // vkbCustomCssが存在するかつ空白文字のみではない + [`vk_edit_custom_css`]: + vkbCustomCss && vkbCustomCss.match(/\S/g), }); // selectorをvk_custom_css-${clientId}に変換する @@ -211,7 +190,7 @@ addFilter( if (isAddBlockCss(name) && hasCustomClassName) { return ( <> - + {(() => { if (cssTag) { return ; @@ -224,29 +203,3 @@ addFilter( }; }, 'vkbCustomCss') ); - -/** - * save.js - * attributeの内容を変更するのでsave.jsの内容とedit.js - * フロントエンドの出力はrender_blockする？ - */ -// addFilter( -// 'blocks.getSaveElement', -// 'vk-blocks/custom-css', -// (el, type, attributes) => { -// const cssTag = attributes.vkbCustomCss; -// if (!cssTag) { -// return el; -// } -// // selectorというクラス名をvk_custom_css-${clientId}に変更する - -// // NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、 -// // カスタムクラスを追加する処理が失敗する -// return ( -// <> -// {el} -// -// -// ); -// } -// ); From 9e096ab4488b6863f510a798d93a59b99d5d6d3e Mon Sep 17 00:00:00 2001 From: shimotmk Date: Tue, 6 Sep 2022 12:33:09 +0900 Subject: [PATCH 05/56] =?UTF-8?q?add=20/=20custom-css-extension=20?= =?UTF-8?q?=E3=82=AF=E3=83=A9=E3=82=B9=E5=90=8D=E5=8F=96=E5=BE=97=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/custom-css-extension/index.js | 67 +++++++++++-------- 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js index d628808c3..b4f73ae68 100644 --- a/src/extensions/common/custom-css-extension/index.js +++ b/src/extensions/common/custom-css-extension/index.js @@ -34,6 +34,9 @@ export const isAddBlockCss = (blockName) => { return returnBool; }; +export const customCssRegex = /vk_custom_css-(.+)/; +export const customCssSelectorRegex = /selector/; + /** * edit.js */ @@ -50,24 +53,24 @@ addFilter( 'customClassName', true ); - // 追加CSSクラスを半角文字列で分けて配列化 + // 追加CSSを半角文字列で分けて配列化 const nowClassArray = className ? className.split(' ') : []; - // clientId サンプル7cdd8cf7-7645-4cf5-9d73-1181f8734cfb - const customCssRegex = /vk_custom_css-(.+)/; - const customCssSelectorRegex = /selector/; - // vkbCustomCssが変わった時にclassNameに追加CSSが無いかつ、selectorがあったら追加cssクラスにクラス名を追加する + // 追加CSSにUniqueクラスを追加したクラス名を取得する + const getUniqueClassName = (_nowClassArray, _clientId) => { + return classnames(_nowClassArray, `vk_custom_css-${_clientId}`); + }; + + // vkbCustomCssが変更されたときにclassNameにUniqueクラスが無いかつvkbCustomCssにselectorがあったらクラス名を追加 useEffect(() => { - // vk_custom_css-${clientId}が無いかつselectorがあればユニーククラスを追加 + // Uniqueクラスが無いかつselectorがあればユニーククラスを追加 if ( !customCssRegex.test(className) && customCssSelectorRegex.test(vkbCustomCss) ) { - const newClassName = classnames( - className, - `vk_custom_css-${clientId}` - ); - setAttributes({ className: newClassName }); + setAttributes({ + className: getUniqueClassName(nowClassArray, clientId), + }); } // selectorがなければユニーククラスを削除 @@ -78,20 +81,29 @@ addFilter( } }, [vkbCustomCss]); - // 複製されたら再利用ブロック以外の時は以前付いていたクラス名vk-custom_css-${clientId}を振り直す + // classNameが変更されたときにvkbCustomCssにselectorがあるかつclassNameにUniqueクラスが無かったらクラス名を追加 useEffect(() => { if ( customCssSelectorRegex.test(vkbCustomCss) && + !customCssRegex.test(className) + ) { + setAttributes({ + className: getUniqueClassName(nowClassArray, clientId), + }); + } + }, [className]); + + // 複製されたときにclassNameにUniqueクラスがあるかつ再利用ブロックではない時はUniqueクラスを振り直す + useEffect(() => { + if ( + customCssRegex.test(className) && isParentReusableBlock(clientId) === false ) { // 前のクラス名を削除する const deleteClass = nowClassArray.indexOf(customCssRegex); nowClassArray.splice(deleteClass, 1); setAttributes({ - className: classnames( - nowClassArray, - `vk_custom_css-${clientId}` - ), + className: getUniqueClassName(nowClassArray, clientId), }); } }, [clientId]); @@ -167,35 +179,34 @@ addFilter( true ); const { vkbCustomCss, className } = attributes; + // 追加CSSを半角文字列で分けて配列化 + const nowClassArray = className ? className.split(' ') : []; - // editor class + // editor用のクラス名 const customCssClass = classnames(props.className, { // vkbCustomCssが存在するかつ空白文字のみではない [`vk_edit_custom_css`]: vkbCustomCss && vkbCustomCss.match(/\S/g), }); - // selectorをvk_custom_css-${clientId}に変換する + // selectorをUniqueクラスに変換する let cssTag; - const classes = - vkbCustomCss && className?.includes('vk_custom_css-') - ? className - .split(' ') - .find((i) => i.includes('vk_custom_css')) - : null; - if (vkbCustomCss) { - cssTag = vkbCustomCss.replace('selector', '.' + classes); + const uniqueClass = customCssRegex.test(className) + ? nowClassArray.find((i) => i.includes('vk_custom_css')) + : null; + if (vkbCustomCss && uniqueClass) { + cssTag = vkbCustomCss.replace('selector', '.' + uniqueClass); } if (isAddBlockCss(name) && hasCustomClassName) { return ( <> - {(() => { if (cssTag) { - return ; + return ; } })()} + ); } From 1b957a4d30888d661d36a935a36789c0ea1c59c7 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Tue, 6 Sep 2022 15:25:29 +0900 Subject: [PATCH 06/56] add / css-extension add e2e test --- .../common/custom-css-extension/index.js | 1 + .../specs/custom-css-extension.test.js | 109 ++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 test/e2e-tests/specs/custom-css-extension.test.js diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js index b4f73ae68..35736a6b1 100644 --- a/src/extensions/common/custom-css-extension/index.js +++ b/src/extensions/common/custom-css-extension/index.js @@ -133,6 +133,7 @@ addFilter( initialOpen={false} > { + let oldLanguage; + beforeEach( async () => { + oldLanguage = await changeSiteLang( 'en' ); + await createNewPost(); + } ); + afterEach( async () => { + await changeSiteLang( oldLanguage ); + }); + + /** + * カスタムCSSテストブロック + */ + const testBlockTitleLists = [ + // コアブロック + 'Paragraph', + // コアブロック dynamic block + 'Calendar', + // VK Blockブロック + 'Alert', + // VK Blockブロック dynamic block + 'Breadcrumb', + ] + + + it( `CustomCssExtension Paragraph`, async () => { + // ブロックを追加 + await insertBlock('Paragraph'); + // Open the sidebar. + await openDocumentSettingsSidebar(); + // 設定パネルを開く + const openButton = await findSidebarPanelWithTitle( 'Custom CSS' ); + await openButton.click(); + // Custom CSSコードエディタをクリックする + await page.click( '[id$="vk-custom-css-code-mirror"]' ); + // cssを記述 + await page.keyboard.type( 'selector { \n background: #f5f5f5;' ); + + const clientId = ( await getAllBlocks() )[ 0 ].clientId; + const regexBefore = new RegExp( + ` +

+` + ); + expect(await getEditedPostContent()).toMatch(regexBefore); + } ) + + it( `CustomCssExtension Archives`, async () => { + await insertBlock('Archives'); + await openDocumentSettingsSidebar(); + const openButton = await findSidebarPanelWithTitle( 'Custom CSS' ); + await openButton.click(); + await page.click( '[id$="vk-custom-css-code-mirror"]' ); + await page.keyboard.type( 'selector { \n background: #f5f5f5;' ); + const clientId = ( await getAllBlocks() )[ 0 ].clientId; + const regexBefore = new RegExp( + `` + ); + expect(await getEditedPostContent()).toMatch(regexBefore); + } ) + + it( `CustomCssExtension Alert`, async () => { + await insertBlock('Alert'); + await openDocumentSettingsSidebar(); + const openButton = await findSidebarPanelWithTitle( 'Custom CSS' ); + await openButton.click(); + await page.click( '[id$="vk-custom-css-code-mirror"]' ); + await page.keyboard.type( 'selector { \n background: #f5f5f5;' ); + const clientId = ( await getAllBlocks() )[ 0 ].clientId; + const regexBefore = new RegExp( + ` +

+` + ); + expect(await getEditedPostContent()).toMatch(regexBefore); + } ) + + it( `CustomCssExtension Breadcrumb`, async () => { + await insertBlock('Breadcrumb'); + await openDocumentSettingsSidebar(); + const openButton = await findSidebarPanelWithTitle( 'Custom CSS' ); + await openButton.click(); + await page.click( '[id$="vk-custom-css-code-mirror"]' ); + await page.keyboard.type( 'selector { \n background: #f5f5f5;' ); + const clientId = ( await getAllBlocks() )[ 0 ].clientId; + const regexBefore = new RegExp( + `` + ); + expect(await getEditedPostContent()).toMatch(regexBefore); + } ) + +}); From e21e0ae02e56df163168fa69f7b132280a6564fb Mon Sep 17 00:00:00 2001 From: shimotmk Date: Tue, 6 Sep 2022 15:56:46 +0900 Subject: [PATCH 07/56] =?UTF-8?q?add=20/=20custom-css-extension=20?= =?UTF-8?q?=E3=82=B5=E3=83=B3=E3=83=97=E3=83=AB=E3=82=B3=E3=83=BC=E3=83=89?= =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/custom-css-extension/index.js | 4 ++-- test/e2e-tests/specs/custom-css-extension.test.js | 15 --------------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js index 35736a6b1..a5833887a 100644 --- a/src/extensions/common/custom-css-extension/index.js +++ b/src/extensions/common/custom-css-extension/index.js @@ -152,8 +152,8 @@ addFilter( 'vk-blocks' )}

- 
-									{'selector {\n    background: black;\n}'}
+								
+									{'selector {\n    background: #f5f5f5;\n}'}
 								

 							
 						
diff --git a/test/e2e-tests/specs/custom-css-extension.test.js b/test/e2e-tests/specs/custom-css-extension.test.js
index 3ad9e75ff..f2b919241 100644
--- a/test/e2e-tests/specs/custom-css-extension.test.js
+++ b/test/e2e-tests/specs/custom-css-extension.test.js
@@ -25,21 +25,6 @@ describe( 'CustomCssExtension', () => {
 		await changeSiteLang( oldLanguage );
 	});
 
-	/**
-	 * カスタムCSSテストブロック
-	 */
-	const testBlockTitleLists = [
-		// コアブロック
-		'Paragraph',
-		// コアブロック dynamic block
-		'Calendar',
-		// VK Blockブロック
-		'Alert',
-		// VK Blockブロック dynamic block
-		'Breadcrumb',
-	]
-
-
 	it( `CustomCssExtension Paragraph`, async () => {
 		// ブロックを追加
 		await insertBlock('Paragraph');

From 0586beef23c14b46c03d1880f0fc3543e0a470b7 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 6 Sep 2022 15:57:04 +0900
Subject: [PATCH 08/56] lint

---
 src/extensions/common/custom-css-extension/index.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index a5833887a..93b03f4d5 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -152,7 +152,14 @@ addFilter(
 										'vk-blocks'
 									)}
 								

-								
+								
 									{'selector {\n    background: #f5f5f5;\n}'}
 								

 							

From 7d81fb1d1cf9a3dfa326735b5ee2055475a72155 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 6 Sep 2022 16:18:20 +0900
Subject: [PATCH 09/56] fix / custom-css fix content css

---
 editor-css/_editor_before_custom-css-extension.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index 5e05cff60..40786abb4 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -11,6 +11,6 @@
 		background: #eeeeee;
 		padding: .2em .6em;
 		z-index:1000;
-		content:'Custom Css';
+		content:'Custom CSS';
 	}
 }

From d518d4ad68a22142a68b711c96f80fcecd584d63 Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Wed, 7 Sep 2022 03:06:07 +0900
Subject: [PATCH 10/56] =?UTF-8?q?update=20/=20=E3=82=AB=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=83=A0CSS=20:=20animation=20=E3=83=96=E3=83=AD=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=81=AE=E4=B8=AD=E3=81=A7=E4=BD=BF=E3=82=8F=E3=82=8C?=
 =?UTF-8?q?=E3=81=9F=E5=A0=B4=E5=90=88=E3=81=AE=E8=A3=9C=E6=AD=A3=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 editor-css/_editor_before_custom-css-extension.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index 40786abb4..063e744b9 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -14,3 +14,10 @@
 		content:'Custom CSS';
 	}
 }
+
+// animationブロックの中のブロックにカスタムCSSを使われた時にラベルがかぶらないようにずらす
+.vk_animation>.block-editor-inner-blocks>.block-editor-block-list__layout {
+	&>*[class*="vk_custom_css-"]:before {
+		top: 2em;
+	}
+}
\ No newline at end of file

From f0b9b409212574644b1ed21be3298f0942d35d27 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 11:34:58 +0900
Subject: [PATCH 11/56] =?UTF-8?q?fix=20/=20custom-css=20selector=E4=BB=A5?=
 =?UTF-8?q?=E5=A4=96=E3=81=AEcss=20selector=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 editor-css/_editor_before_custom-css-extension.scss          | 3 +--
 inc/vk-blocks-pro/extensions/common/custom-css-extension.php | 2 +-
 src/extensions/common/custom-css-extension/index.js          | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index 063e744b9..4da278efb 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -1,4 +1,3 @@
-// animationブロックにカスタムCSSを使った時にどうする？
 .vk_edit_custom_css {
 	border: 1px dashed #ccc;
 	min-height:3em;
@@ -20,4 +19,4 @@
 	&>*[class*="vk_custom_css-"]:before {
 		top: 2em;
 	}
-}
\ No newline at end of file
+}
diff --git a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
index 8625ea1cd..a8d38a3bd 100644
--- a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
+++ b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
@@ -15,7 +15,7 @@
 function vk_blocks_custom_css_extension( $block_content, $block ) {
 	if ( ! empty( $block['attrs']['vkbCustomCss'] ) ) {
 		$css        = $block['attrs']['vkbCustomCss'];
-		$class_name = $block['attrs']['className'];
+		$class_name = ! empty( $block['attrs']['className']) ? $block['attrs']['className'] : '';
 		// 追加CSSクラスを半角文字列で分けて配列化
 		$now_class_array  = ! empty( $class_name ) ? explode( ' ', $class_name ) : array();
 		$custom_css_class = preg_grep( '/vk_custom_css-[\S]/', $now_class_array );
diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 93b03f4d5..c98973179 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -198,11 +198,11 @@ addFilter(
 			});
 
 			// selectorをUniqueクラスに変換する
-			let cssTag;
+			let cssTag = vkbCustomCss ? vkbCustomCss : '';
 			const uniqueClass = customCssRegex.test(className)
 				? nowClassArray.find((i) => i.includes('vk_custom_css'))
 				: null;
-			if (vkbCustomCss && uniqueClass) {
+			if (cssTag && uniqueClass) {
 				cssTag = vkbCustomCss.replace('selector', '.' + uniqueClass);
 			}
 

From b3b5989e7020dd7e51bce595705239f8048d0c55 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 13:21:10 +0900
Subject: [PATCH 12/56] =?UTF-8?q?fix=20/=20custom-css=20custom-css?=
 =?UTF-8?q?=E3=81=AE=E3=82=AF=E3=83=A9=E3=82=B9=E5=90=8D=E3=81=AE=E3=81=BF?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-css-extension/index.js      | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index c98973179..f500a3242 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -63,7 +63,7 @@ addFilter(
 
 			// vkbCustomCssが変更されたときにclassNameにUniqueクラスが無いかつvkbCustomCssにselectorがあったらクラス名を追加
 			useEffect(() => {
-				// Uniqueクラスが無いかつselectorがあればユニーククラスを追加
+				// Uniqueクラスが無いかつselectorがあればUniqueクラスを追加
 				if (
 					!customCssRegex.test(className) &&
 					customCssSelectorRegex.test(vkbCustomCss)
@@ -73,11 +73,12 @@ addFilter(
 					});
 				}
 
-				// selectorがなければユニーククラスを削除
+				// selectorがなければUniqueクラスを削除
 				if (!customCssSelectorRegex.test(vkbCustomCss)) {
-					const deleteClass = nowClassArray.indexOf(customCssRegex);
-					nowClassArray.splice(deleteClass, 1);
-					setAttributes({ className: classnames(nowClassArray) });
+					const newClassArray = nowClassArray.filter(
+						(x) => !customCssRegex.test(x)
+					);
+					setAttributes({ className: classnames(newClassArray) });
 				}
 			}, [vkbCustomCss]);
 
@@ -93,21 +94,23 @@ addFilter(
 				}
 			}, [className]);
 
-			// 複製されたときにclassNameにUniqueクラスがあるかつ再利用ブロックではない時はUniqueクラスを振り直す
+			// 複製された時にclassNameにUniqueクラスがあるかつ再利用ブロックではない時はUniqueクラスを振り直す
 			useEffect(() => {
 				if (
 					customCssRegex.test(className) &&
 					isParentReusableBlock(clientId) === false
 				) {
-					// 前のクラス名を削除する
-					const deleteClass = nowClassArray.indexOf(customCssRegex);
-					nowClassArray.splice(deleteClass, 1);
+					// 以前のUniqueクラスを削除する
+					const newClassArray = nowClassArray.filter(
+						(x) => !customCssRegex.test(x)
+					);
 					setAttributes({
-						className: getUniqueClassName(nowClassArray, clientId),
+						className: getUniqueClassName(newClassArray, clientId),
 					});
 				}
 			}, [clientId]);
 
+			// アイコンのスタイル
 			let iconStyle = {
 				width: '24px',
 				height: '24px',

From 284e306566c5e6bcb14af3a5555cdc05049543cc Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 13:22:07 +0900
Subject: [PATCH 13/56] phpcs

---
 inc/vk-blocks-pro/extensions/common/custom-css-extension.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
index a8d38a3bd..27ce5c37e 100644
--- a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
+++ b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
@@ -15,7 +15,7 @@
 function vk_blocks_custom_css_extension( $block_content, $block ) {
 	if ( ! empty( $block['attrs']['vkbCustomCss'] ) ) {
 		$css        = $block['attrs']['vkbCustomCss'];
-		$class_name = ! empty( $block['attrs']['className']) ? $block['attrs']['className'] : '';
+		$class_name = ! empty( $block['attrs']['className'] ) ? $block['attrs']['className'] : '';
 		// 追加CSSクラスを半角文字列で分けて配列化
 		$now_class_array  = ! empty( $class_name ) ? explode( ' ', $class_name ) : array();
 		$custom_css_class = preg_grep( '/vk_custom_css-[\S]/', $now_class_array );

From 4b9bb2325ca0b58d4ded7ff26dd908ba34f74e88 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 14:43:11 +0900
Subject: [PATCH 14/56] add / custom-css add editor flag option

---
 inc/vk-blocks-pro/admin-pro/admin-pro.php     |  1 +
 .../class-vk-blocks-pro-options.php           |  6 +++
 inc/vk-blocks/vk-blocks-functions.php         |  9 +++-
 src/admin/custom-css.js                       | 48 +++++++++++++++++++
 src/admin/index.js                            |  2 +
 .../common/custom-css-extension/index.js      |  5 +-
 test/phpunit/pro/test-get-options.php         | 33 +++++++++++++
 test/phpunit/pro/test-vk-blocks-options.php   |  8 ++++
 8 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 src/admin/custom-css.js

diff --git a/inc/vk-blocks-pro/admin-pro/admin-pro.php b/inc/vk-blocks-pro/admin-pro/admin-pro.php
index 571138b07..6c7ddd103 100644
--- a/inc/vk-blocks-pro/admin-pro/admin-pro.php
+++ b/inc/vk-blocks-pro/admin-pro/admin-pro.php
@@ -12,6 +12,7 @@
  */
 function vk_blocks_pro_menu( $pro_menu_html ) {
 	$pro_menu_html = '
  • ' . __( 'FAQ Setting', 'vk-blocks' ) . '
    • ';
+	$pro_menu_html = '
  • ' . __( 'Custom CSS Setting', 'vk-blocks' ) . '
    • ';
 	return $pro_menu_html;
 }
 add_action( 'vk_blocks_pro_menu', 'vk_blocks_pro_menu' );
diff --git a/inc/vk-blocks-pro/class-vk-blocks-pro-options.php b/inc/vk-blocks-pro/class-vk-blocks-pro-options.php
index 7e27303bd..82a0a50be 100644
--- a/inc/vk-blocks-pro/class-vk-blocks-pro-options.php
+++ b/inc/vk-blocks-pro/class-vk-blocks-pro-options.php
@@ -24,6 +24,12 @@ class VK_Blocks_Pro_Options {
 			'type'    => 'string',
 			'default' => 'disable',
 		),
+		// 後から追加したbooleanは値がない時にupdate_option出来なくなるのでstringで保存
+		// https://core.trac.wordpress.org/ticket/40007
+		'show_custom_css_editor_flag' => array(
+			'type'    => 'string',
+			'default' => 'true',
+		),
 	);
 
 	/**
diff --git a/inc/vk-blocks/vk-blocks-functions.php b/inc/vk-blocks/vk-blocks-functions.php
index d8dbcbc7e..9cd16e4ca 100644
--- a/inc/vk-blocks/vk-blocks-functions.php
+++ b/inc/vk-blocks/vk-blocks-functions.php
@@ -102,7 +102,14 @@ function vk_blocks_blocks_assets() {
 		wp_localize_script( 'vk-blocks-build-js', 'vk_blocks_check', array( 'is_pro' => false ) );
 	}
 	// ホーム URL を渡す用.
-	wp_localize_script( 'vk-blocks-build-js', 'vk_blocks_params', array( 'home_url' => home_url( '/' ) ) );
+	wp_localize_script(
+		'vk-blocks-build-js',
+		'vk_blocks_params',
+		array(
+			'home_url' => home_url( '/' ),
+			'show_custom_css_editor_flag' => $vk_blocks_options['show_custom_css_editor_flag']
+		)
+	);
 
 	if ( vk_blocks_is_lager_than_wp( '5.0' ) ) {
 		global $vk_blocks_common_attributes;
diff --git a/src/admin/custom-css.js b/src/admin/custom-css.js
new file mode 100644
index 000000000..4c06157c7
--- /dev/null
+++ b/src/admin/custom-css.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { AdminContext } from '@vkblocks/admin/index';
+
+export default function AdminCustomCss() {
+	const { vkBlocksOption, setVkBlocksOption } = useContext(AdminContext);
+	// 後から追加したbooleanは値がない時にupdate_optionできない
+	// https://core.trac.wordpress.org/ticket/40007
+	let migrateLoadSeparateOption;
+	if (vkBlocksOption.show_custom_css_editor_flag === 'true') {
+		migrateLoadSeparateOption = true;
+	} else {
+		migrateLoadSeparateOption = false;
+	}
+	return (
+		<>
+			
    
+				
    
+					{__('Custom CSS Setting', 'vk-blocks')}
+				
    
+				 {
+						if (newValue) {
+							newValue = 'true';
+						} else {
+							newValue = 'false';
+						}
+						setVkBlocksOption({
+							...vkBlocksOption,
+							show_custom_css_editor_flag: newValue,
+						});
+					}}
+				/>
+			
    
+		
+	);
+}
diff --git a/src/admin/index.js b/src/admin/index.js
index 95188b8f4..665ceb303 100644
--- a/src/admin/index.js
+++ b/src/admin/index.js
@@ -11,6 +11,7 @@ import AdminBalloon from '@vkblocks/admin/balloon';
 import AdminMargin from '@vkblocks/admin/margin';
 import AdminLoadSeparate from '@vkblocks/admin/load-separate';
 import AdminNewFaq from '@vkblocks/admin/new-faq';
+import AdminCustomCss from '@vkblocks/admin/custom-css';
 import { SaveButton } from '@vkblocks/admin/save-button';
 /*globals vkBlocksObject */
 
@@ -40,6 +41,7 @@ export default function VKBlocksAdmin() {
 				
 				
 				{vkBlocksObject.isPro && }
+				{vkBlocksObject.isPro && }
 				 {
 	return str.indexOf(keyword) !== -1;
@@ -197,7 +198,9 @@ addFilter(
 			const customCssClass = classnames(props.className, {
 				// vkbCustomCssが存在するかつ空白文字のみではない
 				[`vk_edit_custom_css`]:
-					vkbCustomCss && vkbCustomCss.match(/\S/g),
+					vk_blocks_params.show_custom_css_editor_flag === 'true' &&
+					vkbCustomCss &&
+					vkbCustomCss.match(/\S/g),
 			});
 
 			// selectorをUniqueクラスに変換する
diff --git a/test/phpunit/pro/test-get-options.php b/test/phpunit/pro/test-get-options.php
index dc4ee4cb3..97c1fc95d 100644
--- a/test/phpunit/pro/test-get-options.php
+++ b/test/phpunit/pro/test-get-options.php
@@ -77,6 +77,7 @@ public function test_vk_blocks_get_options() {
 					'vk_blocks_pro_license_key' => null,
 					'display_vk_block_template' => 'display',
 					'new_faq_accordion' => 'disable',
+					'show_custom_css_editor_flag' => 'true',
 				),
 			),
 			// デフォルトの表示非表示調整 v0.44.13
@@ -207,6 +208,36 @@ public function test_vk_blocks_get_options() {
 				),
 				'correct' => null
 			),
+			// カスタムCSS編集画面識別フラグ非表示 v
+			array(
+				'option_check_target' => 'show_custom_css_editor_flag',
+				'option'  => array(
+					'display_vk_block_template' => 'hide',
+					'new_faq_accordion' => 'open',
+					'balloon_border_width' => 2,
+					'margin_unit' => 'px',
+					'margin_size' => array(
+						'lg' => array(
+							'mobile' => 1,
+							'tablet' => 2,
+							'pc' => 3,
+						),
+						'md' => array(
+							'mobile' => 1,
+							'tablet' => 2,
+							'pc' => 3,
+						),
+						'sm' => array(
+							'mobile' => 1,
+							'tablet' => 2,
+							'pc' => 3,
+						),
+					),
+					'load_separate_option' => true,
+					'vk_blocks_pro_license_key' => 'test_license_key',
+				),
+				'correct' => 'true'
+			),
 			// 全てのオプション値を変更した時
 			array(
 				'option'  => array(
@@ -233,6 +264,7 @@ public function test_vk_blocks_get_options() {
 					'vk_blocks_pro_license_key' => 'test_license_key',
 					'display_vk_block_template' => 'display',
 					'new_faq_accordion' => 'open',
+					'show_custom_css_editor_flag' => 'false',
 				),
 				'correct' => array(
 					'balloon_border_width' => 2,
@@ -258,6 +290,7 @@ public function test_vk_blocks_get_options() {
 					'vk_blocks_pro_license_key' => 'test_license_key',
 					'display_vk_block_template' => 'display',
 					'new_faq_accordion' => 'open',
+					'show_custom_css_editor_flag' => 'false',
 				),
 			),
 		);
diff --git a/test/phpunit/pro/test-vk-blocks-options.php b/test/phpunit/pro/test-vk-blocks-options.php
index 115c8f7c6..1d1e0be49 100644
--- a/test/phpunit/pro/test-vk-blocks-options.php
+++ b/test/phpunit/pro/test-vk-blocks-options.php
@@ -24,6 +24,10 @@ public function test_options_scheme() {
 						'type'    => 'string',
 						'default' => 'disable',
 					),
+					'show_custom_css_editor_flag' => array(
+						'type'    => 'string',
+						'default' => 'true',
+					),
 				),
 				'correct' => array(
 					'balloon_border_width' => array(
@@ -106,6 +110,10 @@ public function test_options_scheme() {
 						'type'    => 'string',
 						'default' => 'disable',
 					),
+					'show_custom_css_editor_flag' => array(
+						'type'    => 'string',
+						'default' => 'true',
+					),
 				),
 			),
 		);

From a89d96072c1aac42dd54dbead8581bfcee1dee81 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 14:43:50 +0900
Subject: [PATCH 15/56] phpcs

---
 inc/vk-blocks-pro/class-vk-blocks-pro-options.php | 4 ++--
 inc/vk-blocks/vk-blocks-functions.php             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/inc/vk-blocks-pro/class-vk-blocks-pro-options.php b/inc/vk-blocks-pro/class-vk-blocks-pro-options.php
index 82a0a50be..7a9764062 100644
--- a/inc/vk-blocks-pro/class-vk-blocks-pro-options.php
+++ b/inc/vk-blocks-pro/class-vk-blocks-pro-options.php
@@ -16,11 +16,11 @@ class VK_Blocks_Pro_Options {
 	 * @var array
 	 */
 	private $vk_blocks_pro_option_schema = array(
-		'display_vk_block_template' => array(
+		'display_vk_block_template'   => array(
 			'type'    => 'string',
 			'default' => 'display',
 		),
-		'new_faq_accordion'         => array(
+		'new_faq_accordion'           => array(
 			'type'    => 'string',
 			'default' => 'disable',
 		),
diff --git a/inc/vk-blocks/vk-blocks-functions.php b/inc/vk-blocks/vk-blocks-functions.php
index 9cd16e4ca..953c9dd26 100644
--- a/inc/vk-blocks/vk-blocks-functions.php
+++ b/inc/vk-blocks/vk-blocks-functions.php
@@ -106,8 +106,8 @@ function vk_blocks_blocks_assets() {
 		'vk-blocks-build-js',
 		'vk_blocks_params',
 		array(
-			'home_url' => home_url( '/' ),
-			'show_custom_css_editor_flag' => $vk_blocks_options['show_custom_css_editor_flag']
+			'home_url'                    => home_url( '/' ),
+			'show_custom_css_editor_flag' => $vk_blocks_options['show_custom_css_editor_flag'],
 		)
 	);
 

From 1f45de30b58af3bd527c3e2d91aee1daf121d1d3 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 15:41:29 +0900
Subject: [PATCH 16/56] =?UTF-8?q?fix=20/=20custom=20css=20=E3=83=86?=
 =?UTF-8?q?=E3=82=AD=E3=82=B9=E3=83=88=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-css-extension/index.js        | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index b78cb64bb..4db1ebd62 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -8,6 +8,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * External dependencies
@@ -166,6 +167,22 @@ addFilter(
 								>
 									{'selector {\n    background: #f5f5f5;\n}'}
 								
    
+								
    
+									{__(
+										'If you want the edit screen to be as close to the public screen as possible, or if your own CSS interferes with the CSS for the identification display and does not display as intended on the edit screen, please hide it.',
+										'vk-blocks'
+									)}
+								
    
+								
+									{__(
+										'Custom CSS Setting',
+										'vk-blocks'
+									)}
+								
 							
 						
 					

From 53c3cbc62fedccdf4d13139897501ca615b9666b Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 7 Sep 2022 15:41:48 +0900
Subject: [PATCH 17/56] lint

---
 src/extensions/common/custom-css-extension/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 4db1ebd62..4261de837 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -178,10 +178,7 @@ addFilter(
 										'options-general.php?page=vk_blocks_options#custom-css-setting'
 									)}
 								>
-									{__(
-										'Custom CSS Setting',
-										'vk-blocks'
-									)}
+									{__('Custom CSS Setting', 'vk-blocks')}
 								
 							
 						

From e0d9d337d0c04510eaa05f11ebc44ab579d08412 Mon Sep 17 00:00:00 2001
From: goutetsuguma 
Date: Thu, 8 Sep 2022 13:38:10 +0900
Subject: [PATCH 18/56] =?UTF-8?q?icon=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/custom-css-extension/icon.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extensions/common/custom-css-extension/icon.svg b/src/extensions/common/custom-css-extension/icon.svg
index 3492bf4db..b4faee82e 100644
--- a/src/extensions/common/custom-css-extension/icon.svg
+++ b/src/extensions/common/custom-css-extension/icon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file

From 3e20a19df9b9c253b274218cca529bd4eddb812a Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Fri, 9 Sep 2022 03:22:50 +0900
Subject: [PATCH 19/56] =?UTF-8?q?fix=20/=20=E3=82=B3=E3=82=A2=E3=81=AE?=
 =?UTF-8?q?=E8=A6=8B=E5=87=BA=E3=81=97=E3=81=A7=20Custom=20CSS=20=E3=81=AE?=
 =?UTF-8?q?=E3=83=A9=E3=83=99=E3=83=AB=E3=81=AECSS=E3=81=8C=E8=B2=A0?=
 =?UTF-8?q?=E3=81=91=E3=82=8B=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 editor-css/_editor_before_custom-css-extension.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index 4da278efb..5c1595e49 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -9,8 +9,9 @@
 		font-size:10px;
 		background: #eeeeee;
 		padding: .2em .6em;
-		z-index:1000;
-		content:'Custom CSS';
+		z-index: 1000;
+		line-height: 1.2;
+		content: 'Custom CSS' !important;
 	}
 }
 

From e3eead6750b52f102ea99072b5b567abbee7e622 Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Fri, 9 Sep 2022 03:32:33 +0900
Subject: [PATCH 20/56] =?UTF-8?q?fix=20/=20=E3=82=B3=E3=82=A2=E3=81=AE?=
 =?UTF-8?q?=E8=A6=8B=E5=87=BA=E3=81=97=E3=81=A7=20Custom=20CSS=20=E3=81=AE?=
 =?UTF-8?q?=E8=AD=98=E5=88=A5=E7=B7=9A=E3=81=AECSS=E3=81=8C=E8=B2=A0?=
 =?UTF-8?q?=E3=81=91=E3=82=8B=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 editor-css/_editor_before_custom-css-extension.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index 5c1595e49..e3404ca82 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -1,5 +1,5 @@
 .vk_edit_custom_css {
-	border: 1px dashed #ccc;
+	border: 1px dashed #ccc !important;
 	min-height:3em;
 	left:0;
 	&:before {

From 993c2dcbd92091c0c8725b6e4c3786360924ce45 Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Fri, 9 Sep 2022 03:44:11 +0900
Subject: [PATCH 21/56] =?UTF-8?q?change=20:=20=E8=A8=AD=E5=AE=9A=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92?=
 =?UTF-8?q?=20blank=20=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/custom-css-extension/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 4261de837..4403ce1d4 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -177,6 +177,7 @@ addFilter(
 									href={addQueryArgs(
 										'options-general.php?page=vk_blocks_options#custom-css-setting'
 									)}
+									target="_blank"
 								>
 									{__('Custom CSS Setting', 'vk-blocks')}
 								

From 5bc32bc02cf1d772f2731040d955ac071b2202db Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Fri, 9 Sep 2022 03:46:37 +0900
Subject: [PATCH 22/56] =?UTF-8?q?change=20:=20=E8=A8=AD=E5=AE=9A=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92?=
 =?UTF-8?q?=20blank=20=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/custom-css-extension/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 4403ce1d4..d240776e9 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -178,6 +178,7 @@ addFilter(
 										'options-general.php?page=vk_blocks_options#custom-css-setting'
 									)}
 									target="_blank"
+									rel="noreferrer"
 								>
 									{__('Custom CSS Setting', 'vk-blocks')}
 								

From 8599e333aaa8f3885a6ef3c19ded0a2a4372db07 Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Fri, 9 Sep 2022 03:59:20 +0900
Subject: [PATCH 23/56] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=AB?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AECSS=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/custom-css-extension/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index d240776e9..fb64737f7 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -179,6 +179,7 @@ addFilter(
 									)}
 									target="_blank"
 									rel="noreferrer"
+									className='components-button is-secondary is-small'
 								>
 									{__('Custom CSS Setting', 'vk-blocks')}
 								

From a836ae7a5765f0f6d5e8a8d1ba13e1912b1c14bc Mon Sep 17 00:00:00 2001
From: kurudrive 
Date: Fri, 9 Sep 2022 04:01:34 +0900
Subject: [PATCH 24/56] lint

---
 src/extensions/common/custom-css-extension/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index fb64737f7..1943758c7 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -179,7 +179,7 @@ addFilter(
 									)}
 									target="_blank"
 									rel="noreferrer"
-									className='components-button is-secondary is-small'
+									className="components-button is-secondary is-small"
 								>
 									{__('Custom CSS Setting', 'vk-blocks')}
 								

From 477d5194965b25e1d64a656c766d136ee66f861a Mon Sep 17 00:00:00 2001
From: goutetsuguma 
Date: Fri, 9 Sep 2022 09:25:07 +0900
Subject: [PATCH 25/56] =?UTF-8?q?vk=20icon=20=E3=81=AB=E5=B7=AE=E3=81=97?=
 =?UTF-8?q?=E6=9B=BF=E3=81=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/custom-css-extension/icon.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extensions/common/custom-css-extension/icon.svg b/src/extensions/common/custom-css-extension/icon.svg
index b4faee82e..a2a1f5a7e 100644
--- a/src/extensions/common/custom-css-extension/icon.svg
+++ b/src/extensions/common/custom-css-extension/icon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file

From c15dea11ea06c5510b4825b114280c2291702ede Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 13 Sep 2022 15:25:17 +0900
Subject: [PATCH 26/56] =?UTF-8?q?add=20/=20css=20ex=20unit=20=E3=81=AE?=
 =?UTF-8?q?=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF=E7=94=A8=E3=81=AB=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-css-extension/index.js      | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 1943758c7..5e894fe4c 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -39,6 +39,37 @@ export const isAddBlockCss = (blockName) => {
 export const customCssRegex = /vk_custom_css-(.+)/;
 export const customCssSelectorRegex = /selector/;
 
+// ExUnitに入っているvk blocksブロック,
+const ex_unit_block = [
+	'vk-blocks/share-button',
+	'vk-blocks/child-page-index',
+	'vk-blocks/contact-section',
+	'vk-blocks/page-list-ancestor',
+	'vk-blocks/sitemap',
+	'vk-blocks/cta',
+];
+
+/**
+ * index.js
+ *
+ * vk-blocksのブロックはPHPのフックblock_type_metadata_settingsで対応できるがExUnitのブロックはjsのフックを使う必要がある
+ */
+addFilter('blocks.registerBlockType', 'vk-blocks/custom-css', (settings) => {
+	if (ex_unit_block.includes(settings.name)) {
+		settings.attributes = {
+			// Deploy original settings.attributes to array and...
+			...settings.attributes,
+			// Add vkbCustomCss attributes
+			...{
+				vkbCustomCss: {
+					type: 'string',
+				},
+			},
+		};
+	}
+	return settings;
+});
+
 /**
  * edit.js
  */

From 7976410ef9ac5583ba9c70c53d86adf16377e26d Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 13 Sep 2022 15:36:09 +0900
Subject: [PATCH 27/56] =?UTF-8?q?fix=20/=20css=20=E6=9D=9C=E6=92=B0?=
 =?UTF-8?q?=E3=81=AA=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/custom-css-extension/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 5e894fe4c..4ed022e35 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
-import { PanelBody, Icon } from '@wordpress/components';
+import { PanelBody, Icon, Button } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -204,16 +204,17 @@ addFilter(
 										'vk-blocks'
 									)}
 								
    
-								
 									{__('Custom CSS Setting', 'vk-blocks')}
-								
+								
 							
 						
 					

From b5184ea03da1172226a4478608ad8de932453d5b Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 13 Sep 2022 15:38:57 +0900
Subject: [PATCH 28/56] fix / custom css letter-spacing

---
 editor-css/_editor_before_custom-css-extension.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index e3404ca82..5f831865a 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -11,6 +11,7 @@
 		padding: .2em .6em;
 		z-index: 1000;
 		line-height: 1.2;
+		letter-spacing: 1px;
 		content: 'Custom CSS' !important;
 	}
 }

From ab4ce8f4e8b7b5d34200ea3743c91ee65a63df1b Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 13 Sep 2022 16:03:08 +0900
Subject: [PATCH 29/56] =?UTF-8?q?dev=20=E3=83=86=E3=82=B9=E3=83=88?=
 =?UTF-8?q?=E3=83=90=E3=83=BC=E3=82=B8=E3=83=A7=E3=83=B3=E7=94=A8=E3=81=AB?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E3=82=92=E6=97=A5=E6=9C=AC=E8=AA=9E=E3=81=AB?=
 =?UTF-8?q?=E3=81=97=E3=81=A6=E3=81=8A=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-css-extension/index.js      | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 4ed022e35..e122797b9 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -184,10 +184,23 @@ addFilter(
 								/>
 								
    
 									{__(
-										'If selector is set to "selector", it will be replaced with a block-specific CSS class.',
+										'selector を指定した場合、ブロック固有の CSS クラスに置き換わります。',
 										'vk-blocks'
 									)}
 								
    
+								
    
+									{__(
+										'"selector"以外のCSSセレクターは、ページ全体に影響する可能性があります。',
+										'vk-blocks'
+									)}
+								
    
+								{/* 
    
+									{__(
+										'If selector is set to "selector", it will be replaced with a block-specific CSS class. CSS selectors other than "selector" may affect the entire page.',
+										'vk-blocks'
+									)}
+								
     */}
+								
    {__('Example:', 'vk-blocks')}
    
 								
     								
    
 									{__(
-										'If you want the edit screen to be as close to the public screen as possible, or if your own CSS interferes with the CSS for the identification display and does not display as intended on the edit screen, please hide it.',
+										'編集画面をできるだけ公開画面に近づけたい場合や、自作のCSSが識別表示用のCSSと干渉して編集画面で意図した通りに表示されない場合は、非表示にすることをお勧めします。',
 										'vk-blocks'
 									)}
 								
    
+								{/* 
    
+									{__(
+										'If you want the edit screen to be as close to the public screen as possible, or if your own CSS interferes with the CSS for the identification display and does not display as intended on the edit screen, please hide it.',
+										'vk-blocks'
+									)}
+								
     */}
 								
 						
 						
 						
+						
 						
 							
 						

From a7d4c63d08e4ac47f8a982d76e5e5af6b1ac8532 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 19 Oct 2022 10:56:28 +0900
Subject: [PATCH 51/56] add / custom css translate

---
 inc/vk-blocks-pro/admin-pro/admin-pro.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inc/vk-blocks-pro/admin-pro/admin-pro.php b/inc/vk-blocks-pro/admin-pro/admin-pro.php
index 6c7ddd103..b46b63968 100644
--- a/inc/vk-blocks-pro/admin-pro/admin-pro.php
+++ b/inc/vk-blocks-pro/admin-pro/admin-pro.php
@@ -12,7 +12,7 @@
  */
 function vk_blocks_pro_menu( $pro_menu_html ) {
 	$pro_menu_html = '
  • ' . __( 'FAQ Setting', 'vk-blocks' ) . '
    • ';
-	$pro_menu_html = '
  • ' . __( 'Custom CSS Setting', 'vk-blocks' ) . '
    • ';
+	$pro_menu_html = '
  • ' . __( 'Custom CSS Setting', /* 'カスタムCSS設定', */ 'vk-blocks' ) . '
    • ';
 	return $pro_menu_html;
 }
 add_action( 'vk_blocks_pro_menu', 'vk_blocks_pro_menu' );

From 07a561d4e85aa52b2dbd4d747f0988ab2ce6dbcf Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Mon, 24 Oct 2022 10:42:37 +0900
Subject: [PATCH 52/56] add / css custom-css-extension

---
 .../_editor_before_custom-css-extension.scss  |   7 +
 .../common/custom-css-extension.php           | 149 +++---
 inc/vk-blocks/class-vk-blocks-options.php     |   6 +-
 src/admin/custom-css.js                       |  19 +-
 .../common/custom-css-extension/index.js      | 454 +++++++++---------
 test/phpunit/pro/test-get-options.php         |   8 +-
 test/phpunit/pro/test-vk-blocks-options.php   |   2 +-
 7 files changed, 345 insertions(+), 300 deletions(-)

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
index 5f831865a..e22bec7be 100644
--- a/editor-css/_editor_before_custom-css-extension.scss
+++ b/editor-css/_editor_before_custom-css-extension.scss
@@ -22,3 +22,10 @@
 		top: 2em;
 	}
 }
+
+.vk-custom-css-sample-code {
+	white-space: pre-wrap;
+	padding: 16px;
+	display: block;
+	background: #f5f5f5;
+}
diff --git a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
index 12711353d..02b279f5f 100644
--- a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
+++ b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
@@ -6,54 +6,35 @@
  */
 
 /**
- * Render Custom Css Extension css
- *
- * @see https://github.com/WordPress/gutenberg/blob/3358251ae150e33dd6c0e0fb15be110cca1b5c59/lib/block-supports/layout.php#L294
+ * カスタムCSSをサポートしているかどうか
  *
- * @param string $block_content block_content.
- * @param array  $block block.
+ * @param string $block_name block_name.
  * @return string
  */
-function vk_blocks_custom_css_extension( $block_content, $block ) {
-	if ( ! empty( $block['attrs']['vkbCustomCss'] ) ) {
-		$css = $block['attrs']['vkbCustomCss'];
-		// Uniqueクラスを生成
-		$custom_css_class = wp_unique_id( 'vk_custom_css_' );
-		// selector文字列があるとき
-		if ( strpos( $css, 'selector' ) !== false ) {
-			// selectorをUniqueクラスに変換
-			$css = preg_replace( '/selector/', '.' . $custom_css_class, $css );
+function vk_blocks_has_custom_css_support( $block_name ) {
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
+	if ( ! block_has_support( $block_type, array( 'customClassName' ), true ) ) {
+		return false;
+	}
 
-			// vk_custom_cssをUniqueクラスに変換
-			if ( strpos( $block_content, ' vk_custom_css ' ) !== false ) {
-				// vk_custom_cssが途中に付いている (ex:class="hoge vk_custom_css huga")
-				$block_content = preg_replace( '/ vk_custom_css /', ' ' . $custom_css_class . ' ', $block_content, 1 );
-			} elseif ( strpos( $block_content, '="vk_custom_css ' ) !== false ) {
-				// vk_custom_cssから始まる 複数クラス
-				$block_content = preg_replace( '/="vk_custom_css /', '="' . $custom_css_class . ' ', $block_content, 1 );
-			} elseif ( strpos( $block_content, ' vk_custom_css"' ) !== false ) {
-				// vk_custom_cssで終わる 複数クラス
-				$block_content = preg_replace( '/ vk_custom_css"/', ' ' . $custom_css_class . '"', $block_content, 1 );
-			} else {
-				// vk_custom_cssのみ
-				$block_content = preg_replace( '/vk_custom_css/', $custom_css_class, $block_content, 1 );
-			}
-		}
-		$css = vk_blocks_minify_css( $css );
-		if ( ! empty( $css ) ) {
-			if ( function_exists( 'wp_enqueue_block_support_styles' ) ) {
-				wp_enqueue_block_support_styles( $css );
-				return $block_content;
-				// 5.8のサポートを切るならelse内は削除する
-			} else {
-				return '' . $block_content;
-			}
+	$return_bool = preg_match( '/core|vk-blocks/', $block_name ) ? true : false;
+
+	$exclude_blocks = array(
+		// ExUnitに入っているvk blocksブロック
+		'vk-blocks/share-button',
+		'vk-blocks/child-page-index',
+		'vk-blocks/contact-section',
+		'vk-blocks/page-list-ancestor',
+		'vk-blocks/sitemap',
+		'vk-blocks/cta',
+	);
+	foreach ( $exclude_blocks as $exclude_block ) {
+		if ( $block_name === $exclude_block ) {
+			$return_bool = false;
 		}
-		return $block_content;
 	}
-	return $block_content;
-}
-add_filter( 'render_block', 'vk_blocks_custom_css_extension', 10, 2 );
+	return $return_bool;
+};
 
 /**
  * 各ブロックにvkbCustomCssのattributesを追加する
@@ -63,23 +44,77 @@ function vk_blocks_custom_css_extension( $block_content, $block ) {
  * @return string
  */
 function vk_blocks_add_custom_css_attributes( $settings, $metadata ) {
-	if ( preg_match( '/core|vk-blocks/', $metadata['name'] ) ) {
-		$attributes = array();
-		if ( ! empty( $settings['attributes'] ) ) {
-			$attributes = $settings['attributes'];
-		}
-		$add_attributes = array(
-			'vkbCustomCss' => array(
-				'type'    => 'string',
-				'default' => '',
-			),
-		);
+	if ( ! vk_blocks_has_custom_css_support( $metadata['name'] ) ) {
+		return $settings;
+	}
 
-		$settings['attributes'] = array_merge(
-			$attributes,
-			$add_attributes
-		);
+	$attributes = array();
+	if ( ! empty( $settings['attributes'] ) ) {
+		$attributes = $settings['attributes'];
 	}
+	$add_attributes = array(
+		'vkbCustomCss' => array(
+			'type'    => 'string',
+			'default' => '',
+		),
+	);
+
+	$settings['attributes'] = array_merge(
+		$attributes,
+		$add_attributes
+	);
 	return $settings;
 }
 add_filter( 'block_type_metadata_settings', 'vk_blocks_add_custom_css_attributes', 10, 2 );
+
+/**
+ * Render Custom Css Extension css
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/3358251ae150e33dd6c0e0fb15be110cca1b5c59/lib/block-supports/layout.php#L294
+ *
+ * @param string $block_content block_content.
+ * @param array  $block block.
+ * @return string
+ */
+function vk_blocks_render_custom_css( $block_content, $block ) {
+	if ( ! vk_blocks_has_custom_css_support( $block['blockName'] ) ) {
+		return $block_content;
+	}
+
+	if ( empty( $block['attrs']['vkbCustomCss'] ) ) {
+		return $block_content;
+	}
+
+	$css = $block['attrs']['vkbCustomCss'];
+	// selector文字列があるとき
+	if ( strpos( $css, 'selector' ) !== false ) {
+		// Uniqueクラスを生成
+		$unique_class = wp_unique_id( 'vk_custom_css_' );
+		// selectorをUniqueクラスに変換
+		$css = preg_replace( '/selector/', '.' . $unique_class, $css );
+
+		// vk_custom_cssをUniqueクラスに変換
+		if ( strpos( $block_content, ' vk_custom_css ' ) !== false ) {
+			// vk_custom_cssが途中に付いている e.g.class="hoge vk_custom_css huga"
+			$block_content = preg_replace( '/ vk_custom_css /', ' ' . $unique_class . ' ', $block_content, 1 );
+		} elseif ( strpos( $block_content, '="vk_custom_css ' ) !== false ) {
+			// vk_custom_cssから始まる 複数クラス
+			$block_content = preg_replace( '/="vk_custom_css /', '="' . $unique_class . ' ', $block_content, 1 );
+		} elseif ( strpos( $block_content, ' vk_custom_css"' ) !== false ) {
+			// vk_custom_cssで終わる 複数クラス
+			$block_content = preg_replace( '/ vk_custom_css"/', ' ' . $unique_class . '"', $block_content, 1 );
+		} else {
+			// vk_custom_cssのみ
+			$block_content = preg_replace( '/vk_custom_css/', $unique_class, $block_content, 1 );
+		}
+	}
+	$css = vk_blocks_minify_css( $css );
+	if ( function_exists( 'wp_enqueue_block_support_styles' ) ) {
+		wp_enqueue_block_support_styles( $css );
+		// 5.8のサポートを切るならelse内は削除する
+	} else {
+		$block_content = '' . $block_content;
+	}
+	return $block_content;
+}
+add_filter( 'render_block', 'vk_blocks_render_custom_css', 10, 2 );
diff --git a/inc/vk-blocks/class-vk-blocks-options.php b/inc/vk-blocks/class-vk-blocks-options.php
index 9fafd4c81..3cb752ec8 100644
--- a/inc/vk-blocks/class-vk-blocks-options.php
+++ b/inc/vk-blocks/class-vk-blocks-options.php
@@ -137,14 +137,12 @@ public static function options_scheme() {
 				'type'    => 'boolean',
 				'default' => false,
 			),
-			// 後から追加したbooleanは値がない時にupdate_option出来なくなるのでstringで保存
-			// https://core.trac.wordpress.org/ticket/40007
 			'show_custom_css_editor_flag' => array(
 				'type'    => 'string',
-				'default' => 'true',
+				'default' => 'show',
 			),
 		);
-		$array = array_merge( $default_options_schema, apply_filters( 'vk_blocks_default_options_scheme', array() ) );
+		$array                  = array_merge( $default_options_schema, apply_filters( 'vk_blocks_default_options_scheme', array() ) );
 		return $array;
 	}
 
diff --git a/src/admin/custom-css.js b/src/admin/custom-css.js
index f03d1b368..fcfe67279 100644
--- a/src/admin/custom-css.js
+++ b/src/admin/custom-css.js
@@ -12,14 +12,7 @@ import { AdminContext } from '@vkblocks/admin/index';
 
 export default function AdminCustomCss() {
 	const { vkBlocksOption, setVkBlocksOption } = useContext(AdminContext);
-	// 後から追加したbooleanは値がない時にupdate_optionできない
-	// https://core.trac.wordpress.org/ticket/40007
-	let migrateLoadSeparateOption;
-	if (vkBlocksOption.show_custom_css_editor_flag === 'true') {
-		migrateLoadSeparateOption = true;
-	} else {
-		migrateLoadSeparateOption = false;
-	}
+
 	return (
 		<>
 			
    
@@ -37,12 +30,16 @@ export default function AdminCustomCss() {
 						// 'Show Custom CSS flag in editor',
 						'vk-blocks'
 					)}
-					checked={migrateLoadSeparateOption}
+					checked={
+						vkBlocksOption.show_custom_css_editor_flag === 'show'
+							? true
+							: false
+					}
 					onChange={(newValue) => {
 						if (newValue) {
-							newValue = 'true';
+							newValue = 'show';
 						} else {
-							newValue = 'false';
+							newValue = 'hide';
 						}
 						setVkBlocksOption({
 							...vkBlocksOption,
diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 507db40c4..9e5933425 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -26,7 +26,12 @@ export const inString = (str, keyword) => {
 	return str.indexOf(keyword) !== -1;
 };
 
-export const isAddBlockCss = (blockName) => {
+export const hasCustomCssSupport = (blockName) => {
+	// 追加CSSクラスを許可していない場合はfalse
+	if (!hasBlockSupport(blockName, 'customClassName', true)) {
+		return false;
+	}
+
 	const allowed = ['core', 'vk-blocks'];
 	let returnBool =
 		allowed.find((item) => inString(blockName, item)) !== undefined;
@@ -50,251 +55,254 @@ export const isAddBlockCss = (blockName) => {
 	return returnBool;
 };
 
-export const customCssRegex = /vk_custom_css/;
+export const existsCss = (css) => {
+	// cssが存在するかつ空白文字のみではない
+	return css && css.match(/\S/g);
+};
+
 export const customCssSelectorRegex = /selector/;
 
 /**
  * Filters registered block settings.
+ *
+ * @param {Object} settings
  */
-addFilter(
-	'blocks.registerBlockType',
-	'vk-blocks/custom-css-extension',
-	(settings) => {
-		const hasCustomClassName = hasBlockSupport(
-			settings.name,
-			'customClassName',
-			true
-		);
-		if (isAddBlockCss(settings.name) && hasCustomClassName) {
-			settings.attributes = {
-				...settings.attributes,
-				vkbCustomCss: {
-					type: 'string',
-				},
-			};
-		}
+export function addAttribute(settings) {
+	if (!hasCustomCssSupport(settings.name)) {
 		return settings;
 	}
-);
+	settings.attributes = {
+		...settings.attributes,
+		vkbCustomCss: {
+			type: 'string',
+		},
+	};
+	return settings;
+}
 
 /**
- * edit.js
+ * Override the default edit UI to include layout controls
  */
-addFilter(
-	'editor.BlockEdit',
-	'vk-blocks/custom-css',
-	createHigherOrderComponent((BlockEdit) => {
-		return (props) => {
-			const { name, attributes, setAttributes, isSelected } = props;
-			const { vkbCustomCss, className } = attributes;
-			const hasCustomClassName = hasBlockSupport(
-				name,
-				'customClassName',
-				true
-			);
-			// 追加CSSを半角文字列で分けて配列化
-			const nowClassArray = className ? className.split(' ') : [];
+export const withInspectorControls = createHigherOrderComponent(
+	(BlockEdit) => (props) => {
+		const { name, attributes, setAttributes, isSelected } = props;
+		if (!hasCustomCssSupport(name) || !isSelected) {
+			return ;
+		}
 
-			// vkbCustomCssが変更されたとき
-			useEffect(() => {
-				// カスタムCSS用クラスが無いかつselectorがあればカスタムCSS用クラスを追加
-				if (
-					nowClassArray.indexOf('vk_custom_css') === -1 &&
-					customCssSelectorRegex.test(vkbCustomCss)
-				) {
-					setAttributes({
-						className: classnames(nowClassArray, `vk_custom_css`),
-					});
-				}
+		const { vkbCustomCss, className } = attributes;
+		// 追加CSSを半角文字列で分けて配列化
+		const nowClassArray = className ? className.split(' ') : [];
 
-				// カスタムCSS用クラスがあるかつselectorがなければカスタムCSS用クラスを削除
-				if (
-					nowClassArray.indexOf('vk_custom_css') !== -1 &&
-					!customCssSelectorRegex.test(vkbCustomCss)
-				) {
-					const deleteClass = nowClassArray.indexOf('vk_custom_css');
-					nowClassArray.splice(deleteClass, 1);
-					setAttributes({ className: classnames(nowClassArray) });
-				}
-			}, [vkbCustomCss]);
+		// 追加 CSS クラスにvk_custom_cssがあるか
+		const existsCustomCssClass = (_nowClassArray) => {
+			return _nowClassArray.indexOf('vk_custom_css') !== -1
+				? true
+				: false;
+		};
 
-			// classNameが変更されたときに
-			useEffect(() => {
-				// カスタムCSS用クラスが無いかつselectorがあればカスタムCSS用クラスを追加
-				if (
-					nowClassArray.indexOf('vk_custom_css') === -1 &&
-					customCssSelectorRegex.test(vkbCustomCss)
-				) {
-					setAttributes({
-						className: classnames(nowClassArray, `vk_custom_css`),
-					});
-				}
-			}, [className]);
+		// カスタムCSSにselectorがあるか
+		const existsCustomCssSelector = (_vkbCustomCss) => {
+			return customCssSelectorRegex.test(_vkbCustomCss);
+		};
 
-			// アイコンのスタイル
-			let iconStyle = {
-				width: '24px',
-				height: '24px',
-			};
-			// vkbCustomCssが存在するかつ空白文字のみではない
-			if (vkbCustomCss && vkbCustomCss.match(/\S/g)) {
-				iconStyle = {
-					...iconStyle,
-					color: '#fff',
-					background: '#1e1e1e',
-				};
+		// vkbCustomCssが変更されたとき
+		useEffect(() => {
+			if (
+				!existsCustomCssClass(nowClassArray) &&
+				existsCustomCssSelector(vkbCustomCss)
+			) {
+				// カスタムCSS用クラスを追加
+				setAttributes({
+					className: classnames(nowClassArray, `vk_custom_css`),
+				});
 			}
 
-			if (isAddBlockCss(name) && hasCustomClassName && isSelected) {
-				return (
-					<>
-						
-						
-							}
-								title={__(
-									'カスタムCSS',
-									// 'Custom CSS',
-									'vk-blocks'
-								)}
-								initialOpen={false}
-							>
-								 {
-										setAttributes({ vkbCustomCss: value });
-									}}
-								/>
-								{(() => {
-									if (
-										vkbCustomCss &&
-										vkbCustomCss.indexOf('　') !== -1
-									) {
-										return (
-											
    
-												{__(
-													'注意 : 全角スペースが含まれています。CSSが効かない可能性があります。',
-													// 'Note : Contains double-byte spaces; CSS may not work.',
-													'vk-blocks'
-												)}
-											
    
-										);
-									}
-								})()}
-								
    
-									{__(
-										'selector を指定した場合、ブロック固有の CSS クラスに置き換わります。',
-										// 'If selector is specified, it is replaced by a block-specific CSS class.',
-										'vk-blocks'
-									)}
-								
    
-								
    
-									{__(
-										'"selector"以外のCSSセレクターは、ページ全体に影響する可能性があります。',
-										// 'If selector is set to "selector", it will be replaced with a block-specific CSS class. CSS selectors other than "selector" may affect the entire page.',
-										'vk-blocks'
-									)}
-								
    
-								
    
-									{__(
-										'例:',
-										// 'Example:',
-										'vk-blocks'
-									)}
-								
    
-								
    -									{'selector {\n    background: #f5f5f5;\n}'}
-								
    
-								
    
-									{__(
-										'編集画面をできるだけ公開画面に近づけたい場合や、自作のCSSが識別表示用のCSSと干渉して編集画面で意図した通りに表示されない場合は、非表示にすることをお勧めします。',
-										// 'If you want the edit screen to be as close to the public screen as possible, or if your own CSS interferes with the CSS for the identification display and does not display as intended on the edit screen, please hide it.',
-										'vk-blocks'
-									)}
-								
    
-								
-							    
-						    
-					
-				);
+			if (
+				existsCustomCssClass(nowClassArray) &&
+				!existsCustomCssSelector(vkbCustomCss)
+			) {
+				// カスタムCSS用クラスを削除
+				const deleteClass = nowClassArray.indexOf('vk_custom_css');
+				nowClassArray.splice(deleteClass, 1);
+				setAttributes({ className: classnames(nowClassArray) });
 			}
-			return ;
+		}, [vkbCustomCss]);
+
+		// classNameが変更されたときに
+		useEffect(() => {
+			if (
+				!existsCustomCssClass(nowClassArray) &&
+				existsCustomCssSelector(vkbCustomCss)
+			) {
+				// カスタムCSS用クラスを追加
+				setAttributes({
+					className: classnames(`vk_custom_css`, nowClassArray),
+				});
+			}
+		}, [className]);
+
+		// アイコンのスタイル
+		let iconStyle = {
+			width: '24px',
+			height: '24px',
 		};
-	}, 'vkbCustomCssSection')
+		if (existsCss(vkbCustomCss)) {
+			iconStyle = {
+				...iconStyle,
+				color: '#fff',
+				background: '#1e1e1e',
+			};
+		}
+
+		return (
+			<>
+				
+				
+					}
+						title={__(
+							'カスタムCSS',
+							// 'Custom CSS',
+							'vk-blocks'
+						)}
+						initialOpen={false}
+					>
+						 {
+								setAttributes({ vkbCustomCss: value });
+							}}
+						/>
+						{(() => {
+							if (
+								vkbCustomCss &&
+								vkbCustomCss.indexOf('　') !== -1
+							) {
+								return (
+									
    
+										{__(
+											'注意 : 全角スペースが含まれています。CSSが効かない可能性があります。',
+											// 'Note : Contains double-byte spaces; CSS may not work.',
+											'vk-blocks'
+										)}
+									
    
+								);
+							}
+						})()}
+						
    
+							{__(
+								'selector を指定した場合、ブロック固有の CSS クラスに置き換わります。',
+								// 'If selector is specified, it is replaced by a block-specific CSS class.',
+								'vk-blocks'
+							)}
+						
    
+						
    
+							{__(
+								'"selector"以外のCSSセレクターは、ページ全体に影響する可能性があります。',
+								// 'If selector is set to "selector", it will be replaced with a block-specific CSS class. CSS selectors other than "selector" may affect the entire page.',
+								'vk-blocks'
+							)}
+						
    
+						
    
+							{__(
+								'例:',
+								// 'Example:',
+								'vk-blocks'
+							)}
+						
    
+						
    +							{'selector {\n    background: #f5f5f5;\n}'}
+						
    
+						
    
+							{__(
+								'編集画面をできるだけ公開画面に近づけたい場合や、自作のCSSが識別表示用のCSSと干渉して編集画面で意図した通りに表示されない場合は、非表示にすることをお勧めします。',
+								// 'If you want the edit screen to be as close to the public screen as possible, or if your own CSS interferes with the CSS for the identification display and does not display as intended on the edit screen, please hide it.',
+								'vk-blocks'
+							)}
+						
    
+						
+					    
+				    
+			
+		);
+	},
+	'withInspectorControls'
 );
 
 /**
- * edit.js
+ * Override the default block element to include elements styles.
  */
-addFilter(
-	'editor.BlockListBlock',
-	'vk-blocks/custom-css',
-	createHigherOrderComponent((BlockListBlock) => {
-		return (props) => {
-			const { name, attributes } = props;
-			const hasCustomClassName = hasBlockSupport(
-				name,
-				'customClassName',
-				true
-			);
-			const { vkbCustomCss } = attributes;
-			// 編集画面で使用出来る Unique id
-			// @see https://github.com/WordPress/gutenberg/blob/086b77ed409a70a6c6a6e74dee704851eff812f2/packages/compose/src/hooks/use-instance-id/README.md
-			const id = useInstanceId(BlockListBlock);
-			const uniqueClass = `vk_custom_css_${id}`;
+const withElementsStyles = createHigherOrderComponent(
+	(BlockListBlock) => (props) => {
+		const { name, attributes } = props;
+		if (!hasCustomCssSupport(name)) {
+			return ;
+		}
+		// 編集画面で使用出来る Unique id
+		// @see https://github.com/WordPress/gutenberg/blob/086b77ed409a70a6c6a6e74dee704851eff812f2/packages/compose/src/hooks/use-instance-id/README.md
+		const id = useInstanceId(BlockListBlock);
+		const uniqueClass = `vk_custom_css_${id}`;
 
-			// editor用のクラス名を追加
-			const customCssClass = classnames(props.className, {
-				// vkbCustomCssが存在するかつ空白文字のみではない
-				[uniqueClass]: vkbCustomCss && vkbCustomCss.match(/\S/g),
-				[`vk_edit_custom_css`]:
-					vk_blocks_params.show_custom_css_editor_flag === 'true' &&
-					vkbCustomCss &&
-					vkbCustomCss.match(/\S/g),
-			});
+		const { vkbCustomCss } = attributes;
+		// editor用のクラス名を追加
+		const customCssClass = classnames(props.className, {
+			[uniqueClass]: existsCss(vkbCustomCss),
+			[`vk_edit_custom_css`]:
+				vk_blocks_params.show_custom_css_editor_flag === 'show' &&
+				existsCss(vkbCustomCss),
+		});
 
-			// selectorをUniqueクラスに変換する
-			let cssTag = vkbCustomCss ? vkbCustomCss : '';
-			if (cssTag && uniqueClass) {
-				cssTag = vkbCustomCss.replace('selector', '.' + uniqueClass);
-			}
+		// selectorをUniqueクラスに変換する
+		let cssTag = vkbCustomCss ? vkbCustomCss : '';
+		if (cssTag && uniqueClass) {
+			cssTag = vkbCustomCss.replace(
+				customCssSelectorRegex,
+				'.' + uniqueClass
+			);
+		}
 
-			if (isAddBlockCss(name) && hasCustomClassName) {
-				return (
-					<>
-						{(() => {
-							if (cssTag) {
-								return ;
-							}
-						})()}
-						
-					
-				);
-			}
-			return ;
-		};
-	}, 'vkbCustomCss')
+		return (
+			<>
+				{(() => {
+					if (cssTag) {
+						return ;
+					}
+				})()}
+				
+			
+		);
+	}
+);
+
+addFilter(
+	'blocks.registerBlockType',
+	'vk-blocks/custom-css/addAttribute',
+	addAttribute
+);
+addFilter(
+	'editor.BlockEdit',
+	'vk-blocks/editor/custom-css/with-inspector-controls',
+	withInspectorControls
+);
+addFilter(
+	'editor.BlockListBlock',
+	'vk-blocks/style/with-block-controls',
+	withElementsStyles
 );
diff --git a/test/phpunit/pro/test-get-options.php b/test/phpunit/pro/test-get-options.php
index 564785d4b..3ff5ce4f9 100644
--- a/test/phpunit/pro/test-get-options.php
+++ b/test/phpunit/pro/test-get-options.php
@@ -84,7 +84,7 @@ public function test_vk_blocks_get_options() {
 						),
 					),
 					'load_separate_option' => false,
-					'show_custom_css_editor_flag' => 'true',
+					'show_custom_css_editor_flag' => 'show',
 					'vk_blocks_pro_license_key' => null,
 					'display_vk_block_template' => 'display',
 					'new_faq_accordion' => 'disable',
@@ -317,7 +317,7 @@ public function test_vk_blocks_get_options() {
 					'load_separate_option' => true,
 					'vk_blocks_pro_license_key' => 'test_license_key',
 				),
-				'correct' => 'true',
+				'correct' => 'show',
 			),
 			// 全てのオプション値を変更した時
 			array(
@@ -352,7 +352,7 @@ public function test_vk_blocks_get_options() {
 						),
 					),
 					'load_separate_option' => true,
-					'show_custom_css_editor_flag' => 'false',
+					'show_custom_css_editor_flag' => 'hide',
 					'vk_blocks_pro_license_key' => 'test_license_key',
 					'display_vk_block_template' => 'display',
 					'new_faq_accordion' => 'open',
@@ -388,7 +388,7 @@ public function test_vk_blocks_get_options() {
 						),
 					),
 					'load_separate_option' => true,
-					'show_custom_css_editor_flag' => 'false',
+					'show_custom_css_editor_flag' => 'hide',
 					'vk_blocks_pro_license_key' => 'test_license_key',
 					'display_vk_block_template' => 'display',
 					'new_faq_accordion' => 'open',
diff --git a/test/phpunit/pro/test-vk-blocks-options.php b/test/phpunit/pro/test-vk-blocks-options.php
index 14faffb85..fa9080339 100644
--- a/test/phpunit/pro/test-vk-blocks-options.php
+++ b/test/phpunit/pro/test-vk-blocks-options.php
@@ -130,7 +130,7 @@ public function test_options_scheme() {
 					),
 					'show_custom_css_editor_flag' => array(
 						'type'    => 'string',
-						'default' => 'true',
+						'default' => 'show',
 					),
 					'vk_blocks_pro_license_key' => array(
 						'type'    => 'string',

From a15f69ffd2696f419afbb8e1eb54b3ebaa0507d5 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Tue, 25 Oct 2022 18:01:46 +0900
Subject: [PATCH 53/56] =?UTF-8?q?fix=20/=20custom=20css=20=E8=AA=AC?=
 =?UTF-8?q?=E6=98=8E=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-css-extension/index.js      | 33 +++++++++++--------
 .../specs/custom-css-extension.test.js        | 16 ++++-----
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/extensions/common/custom-css-extension/index.js b/src/extensions/common/custom-css-extension/index.js
index 9e5933425..ea12401b2 100644
--- a/src/extensions/common/custom-css-extension/index.js
+++ b/src/extensions/common/custom-css-extension/index.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, getLocaleData } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
-import { PanelBody, Icon, Button } from '@wordpress/components';
+import { PanelBody, Icon, Button, ExternalLink } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -163,8 +163,8 @@ export const withInspectorControls = createHigherOrderComponent(
 						className={'vk_custom_css_panel'}
 						icon={}
 						title={__(
-							'カスタムCSS',
-							// 'Custom CSS',
+							// 'カスタムCSS',
+							'Custom CSS',
 							'vk-blocks'
 						)}
 						initialOpen={false}
@@ -194,17 +194,24 @@ export const withInspectorControls = createHigherOrderComponent(
 						})()}
 						
    
 							{__(
-								'selector を指定した場合、ブロック固有の CSS クラスに置き換わります。',
-								// 'If selector is specified, it is replaced by a block-specific CSS class.',
-								'vk-blocks'
-							)}
-						
    
-						
    
-							{__(
-								'"selector"以外のCSSセレクターは、ページ全体に影響する可能性があります。',
-								// 'If selector is set to "selector", it will be replaced with a block-specific CSS class. CSS selectors other than "selector" may affect the entire page.',
+								'selector を指定した場合ブロック固有の CSS クラスに置き換わります。selector以外のCSSセレクターは、ページ全体に影響する可能性があります。',
+								// 'If selector is specified, it is replaced by a block-specific CSS class. If selector is set to "selector", it will be replaced with a block-specific CSS class. CSS selectors other than "selector" may affect the entire page.',
 								'vk-blocks'
 							)}
+							{(() => {
+								const lang = getLocaleData()[''].lang;
+								if (lang === 'ja_JP') {
+									return (
+										
+											詳しくはこちら
+										
+									);
+								}
+							})()}
 						
    
 						
    
 							{__(
diff --git a/test/e2e-tests/specs/custom-css-extension.test.js b/test/e2e-tests/specs/custom-css-extension.test.js
index f2b919241..5f801ae26 100644
--- a/test/e2e-tests/specs/custom-css-extension.test.js
+++ b/test/e2e-tests/specs/custom-css-extension.test.js
@@ -38,10 +38,9 @@ describe( 'CustomCssExtension', () => {
 		// cssを記述
 		await page.keyboard.type( 'selector { \n background: #f5f5f5;' );
 
-		const clientId = ( await getAllBlocks() )[ 0 ].clientId;
 		const regexBefore = new RegExp(
-			`
-
    
+			`
+
    
 `
 		);
 		expect(await getEditedPostContent()).toMatch(regexBefore);
@@ -54,9 +53,8 @@ describe( 'CustomCssExtension', () => {
 		await openButton.click();
 		await page.click( '[id$="vk-custom-css-code-mirror"]' );
 		await page.keyboard.type( 'selector { \n background: #f5f5f5;' );
-		const clientId = ( await getAllBlocks() )[ 0 ].clientId;
 		const regexBefore = new RegExp(
-			``
+			``
 		);
 		expect(await getEditedPostContent()).toMatch(regexBefore);
 	} )
@@ -68,10 +66,9 @@ describe( 'CustomCssExtension', () => {
 		await openButton.click();
 		await page.click( '[id$="vk-custom-css-code-mirror"]' );
 		await page.keyboard.type( 'selector { \n background: #f5f5f5;' );
-		const clientId = ( await getAllBlocks() )[ 0 ].clientId;
 		const regexBefore = new RegExp(
-			`
-
    
+			`
+
    
 `
 		);
 		expect(await getEditedPostContent()).toMatch(regexBefore);
@@ -84,9 +81,8 @@ describe( 'CustomCssExtension', () => {
 		await openButton.click();
 		await page.click( '[id$="vk-custom-css-code-mirror"]' );
 		await page.keyboard.type( 'selector { \n background: #f5f5f5;' );
-		const clientId = ( await getAllBlocks() )[ 0 ].clientId;
 		const regexBefore = new RegExp(
-			``
+			``
 		);
 		expect(await getEditedPostContent()).toMatch(regexBefore);
 	} )

From 72971916f1cd995f385977230dda8552674a08d2 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Wed, 26 Oct 2022 15:34:50 +0900
Subject: [PATCH 54/56] phpcs

---
 inc/vk-blocks/class-vk-blocks-options.php | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/inc/vk-blocks/class-vk-blocks-options.php b/inc/vk-blocks/class-vk-blocks-options.php
index 6c6bb8447..602fce033 100644
--- a/inc/vk-blocks/class-vk-blocks-options.php
+++ b/inc/vk-blocks/class-vk-blocks-options.php
@@ -35,15 +35,15 @@ private function __construct() {
 	 */
 	public static function options_scheme() {
 		$default_options_schema = array(
-			'balloon_border_width'      => array(
+			'balloon_border_width'        => array(
 				'type'    => 'number',
 				'default' => 1,
 			),
-			'margin_unit'               => array(
+			'margin_unit'                 => array(
 				'type'    => 'string',
 				'default' => 'rem',
 			),
-			'margin_size'               => array(
+			'margin_size'                 => array(
 				'type'  => 'object',
 				'items' => array(
 					'xl' => array(
@@ -133,19 +133,19 @@ public static function options_scheme() {
 					),
 				),
 			),
-			'load_separate_option'      => array(
+			'load_separate_option'        => array(
 				'type'    => 'boolean',
 				'default' => false,
 			),
-			'vk_blocks_pro_license_key' => array(
+			'vk_blocks_pro_license_key'   => array(
 				'type'    => 'string',
 				'default' => null,
 			),
-			'display_vk_block_template' => array(
+			'display_vk_block_template'   => array(
 				'type'    => 'string',
 				'default' => 'display',
 			),
-			'new_faq_accordion'         => array(
+			'new_faq_accordion'           => array(
 				'type'    => 'string',
 				'default' => 'disable',
 			),

From 0ac0e13308ca6029134fffbfc38285d8517123c7 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Fri, 28 Oct 2022 11:20:40 +0900
Subject: [PATCH 55/56] fix comment

---
 inc/vk-blocks/vk-blocks-functions.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inc/vk-blocks/vk-blocks-functions.php b/inc/vk-blocks/vk-blocks-functions.php
index 4a4f001dd..3869cc390 100644
--- a/inc/vk-blocks/vk-blocks-functions.php
+++ b/inc/vk-blocks/vk-blocks-functions.php
@@ -77,7 +77,7 @@ function vk_blocks_blocks_assets() {
 	} else {
 		wp_localize_script( 'vk-blocks-build-js', 'vk_blocks_check', array( 'is_pro' => false ) );
 	}
-	// ホーム URL を渡す用.
+
 	wp_localize_script(
 		'vk-blocks-build-js',
 		'vk_blocks_params',

From 000cb1e4c63de72e03d5a6aa05daddcd8ca33748 Mon Sep 17 00:00:00 2001
From: shimotmk 
Date: Fri, 28 Oct 2022 11:20:59 +0900
Subject: [PATCH 56/56] readme

---
 readme.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/readme.txt b/readme.txt
index e92d9705c..37fa24da3 100644
--- a/readme.txt
+++ b/readme.txt
@@ -64,6 +64,8 @@ e.g.
 
 == Changelog ==
 
+[ Add Function ][ Custom CSS ( Pro ) ] Add custom css extension in inspector controls.
+
 = 1.44.0 =
 [ Add Function ][ Post List ( Pro ) ] Add post filter taxonomy relation
 [ Add Function ][ Button ] Add Button Effect option in Solid color button.