グーテンベルクあなたがWordPressの最新の編集者について知る必要があるすべて
グーテンベルクはWordPressのための新しいエディタです。 現在のTinyMCE搭載のエディタを置き換える. これは、おそらくWordPressをさまざまな方法で変更し、通常のエンドユーザーと開発者の両方、特にWordPressで作業するためにエディタ画面に頼っている開発者の両方に影響を与える野心的なプロジェクトです。これがどのように見えるかです。.
グーテンベルクはまたWordPressで呼ばれる新しいパラダイムを紹介します “ブロック”.
“ブロック” 説明に使用される抽象的な用語です。 マークアップの単位 それらはWebページのコンテンツやレイアウトから構成されています。このアイデアは、WordPressで今日達成していることの概念を組み合わせたものです ショートコード、カスタムHTML、および単一の一貫したAPIへの発見の埋め込み とユーザーエクスペリエンス.
プロジェクトの設定
グーテンベルクがReactの上に構築されているという事実を知って、何人かの開発者は 入門レベルの開発者にとってグーテンベルクを開発するには障壁が高すぎる.
React.jsを設定したばかりの場合、React.jsの設定にはかなりの時間と混乱を招く可能性があります。少なくとも、JSXトランスフォーマー、Babel、Babelプラグインが必要なコード、Webpack、Rollup、ParcelなどのBundlerが必要です。.
幸運なことに, WordPressコミュニティ内の何人かの人々がステップアップしました そして、誰もが従うことができるようにグーテンベルクの開発をできるだけ簡単にしようとしています。今日、我々はグーテンベルクの定型文を生成するツールを持っています。 すぐにコードを書き始めることができます ツールや設定に戸惑うのではなく.
グーテンブロックを作成する
の create-guten-block Ahmad Awaisによる初期プロジェクトです。それは ゼロ設定ツールキット （＃0CJSReact、Webpack、ESNext、Babel、ESLint、Sassなどの最新のスタックプリセットを使ってグーテンベルクブロックを開発することができます。指示に従ってCreate Guten Blockを始めましょう。.
ES5を使用する（ECMAScript 5）
これらすべてのツールを使用して簡単なものを作成する “こんにちは世界” ブロックは多すぎるように見えるかもしれません。スタックをスリムに保ちたい場合は、すでに慣れ親しんだ普通のECMAScript 5を使って実際にグーテンベルクブロックを開発することができます。あなたが持っている場合 WP-CLI 1.5.0がコンピュータにインストールされている, あなたはただ走ることができます…
WP足場ブロック[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>…に <strong>あなたのプラグインやテーマにグーテンベルクブロックの定型文を生成する</strong>. このアプローチは、特にグーテンベルク時代以前に開発した既存のプラグインとテーマにとってより賢明です。.</p> <p>グーテンベルクブロックを収容するために新しいプラグインを作成する代わりに、あなたのプラグインやテーマにブロックを統合することをお勧めします。そして、このチュートリアルをみんなにとってわかりやすくするために, <strong>WP-CLIでECMAScript 5を使用します</strong>.</p> <h4>新しいブロックを登録する</h4> <p>Gutenbergは現在プラグインとして開発されており、チームが準備が整ったと感じたときはいつでもWordPress 5.0にマージされるでしょう。それで、当分の間、あなたはそれをからインストールする必要があるでしょう。 <strong>プラグインページ <code>WP管理者</code></strong>. インストールしてアクティブ化したら、ターミナルまたはWindowsマシンの場合はコマンドプロンプトで次のコマンドを実行します。.</p> <pre name="code"> wpスキャフォールドブロックシリーズ--title = "HTML5 Series" --theme</pre> <p>このコマンドは現在アクティブなテーマへのブロックを生成します。私たちのブロックは以下のファイルで構成されます。</p> <pre name="code"> . ×¢Â？？？¢Â？？？¢Â？？？シリーズ×¢？？？？¢Â？？？¢Â？？？¢Â？？？ block.js×¢？？？？¢Â？？？¢Â？？？¢Â？？？ editor.css×¢？？？？¢Â？？？¢Â？？？¢Â？？？ style.css×¢Â？？？¢Â？？？¢Â？？？ series.php </pre> <p>ブロックのメインファイルを <code>functions.php</code> 私たちのテーマの：</p> <pre name="code"> if（function_exists（ 'register_block_type'））get_template_directory（）が必要です。 '/blocks/series.php'; </pre> <p>ファイルロードを条件付きで囲むことに注意してください。これにより、 <strong>グーテンベルクが存在するときにのみ私たちのブロックがロードされる以前のWordPressバージョンとの互換性</strong>. これで、グーテンベルクインターフェース内で私たちのブロックが利用可能になります。.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>ブロックを挿入したときの外観.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>グーテンベルグAPI</h3> <p>グーテンベルクは、新しいブロックを登録するために2セットのAPIを紹介します。私達が見れば <code>series.php</code>, 新しいBlockを登録する次のコードが見つかります。また <strong>フロントエンドとエディタにスタイルシートとJavaScriptをロードします。</strong>.</p> <pre name="code">register_block_type（ '21 / series'、array（ 'editor_script' => 'series-block-editor'、 'editor_style' => 'series-block-editor'、 'style' => 'series-block'、））;</pre> <p>上記のように、私たちのブロックは <code>二十七/シリーズ</code>, 他のプラグインによってもたらされた他のブロックとの衝突を避けるために、ブロック名は一意で名前空間が必要です。.</p> <p>さらに, <strong>グーテンベルクは、と対話するための一連の新しいJavaScript APIを提供します。 “ブロック” インタフェース</strong> エディタで。 APIは非常に豊富にあるので、私たちはあなたがシンプルだが機能しているグーテンベルクブロックを得るためにあなたが知っているべきだと思ういくつかの詳細に焦点を当てます。.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>最初に、私達は調べます <code>wp.blocks.registerBlockType</code>. この機能は、 <strong>新規登録 “ブロック” グーテンベルグの編集者へ</strong>. 2つの引数が必要です。最初の引数は、で登録された名前に続くべきブロック名です。 <code>register_block_type</code> PHP側で機能します。 2番目の引数は <strong>ブロックプロパティを定義するオブジェクト</strong> タイトル、カテゴリ、およびBlockインタフェースをレンダリングするための2つの関数のようなもの.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType（ '27 /シリーズ'、タイトル：__（ 'HTML5シリーズ'）、カテゴリ： 'ウィジェット'、キーワード：['html']、編集：関数（小道具）、保存：関数（小道具） ;））; </pre> <h4><code>wp.element.createElement</code></h4> <p>この関数はあなたの中に要素を作成することを可能にします “ブロック” ポストエディタで。の <code>wp.element.createElement</code> 関数は基本的にReactの抽象化です <code>createElement（）</code> したがって、functionは同じ引数のセットを受け入れます。最初の引数は要素の型、例えば段落、 <code>スパン</code>, または <code>div</code> 以下に示すように：</p> <pre name="code">wp.element.createElement（ 'div'）;</pre> <p>私たちはできる <strong>関数を変数にエイリアスする</strong> だから書くのは短いです。例えば：</p> <pre name="code"> var el = wp.element.createElement; el（ 'div'）;</pre> <p>もし、あんたが <strong>新しいES6構文の使用を好む</strong>, このようにすることもできます。</p> <pre name="code"> const createElement：el = wp.element; el（ 'div'）;</pre> <p>私達はまたできます <strong>要素の属性を追加する</strong> のような <code>クラス</code> 名前または <code>id</code> 次のように2番目のパラメータで。</p> <pre name="code"> var el = wp.element.createElement; el（ 'div'、'クラス'： 'series-html5'、 'id'： 'series-html-post-id-001'）;</pre> <p>の <code>div</code> 私たちが作ったものはその内容がなければ意味がありません。私たちはできる <strong>3番目のパラメータの引数に内容を追加する</strong>：</p> <pre name="code"> var el = wp.element.createElement; el（ 'p'、'class'： 'series-html5'、 'id'： 'series-html-post-id-001'、 'この記事は私達の "HTML5 / CSS3チュートリアルシリーズ"の一部です - 専用より良いデザイナーや開発者になるために、ここをクリックして同じシリーズの他の記事を参照してください。</pre> <h4><code>wp.components</code></h4> <p>の <code>wp.components</code> 名前が示すように、グーテンベルクコンポーネントのコレクションを含みます。これらのコンポーネントは技術的には、ボタン、ポップオーバー、スピナー、ツールチップ、その他多数のReactカスタムコンポーネントです。私たちはできる <strong>これらのコンポーネントを私たち自身のブロックに再利用する</strong>. 次の例では、ボタンコンポーネントを追加します。.</p> <pre name="code"> var Button = wp.components.Button; el（Button、'クラス'： 'ダウンロードボタン'、、 'ダウンロード'）;</pre> <h4>属性</h4> <p>属性は、データをブロックに格納するための方法です。このデータは、コンテンツ、色、配置、URLなどになります。 <code>edit（）</code> 次のように機能します。</p> <pre name="code"> 編集：関数（小道具）varコンテンツ= props.attributes.seriesContent; el（ 'div'、'class'： 'series-html5'、 'id'： 'series-html-post-id-001'、content）を返します。 </pre> <p>属性を更新するには、 <code>setAttributes（）</code> 関数。通常、ボタンがクリックされたとき、入力がいっぱいになったとき、オプションが選択されたときなど、特定のアクションの内容を変更します。次の例では、それを使用して追加します。 <strong>後退する</strong> 予期しないことが起きた場合のブロックの内容 <code>seriesContent</code> 属性.</p> <pre name="code"> 編集：function（props）if（typeof props.attributes.seriesContent === 'undefined' ||！props.attributes.seriesContent）props.setAttribute（seriesContent： 'こんにちは、フォールバックコンテンツです。' var content = props.attributes.seriesContent; [el（ 'div'、'class'： 'series-html5'、 'id'： 'series-html-post-id-001'、content）、];を返します。 </pre> <h4>ブロックを保存する</h4> <p>の <code>保存する（）</code> この関数は <code>edit（）</code>, ただし、投稿データベースに保存するために、ブロックのコンテンツを定義します。下記のように、ブロックの内容を保存するのはとても簡単です。</p> <pre name="code"> save：function（props）if（！props ||！props.attributes.seriesContent）return; var content = props.attributes.seriesContent; [el（ 'div'、'class'： 'series-html5'、 'id'： 'series-html-post-id-001'、content）、];を返します。 </pre> <h3>次は何ですか?</h3> <p>グーテンベルクはWordPressのエコシステムをより良いものに（あるいはもっと悪いものに）変えるでしょう。それは開発者を可能にします <strong>WordPressのプラグインとテーマを開発する新しい方法を採用する</strong>. グーテンベルクはほんの始まりです。まもなく “ブロック” パラダイムは、設定APIやウィジェットなど、WordPressの他の分野にも拡張されます。.</p> <p>JavaScriptを詳しく学んでください。それはグーテンベルクに入ってWordPress業界で未来に関連し続けるための唯一の方法です。あなたがすでにJavaScriptの基本、癖、機能、ツール、商品、そしてバッドに精通しているのなら、グーテンベルクに慣れるのは確実です。.</p> <p>述べたように、グーテンベルクはあなたのブロックにほとんど何でもするのに十分な豊富なAPIを公開しています。するかどうかを選択できます <strong>あなたのブロックを普通のJavaScript、ES6シンタックスを含むJavaScript、React、あるいはVueでコーディングする</strong>.</p> <h4>アイデアとインスピレーション</h4> <p>私はあなたが私たちのGithubアカウントのリポジトリで見つけることができる非常に（非常に）簡単なグーテンベルクブロックを作成しました。さらに、私はあなたがより複雑なブロックを構築することにインスピレーションを促すことができるところからのリポジトリの数をまとめました.</p> <ul><li>Gutenblocks - ES5 SyntaxでJavaScriptで書かれたMathieu Vietによるブロックのコレクション</li> <li>Jetpack Gutenblocks Project - Jetpackにバンドルされているブロックのコレクション</li> <li>Vue.jsを含むGutenbergの実装例のリスト</li> </ul><h3>その他の参考資料</h3> <ul><li>グーテンベルクオフィシャルリポジトリ</li> <li>グーテンベルクハンドブック</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">IKEAラックテーブルをコンポーネントラックに入れる</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">カスタムキーボードを作成するために古いキーボードをハックする</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Windows 10タスクマネージャガイド - パートII</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">次の記事</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">超高輝度プレミアムワンに10ドルの懐中電灯をハック</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">前の記事</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Windows 10タスクマネージャガイド - パートIII</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> 役立つ情報とWeb開発のヒント。 プログラミング、Webデザイン、CSS、HTML、JAVASCRIPT。 WINDOWSを構成して再インストールします。 サイトおよびアプリケーションをゼロから作成します。 </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>