[Wordpress] Gutenbergのカスタムブロック作成で始めるReactプログラミング - Webのプルタブ
公式リファレンス とりあえずここを見る 流れ（Windows 10 VScodeを想定） Nodeをインストールする。 テーマフォルダなどへ移動して`custom-block`とか解り易い名前のフォルダを作る。 作った`custom-block`フォルダへ移動して`npm init`して`package.json`を作る。entry pointは`build/index.js`とかにしておく。 `Run npm install --save-dev --save-exact @wordpress/scripts`でWordpressのパッケージをインストールする。 package.jsonを開いてビルドコマンドを追記する。 ``` "scripts": { "start": "wp-scripts start", "build": "wp-scripts build" }, ``` シェル
Wordpress Gutenberg よく使いそうなコンポーネントまとめ - Qiita
#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri
Gutenbergのカスタムブロック開発環境にReactを導入する方法 | Fantastech（ファンタステック）
Node.jsのインストール 今回の開発環境の構築には「Node.js」というものが必要です。 こちらのページからパッケージがダウンロードできるので、インストールしてください。 ※Node.jsについてはこちらの記事が参考になります。 作業フォルダへ移動 開発環境の構築は「コマンド」を使って進めていきます。 Macなら「ターミナル」、Windowsなら「コマンドプロンプト」ですね。 今回はWordPressテーマ内にカスタムブロックの開発環境を構築する話なので、テーマ内の任意のフォルダへ移動します。 コマンドでの移動がよくわからなければ、以下の手順で進めることもできます。 「cd」と入力半角スペースを入力任意のフォルダをターミナルにドラッグ・アンド・ドロップエンターキーをクリック package.jsonの作成 最初に初期設定として以下のコマンドを入力してエンターキーをクリックします。 n
wordpress gutenbergはmarkdown書けるよという話 – joppot
概要 みなさんこんにちはcandleです。今回は最近メジャーバージョンアップグレードがあったwordpressのgutebergでmarkdownがかけるよという話をします。 主題の通りなのですが、これまでwordpressはmarkdownを書くならプラグインのJP MarkdownやMarkdown EditorやWP-Markdownなどのを使って書く必要がありました。しかしOSSであるがためにやはり更新が遅かったり他のプラグインと干渉してエラーが出たりしました。もちろんgutenbergもまだ十分に問題なく使えるわけではありませんが、標準で導入されたのは大きいと思います。 早速使ってみましょう。 前提 wordpressのバージョンが5.0.0以上である gutenbergのmarkdownを使う wordpressの管理画面から「記事一覧」 から「新規追加」ボタンを押します。 最
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのGutenberg編集のためにもReactを勉強すべき？ – gakuya -学屋-
gutenberg react - Google 検索
【効率UP】WordPressにMarkdown（マークダウン）記法を導入－簡単な導入方法を教えます！