submitボタンのおさらい 皆さんはForm内にあるsubmitボタンをどのように制御していらっしゃるでしょうか。 ボタンのような形をしているので、button要素と同様clickイベントのリスナーを設定して、対応するイベントハンドラで動作させると思いがちですが、そ…

Reactを始めると仮想DOMという言葉を耳にするようになります。 ChatGPTの説明です。 生成: Reactコンポーネントがレンダリングされるとき、仮想DOMツリーが生成されます。これは実際のDOMツリーの軽量な表現です。 差分検出: 状態やpropsの変更によりコンポ…

Gutenbergのブロック開発をしていて、おかしな現象に見舞われました。次の画像をご覧ください。 これはブロックにニューモフィズムというシャドーをつけたものです。 上がブロックエディタの表示で、下がフロントエンドの表示です。 ご覧のとおり下は高さが…

まずはPanelColorGradientSettingsを使ってみよう ブロック開発でカスタムブロックに色を設定するのは基本中の基本ですよね。 まず、最初のカスタマイズは色の設定でしょう。 Wordpressはそのための入力用コントロールとしてPanelColorGradientSettingsとい…

今や、ReactはJavaScriptの中心的な地位を占めるようになったと感じるときがしばしばあります。TypeScriptのように、さらに新しいプログラミング技法は生まれてきていますが、基本の考え方はReactです。 それに対して従来のJavaScriptはプログラミングそのも…

WordPressは翻訳関数というのを用意していて、それを使えばpoファイル、moファイルによってタイトルや説明文を多国籍言語で表示させることができます。 これはWordPressを使うWeb制作者の多くが認識していらっしゃるでしょう。 もちろん私もそうでした。 で…

ブロックの機能としてテキストを編集することができるというのは、最も基本的な機能だと思います。 そこで、今回はブロック制作を始められた方向けに、RichTextコンポーネントというWrodpressが用意してくれているコンポーネントの使い方を説明したいと思い…

どんな状態になったか いつものようにブロック開発をしていました。何気なく以前作ったブロックに文字入れをしようと思ってTextControlに日本語を入れようと思うと次の画像のような現象が起きました。 この画像でおわかりでしょうか？ この画像はブロックエ…

Gutenbergのブロック開発をしたことがある方はご経験があると思いますが、ちょっと実用的なブロックを開発しようと思うとインナーブロックを利用することは必須の技術になると思います。そのインナーブロックを制御するのにかなり深いドツボにハマったという…

文字がない要素にfont-sizeプロパティを設定するって意味がわからん。 そう考えがちですが、そんなことはないのです。ふとした思い付きがあったのでご披露させていただきます。 課題は次のようなUIをGutenbergのブロックで制作するにあたってです。 フォーム…

そんなの常識でしょ。と言われちゃうかもしれません。でも、私はハマりました。 オブジェクトって配列に入っているのと、オブジェクトを含んだオブジェクトと２パターンがありますよね。 colors=[ { color: '#72aee6', name: 'Blue 20' }, { color: '#3582c4…

ラジオボタンの設定をjqueryのスクリプトで行うときにハマるという話です。 問題の前提 ラジオボタンは通常複数の同一name属性をもつ要素が集まってできています。 <input type="radio" name="post_radio" value="val1" checked>要素１ <input type="radio" name="post_radio" value="val2">要素２ <input type="radio" name="post_radio" value="val3">要素３ こんな感じです。 ここで、要素３にチェックを入れるという設定をjque…

インナーブロックを含むブロックの作り方 ブロック制作でマスターしておきたい技術の一つにインナーブロックがあります。ブロックをパーツのように子ブロックとし、親となるブロックに集約するのです。次の画像のようなものです。 この画像にあるラベルとイ…

dangerouslySetInnerHTMLが必要なった場面 Reactコンポーネントでこんなコードを書きました。 const mediaContent = getMediaContent(); return( <div className="post_text"> { mediaContent } </div> ) getMediaContent()は画像等を表示するためのHTMLを生成するためのオリジナルの関数です…

とりあえずブロックのひな型は作れたので、早速オリジナルブロックの作成に取り掛かろうということになるのですが、本番の中味に入る前にちょっと見た目を整えましょう。 ブロックの象徴は何といってもアイコンでしょ。やっぱりオリジナルのアイコンを入れた…

ブロック開発していくにあたって、プラグインを使うのは一般的です。そのひな型を作成するツールが「wordpress/create-block」で、プラグインフォルダに移動して、ターミナルから npx @wordpress/create-block と入力します。 これで、簡単にプラグインのひ…

TwitterAPIの有料化とv1.1の廃止 TwitterAPI v1.1がついに使えなくなりました。2023年2月頃から発表されていたいようですが、私は5月になって知りました。正直なところDeveloper Portalにはそんなこと何も書いていないかったし、ずっと半信半疑だったのです…

直したはずのCSSが当たっていない CSSの修正って結構面倒ですよね。もちろん最近はCSSを直接編集せずSASSの技術を使うことが多いと思います。それでも、細かい数字を調整するのは苦労します。 それでやっとできたと思って、確認すると何も変わっていない。こ…