SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
ブロックエディターで
WordPress は
この先どう変わる ?
高野直子 / @naokomc / 山梨 WordPress Meetup #13
ブロックエディターとは何か
2
3
ブロックエディターとは
● WordPress 5.0で導入されたブロック
ベースの編集画面
● ブロックを追加して投稿やページを組
み立てられる
● レイアウト、デザインの自由度がアッ
プ
4
ブロックエディター / WordPress エディター / Gutenberg ?
5
WordPress 5.0 以降においては、この 2つは同じ意味。
ブロックエディター / WordPress エディター / Gutenberg
6
コアではブロックエディター、プラグインでは Gutenberg。
(ただし、どちらも Gutenberg と呼ばれることも…)
ブロックエディター / WordPress エディター / Gutenberg
7
クラシックエディター
コア開発チームが提供する公式プラグインであ
り、少なくとも2022年まで、または必要なくなるま
での間、完全にサポート・保守される。
ブロックエディターの普及状況
8
9
1年前で4割弱、現在約5割がブロックエディター利用
開発者は、普及率がやや高い傾向 (このデータ元のアンケートは現在も受付中です )
ブロックエディターを
使う理由、使わない理由
10
11
ブロックエディターを使う理由
● レイアウトやウィジェット、埋め込みなど、新機能が豊富
● 追加プラグインが必要なくなる場合も多く、メンテナンス性向上、プラグイ
ンやテーマとの競合の心配が減る
● プラグインを減らすことでセキュリティリスク低減にもつながる
● 今後はプラグインやテーマなどはブロックエディターのみに対応するよう
になっていく
● ページ読み込み速度で他のページビルダーに勝っている
12
ブロックエディターを使わない理由
● WordPress のバージョンやプラグインのバージョンによってはブロック
エディターに非対応
● 慣れていないので書きづらい
● まだ変更が多いので、お客様への説明が負担になることも
13
ブロックエディターをこれから使うべきか ?
セキュリティ面
最新版のコア・プラグイン・テーマを使うのはかなり優先度の高い
セキュリティ対策であることは忘れずに
便利さを知ってみる
デフォルトテーマでページを作ってみるなど、慣れると意外と便利
かも ?
ブロックエディターのこれから
14
15
今後の主な予定
● グローバルスタイル
● ウィジェット・カスタマイザー対応
● フルサイト編集 (FSE)
● アプリ対応の改善
https://github.com/WordPress/gutenberg/projects, https://make.wordpress.org/core/tag/gutenberg-next/
16
グローバルスタイル
https://github.com/WordPress/gutenberg/issues/9534, https://wptavern.com/q-first-fse-wordpress-theme-now-live
ユーザー視点でいうと、コードを書かずテーマをカスタマイズできる幅がさらに広がる
17
ウィジェット・カスタマイザー対応
https://github.com/WordPress/gutenberg/issues/27343
ウィジェット編集などもブロック編集と似た様式になる予定。現在様々な方向性が議論されている最中
18
フルサイト編集 (FSE)
投稿やページのコンテンツの中身だけでは
なく、メニューやテーマテンプレートなども含
めてすべてがブロック対応に
ブロックエディターの機能
19
20
21
その他の機能
● ブロックディレクトリ
● ブロックパターン
● 再利用可能ブロック
ここで、デモを行います
● WordPress 5.6
● Twenty Twenty One テーマ
● 追加プラグインなし
● CSS を5行だけ書きました
23
WordPress.org サイトを
ブロックで作ってみます
Thank you.

Más contenido relacionado

La actualidad más candente

concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyotoconcrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
Hishikawa Takuro
 
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ーWebデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Kite Koga
 
Graceful degradation progressive_enhancement
Graceful degradation progressive_enhancementGraceful degradation progressive_enhancement
Graceful degradation progressive_enhancement
Tomoyuki Kashiro
 

La actualidad más candente (20)

第2回concrete5初心者向け勉強会
第2回concrete5初心者向け勉強会第2回concrete5初心者向け勉強会
第2回concrete5初心者向け勉強会
 
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyotoconcrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
 
concrete5 最新情報
concrete5 最新情報concrete5 最新情報
concrete5 最新情報
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
 
ワードプレス
ワードプレスワードプレス
ワードプレス
 
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
 
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイドはじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
 
第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-
 
これからはじめるConcrete5
 これからはじめるConcrete5  これからはじめるConcrete5
これからはじめるConcrete5
 
WordPress使いの為のconcrete5導入
WordPress使いの為のconcrete5導入WordPress使いの為のconcrete5導入
WordPress使いの為のconcrete5導入
 
第22回creators meet up資料
第22回creators meet up資料第22回creators meet up資料
第22回creators meet up資料
 
オープンソースCMS concrete5 のご紹介
オープンソースCMS concrete5 のご紹介オープンソースCMS concrete5 のご紹介
オープンソースCMS concrete5 のご紹介
 
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ーWebデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
 
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
仕様書から見る concrete5 サイトの作り方  〜 WordPress サイト制作とこんなに異なるワークフロー仕様書から見る concrete5 サイトの作り方  〜 WordPress サイト制作とこんなに異なるワークフロー
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
 
Learn vue.js
Learn vue.jsLearn vue.js
Learn vue.js
 
concrete5セミナー資料公開版
concrete5セミナー資料公開版concrete5セミナー資料公開版
concrete5セミナー資料公開版
 
Xamarinでも有能な .NET Core
 Xamarinでも有能な .NET Core  Xamarinでも有能な .NET Core
Xamarinでも有能な .NET Core
 
Graceful degradation progressive_enhancement
Graceful degradation progressive_enhancementGraceful degradation progressive_enhancement
Graceful degradation progressive_enhancement
 
2019 6-22 WordPress ver 5.1 - 5.2 機能おさらい
2019 6-22 WordPress ver 5.1 - 5.2 機能おさらい2019 6-22 WordPress ver 5.1 - 5.2 機能おさらい
2019 6-22 WordPress ver 5.1 - 5.2 機能おさらい
 
concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!
 

Similar a ブロックエディターで WordPress は この先どう変わる ?

Firefox 4 with SVG
Firefox 4 with SVGFirefox 4 with SVG
Firefox 4 with SVG
Makoto Kato
 
Groovy base gradle_20130309
Groovy base gradle_20130309Groovy base gradle_20130309
Groovy base gradle_20130309
Nobuhiro Sue
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
 

Similar a ブロックエディターで WordPress は この先どう変わる ? (20)

Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
 
どっちの VS ショー / 伝統の Visual Studio 2019、人気の Visual Studio Code
どっちの VS ショー / 伝統の Visual Studio 2019、人気の Visual Studio Codeどっちの VS ショー / 伝統の Visual Studio 2019、人気の Visual Studio Code
どっちの VS ショー / 伝統の Visual Studio 2019、人気の Visual Studio Code
 
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchanedaWordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
 
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること 【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
 
(Web に関わる人に知っておいてほしい)Web ブラウザー 最新事情
(Web に関わる人に知っておいてほしい)Web ブラウザー 最新事情(Web に関わる人に知っておいてほしい)Web ブラウザー 最新事情
(Web に関わる人に知っておいてほしい)Web ブラウザー 最新事情
 
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
 
Firefox 4 with SVG
Firefox 4 with SVGFirefox 4 with SVG
Firefox 4 with SVG
 
Web matrix2とvisual studio
Web matrix2とvisual studioWeb matrix2とvisual studio
Web matrix2とvisual studio
 
Groovy base gradle_20130309
Groovy base gradle_20130309Groovy base gradle_20130309
Groovy base gradle_20130309
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 
Gulp WordPress @Grand-Frontend-Osaka 2015 Summer
Gulp WordPress @Grand-Frontend-Osaka 2015 SummerGulp WordPress @Grand-Frontend-Osaka 2015 Summer
Gulp WordPress @Grand-Frontend-Osaka 2015 Summer
 
WordPress 5.3 の新機能や改善点について Aichi WordPress Meetup 13
WordPress 5.3 の新機能や改善点について Aichi WordPress Meetup 13WordPress 5.3 の新機能や改善点について Aichi WordPress Meetup 13
WordPress 5.3 の新機能や改善点について Aichi WordPress Meetup 13
 
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のことこれだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
 
Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介
 
簡単!自動バックアップ設定でWordPressを安心運用
簡単!自動バックアップ設定でWordPressを安心運用簡単!自動バックアップ設定でWordPressを安心運用
簡単!自動バックアップ設定でWordPressを安心運用
 
自由検証環境提供宣言+Docker Compose V2 GA
自由検証環境提供宣言+Docker Compose V2 GA自由検証環境提供宣言+Docker Compose V2 GA
自由検証環境提供宣言+Docker Compose V2 GA
 
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & LinuxはじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
 
DevOps on Azure Kubernetes
DevOps on Azure KubernetesDevOps on Azure Kubernetes
DevOps on Azure Kubernetes
 
WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜
 

Más de Naoko Takano

コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組みコミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
Naoko Takano
 

Más de Naoko Takano (20)

WordPress Polyglots Team Stats, September 2020
WordPress Polyglots Team Stats, September 2020WordPress Polyglots Team Stats, September 2020
WordPress Polyglots Team Stats, September 2020
 
WordCamp Asia に行こう !
WordCamp Asia に行こう !WordCamp Asia に行こう !
WordCamp Asia に行こう !
 
WordPress における コミュニティ翻訳の事例
WordPress における コミュニティ翻訳の事例WordPress における コミュニティ翻訳の事例
WordPress における コミュニティ翻訳の事例
 
WordPress Community & You
WordPress Community & YouWordPress Community & You
WordPress Community & You
 
Introduction to WordPress Translation Day 4
Introduction to WordPress Translation Day 4Introduction to WordPress Translation Day 4
Introduction to WordPress Translation Day 4
 
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
WordPress を知っていますか? 〜 みんながつくる、みんなのツール 〜
 
Jetpack のバックアップ「アクティビティログ」ベータ機能デモ
Jetpack のバックアップ「アクティビティログ」ベータ機能デモJetpack のバックアップ「アクティビティログ」ベータ機能デモ
Jetpack のバックアップ「アクティビティログ」ベータ機能デモ
 
WordPress Meetup
 チャプタープログラム参加ガイド
WordPress Meetup
 チャプタープログラム参加ガイドWordPress Meetup
 チャプタープログラム参加ガイド
WordPress Meetup
 チャプタープログラム参加ガイド
 
15周年記念 WordPress でできること大全
15周年記念 WordPress でできること大全15周年記念 WordPress でできること大全
15周年記念 WordPress でできること大全
 
Blogging for Your Art Career
Blogging for Your Art CareerBlogging for Your Art Career
Blogging for Your Art Career
 
分散型企業による開発者向けリソースのオープン化
分散型企業による開発者向けリソースのオープン化分散型企業による開発者向けリソースのオープン化
分散型企業による開発者向けリソースのオープン化
 
コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組みコミュニティとベンダーによる
ハイブリッド翻訳の取り組み
コミュニティとベンダーによる
ハイブリッド翻訳の取り組み
 
How to Make Your Strings Translator Friendly
How to Make Your Strings Translator FriendlyHow to Make Your Strings Translator Friendly
How to Make Your Strings Translator Friendly
 
WordPress 4.7 と 今後の開発ロードマップ
WordPress 4.7 と 今後の開発ロードマップWordPress 4.7 と 今後の開発ロードマップ
WordPress 4.7 と 今後の開発ロードマップ
 
Ride the Lightning: Distributed Teamwork
Ride the Lightning: Distributed TeamworkRide the Lightning: Distributed Teamwork
Ride the Lightning: Distributed Teamwork
 
Build Your Locale Style Guide
Build Your Locale Style GuideBuild Your Locale Style Guide
Build Your Locale Style Guide
 
The Stories From the Japanese WordPress Community
The Stories From the Japanese WordPress CommunityThe Stories From the Japanese WordPress Community
The Stories From the Japanese WordPress Community
 
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
Introduction to Translating WordPress in Japanese (WordPress 日本語翻訳の基礎)
 
Why WordPress became successful in Japan despite of the language barrier
Why WordPress became successful in Japan despite of the language barrierWhy WordPress became successful in Japan despite of the language barrier
Why WordPress became successful in Japan despite of the language barrier
 
Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜
 

Último

Último (10)

Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 

ブロックエディターで WordPress は この先どう変わる ?