【CSS 待ち】大まかな完成

.distignore

@@ -1,6 +1,7 @@
 .git/
 .github/
 bin/
+blocks/src/
 dist/
 docs/
 node_modules/
@@ -14,6 +15,9 @@ vendor/
 .node-version
 .phpcs.xml
 .phpunit.xml
+.prettierignore
+.stylelintignore
+.stylelintrc.js
 .wp-env.json
 babel.config.js
 composer.json

.eslintrc.js

@@ -2,9 +2,13 @@ module.exports = {
 	root: true,
 	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
 	rules: {
-		'@wordpress/no-unsafe-wp-apis': 'off',
+		camelcase: 'off',
+
 		'import/no-unresolved': 'off',
 		'import/no-extraneous-dependencies': 'off',
-		camelcase: 'off',
+		'react-hooks/exhaustive-deps': 'off',
+		'@wordpress/no-unsafe-wp-apis': 'off',
+		'jsx-a11y/label-has-for': 'off',
+		'jsx-a11y/label-has-associated-control': 'off',
 	},
 };

.github/workflows/deploy_develop.yml

@@ -14,8 +14,8 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                php-versions: ['7.4', '8.0', '8.1']
-                wp-versions: ['6.2', '6.1.1', '5.9.5']
+                php-versions: ['8.0', '8.1', '8.2']
+                wp-versions: ['6.5', '6.6', '6.7']
 
         services:
             mysql:
@@ -54,6 +54,8 @@ jobs:
                   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
                   chmod +x wp-cli.phar
                   mv wp-cli.phar /usr/local/bin/wp
+            - name: Build
+              run: npm run build
             - name: Install Theme
               run: bash bin/install-theme.sh
             - name: Install several WordPress version by wp-env.override.json
@@ -96,6 +98,8 @@ jobs:
                   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
                   chmod +x wp-cli.phar
                   mv wp-cli.phar /usr/local/bin/wp
+            - name: Build
+              run: npm run build
             - name: Make Distribution
               run: bash bin/deploy.sh
             - name: Deploy to test server

.github/workflows/php_unit_test.yml

@@ -17,8 +17,8 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                php-versions: ['7.4', '8.0', '8.1']
-                wp-versions: ['6.2', '6.1.1', '5.9.5']
+                php-versions: ['8.0', '8.1', '8.2']
+                wp-versions: ['6.5', '6.6', '6.7']
         name: PHP Unit test ${{ matrix.php-versions }} / WP ${{ matrix.wp-versions }} Test on ${{ matrix.operating-system }}
         services:
             mysql:
@@ -57,6 +57,8 @@ jobs:
                   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
                   chmod +x wp-cli.phar
                   mv wp-cli.phar /usr/local/bin/wp
+            - name: Build
+              run: npm run build
             - name: Install Theme
               run: bash bin/install-theme.sh
             - name: Install several WordPress version by wp-env.override.json

.github/workflows/wp-plugin-deploy.yml

@@ -11,8 +11,8 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                php-versions: ['7.4', '8.0', '8.1']
-                wp-versions: ['6.2', '6.1.1', '5.9.5']
+                php-versions: ['8.0', '8.1', '8.2']
+                wp-versions: ['6.5', '6.6', '6.7']
 
         services:
             mysql:
@@ -51,6 +51,8 @@ jobs:
                   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
                   chmod +x wp-cli.phar
                   mv wp-cli.phar /usr/local/bin/wp
+            - name: Build
+              run: npm run build
             - name: Install Theme
               run: bash bin/install-theme.sh
             - name: Install several WordPress version by wp-env.override.json
@@ -86,6 +88,8 @@ jobs:
                   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
                   chmod +x wp-cli.phar
                   mv wp-cli.phar /usr/local/bin/wp
+            - name: Build
+              run: npm run build
             - name: Make Distribution
               run: bash bin/deploy.sh
             - name: WordPress Plugin Deploy
@@ -119,6 +123,8 @@ jobs:
                   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
                   chmod +x wp-cli.phar
                   mv wp-cli.phar /usr/local/bin/wp
+            - name: Build
+              run: npm run build
             - name: Make Distribution
               run: bash bin/dist.sh
             - name: Test ZIP

.gitignore

@@ -1,5 +1,4 @@
 node_modules/
-build/
 dist/
 temp/
 vendor/
@@ -8,3 +7,5 @@ vendor/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+**/build/**
+.phpunit.result.cache

.node-version

@@ -1 +1 @@
-16.15.1
+20.9.0

.phpcs.xml

@@ -7,7 +7,7 @@
 	<exclude-pattern>/vendor/</exclude-pattern>
 	<exclude-pattern>/node_modules/</exclude-pattern>
 	<exclude-pattern>/tests/phpunit/</exclude-pattern>
-
+	<exclude-pattern>/temp/</exclude-pattern>
 	<!-- How to scan -->
 	<!-- Usage instructions: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Usage -->
 	<!-- Annotated ruleset: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml -->

README.md

@@ -1,21 +1,56 @@
 # VK Pattern Directory Creator 
-VK Pattern Directory Creator
-
-https://pdc.vs4.nagoya/ にて開発中
 
 ## これはなに？
 
-ブロックパターンディレクトリのサイトを作るためのプラグイン。
-
+ブロックパターンディレクトリのサイトを作るためのプラグイン。  
 ※ https://github.com/vektor-inc/vk-patterns に依存関係のないまったく別で独立したプラグイン
 
 ### 想定用途
 
-* ベクトルサーバーで、ベクトルのテーマ用のパターンを提供する
-* ベクトルテーマから API で直接アクセスして、ユーザーが管理画面から直接呼び出せるようにする
-* ベクトル以外の開発者がパターンディレクトリを作る事が出来る -> 販売するかどうかは未定
+- ベクトルサーバーで、ベクトルのテーマ用のパターンを提供する
+- ベクトルテーマから API で直接アクセスして、ユーザーが管理画面から直接呼び出せるようにする
+- ベクトル以外の開発者がパターンディレクトリを作る事が出来る → 販売するかどうかは未定
 
 ## なぜ必要？
 
-現状 patterns.vektor-inc.co.jp 複数のテーマ用のパターンを入れているが、余白や色の定義 / 幅処理の方式 などがテーマによって異なるため、テーマ指定の余白サイズが使いづらかったりいろいろ無理がある。
+現状 `patterns.vektor-inc.co.jp` は複数のテーマ用のパターンを入れているが、余白や色の定義 / 幅処理の方式などがテーマによって異なるため、テーマ指定の余白サイズが使いづらかったりいろいろ無理がある。  
 特に SmaVeksive は幅の扱いが全く違うため、SmaVeksive 専用のパターンディレクトリを作らないといけない。
+
+## 仕様
+
+### assets
+
+| ファイル名               | 説明                                                                                     |
+|--------------------------|------------------------------------------------------------------------------------------|
+| **`copy-button.js`**     | ボタンをクリックして、コードスニペットを簡単にコピー。コピー回数を記録して人気のあるパターンを把握。 |
+| **`iframe-responsive.js`** | ページ内のiframeをレスポンシブ対応にするスクリプトです。                                      |
+| **`size-select.js`**     | ユーザーが選択したサイズで、iframe内のコンテンツをプレビュー。                               |
+
+### modules
+
+| ファイル名                    | 説明                                                                                       |
+|-------------------------------|------------------------------------------------------------------------------------------|
+| **`blocks.php`**              | カスタムブロックを登録し、WordPressブロックエディタ内で使用可能にする。                              |
+| **`content-archive.php`**     | アーカイブページ用のコンテンツテンプレートを提供。                                                  |
+| **`content-archive-setting.php`** | アーカイブページ設定用の画面。                                                               |
+| **`content-part.php`**        | 特定の部分テンプレート（パーツ）を構成し、再利用性を向上させる。クラシックテーマのみ利用可能。               |
+| **`content-single.php`**      | シングル投稿ページのコンテンツをレンダリング。                                                   |
+| **`enquque-scripts.php`**     | 必要なCSSやJavaScriptをWordPressに登録・読み込み。                                               |
+| **`iframe-sizes.php`**        | iframeのサイズに関する設定・レスポンシブ対応を管理。                                              |
+| **`iframe-view.php`**         | iframeの表示ロジックを定義し、ビューを出力するテンプレート。                                       |
+| **`register-post-type.php`**  | カスタム投稿タイプ「Block Patterns」の登録ロジックを実装し、独自投稿タイプを作成。                     |
+| **`register-custom-taxonomies.php`** | カスタム投稿タイプ「Block Patterns」のタクソノミー登録画面を実装し、独自カスタムタクソノミーを作成。 |
+
+また、テーマ「SmaVeksive」用にiframeの幅処理が必要なため、smaveksiveフォルダにまとめています。
+
+### blocks
+
+| ブロック名                  | 説明                                                                                   |
+|-----------------------------|---------------------------------------------------------------------------------------|
+| **VK Pattern Description**  | `vk-pattern-directory-creator/assets/src/js/copy-button.js`でパターンをコピーする際に、パターンの説明を入れたいけどコピーされたくない時は「VK Pattern Description」を使うとコピーされない。 |
+| **VK Pattern Display**      | 固定ページか投稿か何かにブロックエディターで作ったページを参照してコピーできるブロック。                                        |
+| **VK Pattern List**         | アーカイブなどでパターン一覧を作る時に使用。現在は件数、表示順が変更可能。                                                      |
+
+### views
+
+テーマがブロックテーマかクラシックテーマかを見分ける時に使用される。

assets/src/js/copy-button.js

@@ -0,0 +1,41 @@
+const copyButtonOuterAll = document.querySelectorAll(
+	'.vkpdc_button-outer--copy'
+);
+// eslint-disable-next-line no-undef
+const beforeTextSingle = VKPDCButtonCopy.beforeTextSingle;
+// eslint-disable-next-line no-undef
+const beforeTextArchive = VKPDCButtonCopy.beforeTextArchive;
+// eslint-disable-next-line no-undef
+const afterText = VKPDCButtonCopy.afterText;
+// eslint-disable-next-line no-undef
+const copyAjaxUrl = VKPDCButtonCopy.ajaxUrl;
+
+copyButtonOuterAll.forEach( ( copyButtonOuter ) => {
+	const post_id = Number( copyButtonOuter.dataset.post );
+	const copyButton = copyButtonOuter.querySelector( `.vkpdc_button--copy` );
+
+	copyButton.onclick = () => {
+		const req = new XMLHttpRequest(); // eslint-disable-line no-undef
+		req.open( 'POST', copyAjaxUrl, true );
+		req.setRequestHeader(
+			'content-type',
+			'application/x-www-form-urlencoded;charset=UTF-8'
+		);
+		req.send( `action=copy_count&post=${ post_id }` );
+		let str = copyButton.getAttribute( 'data-clipboard-text' );
+		str = str.replace( /\\\[/g, '[' );
+		str = str.replace( /\\\]/g, ']' );
+		// eslint-disable-next-line no-undef
+		navigator.clipboard.writeText( str ).then(
+			// eslint-disable-next-line no-unused-vars
+			( success ) => {
+				let html = copyButton.innerHTML;
+				html = html.replace( beforeTextSingle, afterText );
+				html = html.replace( beforeTextArchive, afterText );
+				copyButton.innerHTML = html;
+			},
+			// eslint-disable-next-line no-unused-vars, no-undef, no-alert
+			( error ) => alert( 'テキストのコピーに失敗😫' )
+		);
+	};
+} );

assets/src/js/iframe-responsive.js

@@ -0,0 +1,38 @@
+( ( window, document ) => {
+	/*-------------------------------------------*/
+	/*  iframeのレスポンシブ対応
+    /*-------------------------------------------*/
+	function iframe_responsive() {
+		Array.prototype.forEach.call(
+			document.getElementsByTagName( 'iframe' ),
+			( i ) => {
+				const iframeUrl = i.getAttribute( 'src' );
+				if ( ! iframeUrl ) {
+					return;
+				}
+				// iframeのURLの中に youtube か map が存在する位置を検索する
+				// 見つからなかった場合には -1 が返される
+				if (
+					iframeUrl.indexOf( 'youtube' ) >= 0 ||
+					iframeUrl.indexOf( 'vimeo' ) >= 0 ||
+					iframeUrl.indexOf( 'maps' ) >= 0
+				) {
+					const iframeWidth = i.getAttribute( 'width' );
+					const iframeHeight = i.getAttribute( 'height' );
+					const iframeRate = iframeHeight / iframeWidth;
+					const nowIframeWidth = i.offsetWidth;
+					const newIframeHeight = nowIframeWidth * iframeRate;
+					i.style.maxWidth = '100%';
+					i.style.height = newIframeHeight + 'px';
+				}
+			}
+		);
+	}
+
+	window.addEventListener( 'DOMContentLoaded', iframe_responsive );
+	let timer = false;
+	window.addEventListener( 'resize', () => {
+		if ( timer ) clearTimeout( timer );
+		timer = setTimeout( iframe_responsive, 200 );
+	} );
+} )( window, document );

assets/src/js/size-select.js

@@ -0,0 +1,42 @@
+const SelectSizeAll = document.querySelectorAll( '.vkpdc_select--size' );
+// eslint-disable-next-line no-undef
+const SizeList = vkPatternsSizeSelect.sizeList;
+let WindowSize = document.body.clientWidth;
+const iframeContainer = document.querySelector( '.vkpdc_iframe-wrapper' );
+
+function updateSizeOptionsAndIframe( selectSizeElement ) {
+	const sizeOption = selectSizeElement.querySelectorAll( 'option' );
+	let selectFlag = false;
+
+	SizeList.forEach( ( size ) => {
+		sizeOption.forEach( ( option ) => {
+			if ( size.value === option.value ) {
+				if ( parseInt( size.value ) > WindowSize ) {
+					option.style.display = 'none';
+				} else {
+					option.style.display = 'block';
+				}
+			}
+		} );
+	} );
+}
+
+SelectSizeAll.forEach( ( selectSize ) => {
+	// 初期設定としてオプションとiframeの幅を更新
+	updateSizeOptionsAndIframe( selectSize );
+
+	// セレクトボックス変更時のイベントリスナー
+	selectSize.onchange = () => {
+		if ( selectSize.value === '100%' ) {
+			iframeContainer.style.width = '100%';
+		} else {
+			iframeContainer.style.width = (parseInt(selectSize.value) + 2) + 'px';
+		}
+	};
+});
+
+// ウィンドウリサイズ時のイベントリスナー
+window.addEventListener( 'resize', () => {
+	WindowSize = document.body.clientWidth;
+	SelectSizeAll.forEach( updateSizeOptionsAndIframe );
+} );