ユニットテストを書く練習を続けているのですが、ふと「カスタムブロックのユニットテストってどうやって書くのかな？」という疑問が湧いてきました。コアブロックにはがっつりテスト書いてあるし、やりようはあるんだろうと調べることにしました。https://developer.wordpress.org/block-editor/contributors/code/testing-overview/このページによると、JavaScriptのテストは Jest を使って書くのが標準のよう。また、必要に応じて React Testing Library も併用できるとのこと。普段からJestは使...

いつ古くなるかわからないから毎回一応セットアップ方法は覗くようにしてるけど、ざっくりまとめておいたほうがいいなーと思ったので自分用メモ。追加するのは以下のパッケージですVite (ESLintは一緒に入ってくるので一旦割愛）JestTesting LibraryPrettierHuskylint-staged Viteのインストールhttps://ja.vite.dev/まずは普通にcreateコマンド叩きます。npm create vite@latest> npx> cva│◇ Project name:│ vite-projec...

ちょっと新たな分野をやってみようと、最近JestやTesing Libraryを勉強しています。（もともとテスト書けないとなぁと思っていたのでようやく着手したという感じ）テストとはなんぞや？どうやって書けばいいんや？というところから知りたかったので、いくつかUdemyも受講しました。https://www.udemy.com/course/react-frontend-test-tutorial/https://www.udemy.com/course/ts-webapp-test/※ バックエンド編以降はまだ。一旦フロントエンドのテストに集中！私は動画見ながら手を動かすのが性...

https://github.com/hamworks/query-has-resultsクエリーブロック内で結果があるとき（記事が表示されているとき）だけ、入力した何かしらが表示されるブロックをつくりました。いわゆるコアの「No Query」ブロックの真逆のことをしているブロックです。（プラグイン名、Has Queryにしてたはずなんだけどどっかで補完入っちゃったかなぁ） 使ったらどうなるの？投稿なり固定ページなりで関連記事を表示させたいときを想定します。まずはいつもの使い方。こう入れておくと、フロントではこのような表示になります。「まだ投稿がありません」が表示され...

今回はスタイルのうち、色を見ていきます。 色色ではサイトで使えるカラーパレットの設定ができます。任意のカラーを使うことももちろんできますが、サイトのブランドカラーやよく使う色は登録しておくと便利です。 パレットパレットの文字の下に表示されているカラーパレットをクリックすると、以下の画面に遷移します。[色]のタブでは単色、[グラデーション]のタブではグラデーションの他、デュオトーンのカラーがデフォルトで設定されています。パレット名の横にある縦三つのドットをクリックすると、パレットの表示方法が変わります。色をクリックすることで変更できますが、デフォルトパレットは色...

前回の続きで、今回はスタイルのタイポグラフィについて深掘りしていきます。https://zenn.dev/hamworks/articles/ed4418169d8158スタイルあたってない状態で見ようと思うので、Create Block Themeで空テーマをつくります。空のブロックテーマでスタイルの画面にアクセスした状態 タイポグラフィタイポグラフィの画面では、フォントのインストールやスタイル・サイズ等の設定ができます。 フォントフォントという文字の横にあるスライダーのようなマークをクリックすることでポップアップが表示されます。 ライブラリ現在インストー...

バージョンが上がるごとにできることが増えていっている印象のサイトエディター。実際どういうものが設定できるのかじっくり見てみました。今回はサイトエディターに遷移したときに表示されるナビゲーションスタイル固定ページテンプレートパターンに触れます。一部の項目は別の記事で詳しく深掘りする予定です。なお、この検証はWordPress 6.7.1 (Twenty Twenty-Five テーマ)で行っています。 サイトエディタートップ[外観]->[エディター]をクリックすると表示される画面です。左のメニューをクリックすれば各設定画面に遷移し、右のプレビューをクリ...

2024年12月14日（土）に名古屋で開催された「Stack Nagoya Fes Vol.3」に登壇してきました。Stack Nagoya の今回の内容はショートセッション回で14名の登壇者がリアル会場で様々なお話をするというものでした。登壇者も参加者も、久々に沢山の方にお会いできたこのイベント、いろいろな人の話を聞ける機会が減ってきていたので、とても楽しい時間を過ごすことができました！今回のイベントでは「静的HTMLを最初に作る制作フローにするなら、どのCMSが良いの？」というタイトルで登壇しました。この記事では、その登壇した内容をもとに書いていきます。尚、このエントリーは「...

多言語サイトを作っていて、ハンバーガーメニューのaria-labelをつけたときに、「あれ、そういえば閉じるときは文字列が「メニューを閉じる」になるけど、これって翻訳できるのか？」とふと思って調べました。さすがはWordPress。wp_localize_scriptという関数を使えば可能です。https://developer.wordpress.org/reference/functions/wp_localize_script/functions.phpfunction hamworks_scripts(): void { ...$asset_file = ...

案件でWPMLを使う機会があり、ローカル環境での使用を目的にComposerを使って色々と作業しました。その試行錯誤の結果を備忘録として残しておきます。 経緯いつもローカル環境は以前zennの本にまとめたとおり、@wordpress/envの環境を使っています。プラグインは.wp-env.json内のpluginsで管理でき、zipファイルの指定も可能ですが、WPMLはURLにuser_idやsubscription_keyがあるので、安易にGitHubに置いておくのははばかられます。https://ja.wordpress.org/team/handbook/block-ed...

https://make.wordpress.org/core/2024/06/25/wordpress-6-6-field-guide/https://aki-hamano.blog/2024/06/06/wp6-6-theme-json/この記事を投稿した時点ではバージョンはまだRC1ですが、ちょっとずつ色々検証がてら触り始めているので、触ってみた所感を残しておこうと思います。今回はコレ！Section Styles！https://make.wordpress.org/core/2024/06/24/section-styles/なんぞ？って感じですが、（だいぶん簡略に言...

利用環境Vuetify 3.5.16 〜 3.6.10 へアップデート 調べた背景Vuetify 3 にアップデートする際に、VTabs と VTab VTabWindow VTabWindowItem に変更点があったのでまとめてみました。https://vuetifyjs.com/en/api/v-tabs-window/https://vuetifyjs.com/en/api/v-tabs-window-item/アップデートに伴って、変更箇所を洗い出すためにドキュメントを確認したところ 👆のコンポーネントを知りました。Vuetify の VTabs をVu...

https://apexcharts.com/グラフ系のライブラリは、Apexcharts を Vue 2 / Nuxt 2 / Vuetify 2 では利用していた。Vuetify 3 のアップデートでも同様に利用できることから変更された点についてまとめてみた。 変更点Apexcharts のラッパーライブラリの変更セットアップ方法の変更グラフのツールチップをVueのコンポーネントでカスタマイズしてた場合Apexcharts の変更点は、👆だけになりますが基本的にはVueの変更された部分の影響が大きいです。グラフで利用するオプションの設定などは基本は変わりません。...

Vuetify 3 Theme の変更点この記事では、Vuetify 3.5.16 での theme の変更点をまとめています。また、記事の内容は Composition API を利用して検証しています。 Vuetify 2 Theme Configurationhttps://v2.vuetifyjs.com/en/features/theme/ Vuetify 3 Theme Configurationhttps://vuetifyjs.com/en/features/theme Theme の変更点Vuetify 2 では、this.$vuetify.t...

Vuetify 3 v-combobox / v-autocomplete / v-selectの変更点この記事では、Vuetify 3.5.16 でのv-combobox、v-autocomplete、v-selectの変更点をまとめています。この3つのコンポーネントの基本的な機能に大きな差はありませんが、高度なフィルターを使用する場合はv-autocompleteが適しています。個人的には、v-comboboxでほとんどの機能がカバーできると考えています。公式ドキュメントはこちら：v-selectv-autocompletev-combobox 主な変更点...

2024年6月現在、Vue 3が主流になっていますが、Vuetify 3の変更点を確認するためにVue 2の環境を用意することがあります。新規プロジェクトではVue 2を利用しませんが、Vuetify 3のアップデートに伴う変更点を確認するための環境を構築する方法をまとめました。以前は、vue-cliがボイラーテンプレートとして利用されていましたが、現在はViteの登場により新規プロジェクトではViteを利用することが一般的です。本記事では、Viteを利用してVue 2とVuetify 2をインストールする手順を紹介します。 環境Node.js 20.12.1Vue v2.7...

ブロックに何らかのスタイルをつけたブロックを追加する方法は2種類あります。ブロックスタイルブロックパターンそれぞれの使い方と、どういう使い分けをしているのかご紹介します。 ブロックスタイルhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/デフォルトのコアブロックでも一部のブロックにあります。例えばボタンブロック。デフォルトでは塗りつぶしですが、ブロックスタイルを選択すると輪郭スタイルに変える事ができます。これを自分で作成して作ることができます。...

前回の記事では、Rocky Linux 9.3 のサーバセットアップ手順を説明しました。今回の記事では、SSL Storeの証明書を設定していきます。https://zenn.dev/hamworks/articles/article12-centos-rocky1 環境利用環境は、さくらのクラウドを利用しています。さくらのクラウドOS: CentOS 7 → Rocky Linux 9 SSLについてhttps://www.ssl-store.jp/SSL Store で購入した証明書を使います。この記事では、ドメイン認証のFUJI SSLを利用しています。...

CentOS7が2024年6月にサポートが終了するため、Rocky Linux 9 への移行することを決めました。この記事は、Movable Type環境のCentOSからRocky Linuxへの移行手順をまとめたものです。最近ではサーバを1台契約してLAMP環境を用意することもほとんどなくなりましたが、メモとして残しておきます。 環境利用環境は、さくらのクラウドを利用しています。さくらのクラウドOS: CentOS 7 → Rocky Linux 9 Rocky Linux 9.3 のイメージを選択するさくらのクラウドのコントロールパネルから、Rocky Li...

たまたまESLintについて調べていたときに、このような記事を見ました。https://eslint.org/blog/2023/10/flat-config-rollout-plans/eslintrc removed in ESLint v10.0.0まじかよ！！！！というわけで、テストがてらいつものローカル環境の.eslintrcをeslint.config.jsに置き換えてみることにしました。 結論結論から言うと、@wordpress/scriptsを用いてLintをしているのならまだ.eslintrcのままでよさそうです。というかeslint.config.jsが構...