WordPressのコアブロックのカスタマイズについて2021年のベスト・プラクティスを探ろう その1: ボタンブロック - Photosynthesic blog
こんにちは、みみです。 WordPressのデザインの話をそろそろガチでしたい WordPressのブロックエディタが実装されて早2年になります。カスタムブロックの作り方については良く話題になる気がしますが、ガラッと変わった設計に応じた新しいワークフローやデザイン手法などについてはそんなに話が上がらない気がします。 一通りのカスタムブロックプラグインが出揃った今だと尚更に、それよりもブロックエディタ時代のWordPressのデザイン手法についてみんな考えあぐねているのでは無いかと思うのです。 20日に出た5.8でのWordPressの進化を眺めていて、そろそろ誰かとそういう語りがしたくなってきたので、試しにひとつ書いてみようと思います。Webの4割を占めるWordPressのデザインの話、もっとあってもいいと思うんですよね。 ワークフローとしてウォーターフォール型では全く機能しなくなる、み
ブロックエディターでスターターコンテンツを作る - ブロックエディター私的マニュアル（α）
WordPressを新規インストールしたときに「カスタマイズ」からトップページや投稿記事、メニューなどが用意できる機能があるのは知っていますか？（※ WordPress4.7以上） リリース当初はクラシックエディターでしたが、ブロックエディターが搭載された現在でももちろん作成できます。 今回は、Twenty Twentyのテーマから抜粋して記述をご紹介します。 https://github.com/WordPress/twentytwenty スターターコンテンツのサポートをする スターターコンテンツはadd_theme_supportで機能を追加します。 Twenty Twentyではfunctions.phpの122行目〜130行目にあります。 https://github.com/WordPress/twentytwenty/blob/master/functions.php#L12
[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法
投稿エディタで Gutenberg を使用している場合に、新規投稿時、任意のブロックをデフォルトで配置しておくことができます。 デザイン上、指定のタグやクラス付きのタグを最初に入力してほしい場合に便利な設定です。 hタグの見出しブロックやpタグの段落ブロックを入れておく 見出しや段落ブロックを入れるには以下のようなコードを functions.php へ記入します。 function my_post_template() { $post_obj = get_post_type_object( 'post' ); // get_post_type_object( 'post' ) → の部分で、設定をしたい投稿タイプのスラッグを記入 $post_obj->template = [ // h2タグを入れる [ 'core/heading', [ 'className' => 'myclass'
![[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/181ffc12dcbbed83caf2b35fc174ecae0cfc8e32/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2020%2F04%2Fcap01.png)
WordPress （Ver5.7）ブロックエディター記事更新マニュアル（PDFダウンロード） | 枚方の女性向け・中小企業・個人事業主ホームページ制作のR-web/ 枚方/寝屋川/交野 大阪・京都・神戸から全国対応
2023年5月3日更新 【最新バージョン6.2】の記事はこちらから 2021年3月20日 バージョン5.7に内容を変更しました。 お客様へ渡すWordPressマニュアルがあったらいいなと思ったので作りました。 私のお客様は、パソコンが苦手という方が多く、「このブロックエディターは使いにくい！元に戻して！」とか、せっかくWordPressに移行したのに「アメブロに戻りたい！」という意見をたくさんいただきました。 そこで基本的なブログの投稿、「新規投稿」のよく使う点だけにフォーカスしてマニュアル化しました。PDFファイルとしてダウンロードできるようにしています。 自分でサイトを作成されている方はもちろん、制作会社様やWEB制作をされているフリーランスの方なども、宜しければお使い下さい。 ダウンロード用PDF（無料版）には当社のリンクが貼ってあります。 説明をとばして、マニュアルのダウンロード
Gutenbergの開発環境をアップデートしたりだとか - Photosynthesic blog
こんにちは、みみです。完全に自分のためのメモ記事ですみません。 Gutenbergの開発版をアップデートするCLIのメモです。 元に戻したい場合 npm run clean:packages && npm run build && npm run env reinstall リモートがアップデートしたから入れ直したい場合 git pull && npm run build && npm run env install &&でやってコケても自己責任で何卒。 ポート番号をイジる まああんまり出番ないと思うけど、複数立ち上げたい奇特な人のために。 WP_ENV_PORT=7777 npx wp-env start 参照: https://github.com/WordPress/gutenberg/tree/master/packages/env
Gutenbergを読む会 Vol.3 - 気付けば年末スペシャル - Photosynthesic blog
Experiments Block Content Areas:Add a demo templates directory. Add the Template Part block.Add documentation for the current state of the experiment. （未だblockquoteが入れ子にならないんだよねー） そうです、Capital Pで立花さんが翻訳されていた 「Block-based Themes (Experimental)」の話です。超初期段階ですが、もう動くものが作られています、ということです。中身はTokyo WordPress Meetupで同じ話をしたので別途記事を参照ください。 Toruさんの拡張版スライド振り返り 続いて、この日のメインとして、WordCamp Osaka 2019で好評だったToruさんのスライドを、時
Registration – Block Editor Handbook | Developer.WordPress.org
You can use the functions documented on this page to register a block with JavaScript only on the client, but the recommended method is to register new block types also with PHP on the server using the `block.json` metadata file. See metadata documentation for complete information Learn how to create your first block for the WordPress block editor. From setting up your development environment, too
WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】 | WEMO
まだ「ブロックエディターが使いにくい」とか言ってる人は、まずは黙ってこの記事を読んでみてください。 「バージョンアップデートしたらバグった！」と言ってる人をちょくちょく見かけますが、それはテーマかプラグインが原因の可能性が大きいです。WordPressが悪いみたいな言い方はやめて、テーマ・プラグイン開発者にどうバグったのか報告してあげましょう。 デフォルトスタイルが選べるようになった 頻繁に使うブロックスタイルをあらかじめセットできるようになりました。 例えば、『SWELL』では画像ブロックに影をつけたり線をつけたりできるスタイルが選択できるのですが、「影あり」のスタイルをデフォルトスタイルに登録することで、次回以降、初めから影が付いた状態で画像ブロックが配置されるようになります。 デフォルトスタイルをセットしている様子 ブロックの移動にアニメーションがついた ブロックを移動させる時にアニ
Gutenbergを読む会 Vol.01 チュートリアルで個性が出ます - Photosynthesic blog
こんにちは、みみです。 Gutenbergを読む会 記念すべき1回目のリポートですが、またも縦横無尽に話が飛びまくっていたので全然纏まる気がしません。すいません。 チュートリアルの結果がバラバラ まずは今回の宿題のレビューからですかねーと思ってたら、今ハマっているお互いのプラグインのカスタムについて愚痴の言い合いが始まってしまう愛すべきフリークス（私を除く）がこちら。 さらに100％GPLプラグイン＆テーマ作者成分が高めになった面子 何故、私が混じっているのか自分でも首をかしげる面子。でもみんな超絶忙しいのにちゃんと、宿題をこなしていらっしゃいました。やーそういうとこだよね。素晴らしい。 宿題とは、以下のページの公式のフローに従って、ブロック作成のチュートリアルをやってみよう（ただし何処までやるかは言っていないし最初は環境構築って言ってたし、まあある意味では環境構築だし？） https:/
registerBlockStyleでブロックに独自のスタイルを追加する – Capital P – WordPressメディア
これまでブロックの作成方法などについて触れてきたが、Twenty Twentyなどに見られるように、WordPressコアやプラグインの提供するブロック機能に依存し、あくまでスタイルの拡張に徹底するというのも一つの戦略ではある。 カスタムブロックについて「自分はプログラマーではないのでちょっと……」などと思っている人でも手軽にできる、ブロックスタイルの追加方法を説明する。 スタイルの登録 Gutenbergのデフォルトブロックのうち、たとえば区切り線は「スタイル」という概念がある。 区切り線、要するに hr はスタイルを選ぶことができる。 この実装がどうなっているかというと、スタイルを選ぶごとにCSSのクラスが付与されるという形だ。hrを例にとると、デフォルトで以下の3種類。 上から順に、次の様なクラスが割り当てられている。 クラスなしあるいは is-style-defaultis-sty
WordPressテーマの作り方 2019 私のベストプラクティス
#26 WP ZoomUP でお話した内容です。 「WordPressテーマ、つくれますか？」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VK Blocks Pro 0.34.0 でアニメーションブロックを追加しました | 株式会社ベクトル
Gutenberg in Numbers
@wordpress/create-block
Parisienne - Divi Blog Child theme I Divi Builder layout I WordPress theme
Frequently Asked Questions – Block Editor Handbook | Developer.WordPress.org
GitHub - torounit/gutenberg-examples-with-typescript
WordPress Block Styles
Creator of EditorsKit Launches Community Block-Sharing Site
了🌊SWELL | Arkhe開発 on Twitter: "【SWELL無料お試し版リリース！】 ブロックエディターの使いやすさをもっと多くの人に知ってほしいという思いから、 SWELLのブロックエディターをフル機能でご利用いただけるお試し版の配布を開始しました！👏 ※ その他の機能は… https://t.co/dDCs3pa7jx"