From 61106cc5d0044542d3d12152a2b6bb3f5154be62 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 20 Sep 2019 15:11:12 -0700 Subject: [PATCH 1/2] Add example block setting to show block preview Adds example attribute to each block with values so the block previews will show in the inserter. Requires Gutenberg 6.5 --- 01-basic-esnext/build/index.js | 2 +- 01-basic-esnext/src/index.js | 1 + 01-basic/block.js | 1 + 02-stylesheets/block.js | 1 + 03-editable-esnext/build/index.asset.php | 2 +- 03-editable-esnext/build/index.js | 2 +- 03-editable-esnext/src/index.js | 5 +++++ 03-editable/block.js | 6 ++++++ 04-controls-esnext/build/index.asset.php | 2 +- 04-controls-esnext/build/index.js | 2 +- 04-controls-esnext/src/index.js | 6 ++++++ 04-controls/block.js | 7 +++++++ 05-recipe-card-esnext/build/index.asset.php | 2 +- 05-recipe-card-esnext/build/index.js | 2 +- 05-recipe-card-esnext/src/index.js | 9 +++++++++ 05-recipe-card/block.js | 18 +++++++++++++++--- 16 files changed, 58 insertions(+), 10 deletions(-) diff --git a/01-basic-esnext/build/index.js b/01-basic-esnext/build/index.js index 2abb64d9..26c770ca 100644 --- a/01-basic-esnext/build/index.js +++ b/01-basic-esnext/build/index.js @@ -1 +1 @@ -!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t,r){"use strict";r.r(t);var n=r(0),o=wp.i18n.__,c={backgroundColor:"#900",color:"#fff",padding:"20px"};(0,wp.blocks.registerBlockType)("gutenberg-examples/example-01-basic-esnext",{title:o("Example: Basic (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",edit:function(){return Object(n.createElement)("div",{style:c},"Hello World, step 1 (from the editor).")},save:function(){return Object(n.createElement)("div",{style:c},"Hello World, step 1 (from the frontend).")}})}]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(2),c=n(1),i={backgroundColor:"#900",color:"#fff",padding:"20px"};Object(c.registerBlockType)("gutenberg-examples/example-01-basic-esnext",{title:Object(o.__)("Example: Basic (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",example:{},edit:function(){return Object(r.createElement)("div",{style:i},"Hello World, step 1 (from the editor).")},save:function(){return Object(r.createElement)("div",{style:i},"Hello World, step 1 (from the frontend).")}})}]); \ No newline at end of file diff --git a/01-basic-esnext/src/index.js b/01-basic-esnext/src/index.js index f385fc41..6edbb595 100644 --- a/01-basic-esnext/src/index.js +++ b/01-basic-esnext/src/index.js @@ -12,6 +12,7 @@ registerBlockType( 'gutenberg-examples/example-01-basic-esnext', { title: __( 'Example: Basic (ESNext)', 'gutenberg-examples' ), icon: 'universal-access-alt', category: 'layout', + example: {}, edit() { return (
Hello World, step 1 (from the editor).
diff --git a/01-basic/block.js b/01-basic/block.js index 250db27d..86ff9229 100644 --- a/01-basic/block.js +++ b/01-basic/block.js @@ -20,6 +20,7 @@ title: __( 'Example: Basic', 'gutenberg-examples' ), icon: 'universal-access-alt', category: 'layout', + example: {}, edit: function() { return el( 'p', diff --git a/02-stylesheets/block.js b/02-stylesheets/block.js index ef7352d3..389fad04 100644 --- a/02-stylesheets/block.js +++ b/02-stylesheets/block.js @@ -15,6 +15,7 @@ title: __( 'Example: Stylesheets', 'gutenberg-examples' ), icon: 'universal-access-alt', category: 'layout', + example: {}, edit: function( props ) { return el( 'p', diff --git a/03-editable-esnext/build/index.asset.php b/03-editable-esnext/build/index.asset.php index e37d2164..e69ccd0d 100644 --- a/03-editable-esnext/build/index.asset.php +++ b/03-editable-esnext/build/index.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'b75d1699b4b5965b3ba33750409e0168'); \ No newline at end of file + array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'e6dd8af0992c4aabf4b0a46b6442249a'); \ No newline at end of file diff --git a/03-editable-esnext/build/index.js b/03-editable-esnext/build/index.js index 5b05f017..ba2f7d02 100644 --- a/03-editable-esnext/build/index.js +++ b/03-editable-esnext/build/index.js @@ -1 +1 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n(3),c=n(2),i=n(0);Object(c.registerBlockType)("gutenberg-examples/example-03-editable-esnext",{title:Object(o.__)("Example: Editable (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",attributes:{content:{type:"array",source:"children",selector:"p"}},edit:function(e){var t=e.attributes.content,n=e.setAttributes,o=e.className;return Object(r.createElement)(i.RichText,{tagName:"p",className:o,onChange:function(e){n({content:e})},value:t})},save:function(e){return Object(r.createElement)(i.RichText.Content,{tagName:"p",value:e.attributes.content})}})}]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n(1),c=n(3),i=n(0);Object(c.registerBlockType)("gutenberg-examples/example-03-editable-esnext",{title:Object(o.__)("Example: Editable (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",attributes:{content:{type:"array",source:"children",selector:"p"}},example:{attributes:{content:Object(o.__)("Hello world")}},edit:function(e){var t=e.attributes.content,n=e.setAttributes,o=e.className;return Object(r.createElement)(i.RichText,{tagName:"p",className:o,onChange:function(e){n({content:e})},value:t})},save:function(e){return Object(r.createElement)(i.RichText.Content,{tagName:"p",value:e.attributes.content})}})}]); \ No newline at end of file diff --git a/03-editable-esnext/src/index.js b/03-editable-esnext/src/index.js index e386fcfb..10740b68 100644 --- a/03-editable-esnext/src/index.js +++ b/03-editable-esnext/src/index.js @@ -14,6 +14,11 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { selector: 'p', }, }, + example: { + attributes: { + content: __( 'Hello world' ) + }, + }, edit: ( props ) => { const { attributes: { content }, setAttributes, className } = props; const onChangeContent = ( newContent ) => { diff --git a/03-editable/block.js b/03-editable/block.js index 90aefe15..77124fd8 100644 --- a/03-editable/block.js +++ b/03-editable/block.js @@ -22,6 +22,12 @@ }, }, + example: { + attributes: { + content: __( 'Hello world' ), + }, + }, + edit: function( props ) { var content = props.attributes.content; function onChangeContent( newContent ) { diff --git a/04-controls-esnext/build/index.asset.php b/04-controls-esnext/build/index.asset.php index 8a409352..64a4a6f8 100644 --- a/04-controls-esnext/build/index.asset.php +++ b/04-controls-esnext/build/index.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '20b2b3e4b79e1e243a699e81ad954911'); \ No newline at end of file + array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '57d7ec9b925308113dc0232e6ceb5739'); \ No newline at end of file diff --git a/04-controls-esnext/build/index.js b/04-controls-esnext/build/index.js index 39bc3159..d5d4f8e3 100644 --- a/04-controls-esnext/build/index.js +++ b/04-controls-esnext/build/index.js @@ -1 +1 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(3),c=n(2),a=n(1);Object(c.registerBlockType)("gutenberg-examples/example-04-controls-esnext",{title:Object(o.__)("Example: Controls (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",attributes:{content:{type:"array",source:"children",selector:"p"},alignment:{type:"string",default:"none"}},edit:function(e){var t=e.attributes,n=t.content,o=t.alignment,c=e.className;return Object(r.createElement)("div",null,Object(r.createElement)(a.BlockControls,null,Object(r.createElement)(a.AlignmentToolbar,{value:o,onChange:function(t){e.setAttributes({alignment:void 0===t?"none":t})}})),Object(r.createElement)(a.RichText,{className:c,style:{textAlign:o},tagName:"p",onChange:function(t){e.setAttributes({content:t})},value:n}))},save:function(e){return Object(r.createElement)(a.RichText.Content,{className:"gutenberg-examples-align-".concat(e.attributes.alignment),tagName:"p",value:e.attributes.content})}})}]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(2),c=n(3),a=n(1);Object(c.registerBlockType)("gutenberg-examples/example-04-controls-esnext",{title:Object(o.__)("Example: Controls (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",attributes:{content:{type:"array",source:"children",selector:"p"},alignment:{type:"string",default:"none"}},example:{attributes:{content:Object(o.__)("Hello world"),alignment:"right"}},edit:function(e){var t=e.attributes,n=t.content,o=t.alignment,c=e.className;return Object(r.createElement)("div",null,Object(r.createElement)(a.BlockControls,null,Object(r.createElement)(a.AlignmentToolbar,{value:o,onChange:function(t){e.setAttributes({alignment:void 0===t?"none":t})}})),Object(r.createElement)(a.RichText,{className:c,style:{textAlign:o},tagName:"p",onChange:function(t){e.setAttributes({content:t})},value:n}))},save:function(e){return Object(r.createElement)(a.RichText.Content,{className:"gutenberg-examples-align-".concat(e.attributes.alignment),tagName:"p",value:e.attributes.content})}})}]); \ No newline at end of file diff --git a/04-controls-esnext/src/index.js b/04-controls-esnext/src/index.js index 4cb7f5f5..7fef0486 100644 --- a/04-controls-esnext/src/index.js +++ b/04-controls-esnext/src/index.js @@ -25,6 +25,12 @@ registerBlockType( 'gutenberg-examples/example-04-controls-esnext', { default: 'none', }, }, + example: { + attributes: { + content: __( 'Hello world' ), + alignment: 'right', + }, + }, edit: ( props ) => { const { attributes: { diff --git a/04-controls/block.js b/04-controls/block.js index 5effa4fe..05eae203 100644 --- a/04-controls/block.js +++ b/04-controls/block.js @@ -27,6 +27,13 @@ }, }, + example: { + attributes: { + content: __( 'Hello world' ), + alignment: 'right', + }, + }, + edit: function( props ) { var content = props.attributes.content; var alignment = props.attributes.alignment; diff --git a/05-recipe-card-esnext/build/index.asset.php b/05-recipe-card-esnext/build/index.asset.php index c4b8a188..b207f0fd 100644 --- a/05-recipe-card-esnext/build/index.asset.php +++ b/05-recipe-card-esnext/build/index.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '90824b35b3b97a34d30c4e73039d5243'); \ No newline at end of file + array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'd3ceeb82ec8e77817a88bb9215b2aca4'); \ No newline at end of file diff --git a/05-recipe-card-esnext/build/index.js b/05-recipe-card-esnext/build/index.js index e9429e5e..cc210aa9 100644 --- a/05-recipe-card-esnext/build/index.js +++ b/05-recipe-card-esnext/build/index.js @@ -1 +1 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var c=t[r]={i:r,l:!1,exports:{}};return e[r].call(c.exports,c,c.exports,n),c.l=!0,c.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.components}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),c=n(1),i=n(4),a=n(2),s=n(3);Object(i.registerBlockType)("gutenberg-examples/example-05-recipe-card-esnext",{title:Object(c.__)("Example: Recipe Card (ESNext)","gutenberg-examples"),icon:"index-card",category:"layout",attributes:{title:{type:"array",source:"children",selector:"h2"},mediaID:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:"img",attribute:"src"},ingredients:{type:"array",source:"children",selector:".ingredients"},instructions:{type:"array",source:"children",selector:".steps"}},edit:function(e){var t=e.className,n=e.attributes,i=n.title,l=n.mediaID,o=n.mediaURL,u=n.ingredients,m=n.instructions,p=e.setAttributes;return Object(r.createElement)("div",{className:t},Object(r.createElement)(a.RichText,{tagName:"h2",placeholder:Object(c.__)("Write Recipe title…","gutenberg-examples"),value:i,onChange:function(e){p({title:e})}}),Object(r.createElement)("div",{className:"recipe-image"},Object(r.createElement)(a.MediaUpload,{onSelect:function(e){p({mediaURL:e.url,mediaID:e.id})},allowedTypes:"image",value:l,render:function(e){var t=e.open;return Object(r.createElement)(s.Button,{className:l?"image-button":"button button-large",onClick:t},l?Object(r.createElement)("img",{src:o,alt:Object(c.__)("Upload Recipe Image","gutenberg-examples")}):Object(c.__)("Upload Image","gutenberg-examples"))}})),Object(r.createElement)("h3",null,Object(c.__)("Ingredients","gutenberg-examples")),Object(r.createElement)(a.RichText,{tagName:"ul",multiline:"li",placeholder:Object(c.__)("Write a list of ingredients…","gutenberg-examples"),value:u,onChange:function(e){p({ingredients:e})},className:"ingredients"}),Object(r.createElement)("h3",null,Object(c.__)("Instructions","gutenberg-examples")),Object(r.createElement)(a.RichText,{tagName:"div",multiline:"p",className:"steps",placeholder:Object(c.__)("Write the instructions…","gutenberg-examples"),value:m,onChange:function(e){p({instructions:e})}}))},save:function(e){var t=e.className,n=e.attributes,i=n.title,s=n.mediaURL,l=n.ingredients,o=n.instructions;return Object(r.createElement)("div",{className:t},Object(r.createElement)(a.RichText.Content,{tagName:"h2",value:i}),s&&Object(r.createElement)("img",{className:"recipe-image",src:s,alt:Object(c.__)("Recipe Image","gutenberg-examples")}),Object(r.createElement)(a.RichText.Content,{tagName:"h2",className:"ingredients",value:l}),Object(r.createElement)(a.RichText.Content,{tagName:"div",className:"steps",value:o}))}})}]); \ No newline at end of file +!function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.components}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var i=n(0),r=n(1),a=n(4),c=n(2),s=n(3);Object(a.registerBlockType)("gutenberg-examples/example-05-recipe-card-esnext",{title:Object(r.__)("Example: Recipe Card (ESNext)","gutenberg-examples"),icon:"index-card",category:"layout",attributes:{title:{type:"array",source:"children",selector:"h2"},mediaID:{type:"number"},mediaURL:{type:"string",source:"attribute",selector:"img",attribute:"src"},ingredients:{type:"array",source:"children",selector:".ingredients"},instructions:{type:"array",source:"children",selector:".steps"}},example:{attributes:{title:Object(r.__)("Chocolate Chip Cookies","gutenberg-examples"),mediaID:1,mediaURL:"https://images.pexels.com/photos/1331979/pexels-photo-1331979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",ingredients:["flour","sugar","chocolate","💖"],instructions:["Mix","Bake","Enjoy"]}},edit:function(e){var t=e.className,n=e.attributes,a=n.title,l=n.mediaID,o=n.mediaURL,u=n.ingredients,m=n.instructions,p=e.setAttributes;return Object(i.createElement)("div",{className:t},Object(i.createElement)(c.RichText,{tagName:"h2",placeholder:Object(r.__)("Write Recipe title…","gutenberg-examples"),value:a,onChange:function(e){p({title:e})}}),Object(i.createElement)("div",{className:"recipe-image"},Object(i.createElement)(c.MediaUpload,{onSelect:function(e){p({mediaURL:e.url,mediaID:e.id})},allowedTypes:"image",value:l,render:function(e){var t=e.open;return Object(i.createElement)(s.Button,{className:l?"image-button":"button button-large",onClick:t},l?Object(i.createElement)("img",{src:o,alt:Object(r.__)("Upload Recipe Image","gutenberg-examples")}):Object(r.__)("Upload Image","gutenberg-examples"))}})),Object(i.createElement)("h3",null,Object(r.__)("Ingredients","gutenberg-examples")),Object(i.createElement)(c.RichText,{tagName:"ul",multiline:"li",placeholder:Object(r.__)("Write a list of ingredients…","gutenberg-examples"),value:u,onChange:function(e){p({ingredients:e})},className:"ingredients"}),Object(i.createElement)("h3",null,Object(r.__)("Instructions","gutenberg-examples")),Object(i.createElement)(c.RichText,{tagName:"div",multiline:"p",className:"steps",placeholder:Object(r.__)("Write the instructions…","gutenberg-examples"),value:m,onChange:function(e){p({instructions:e})}}))},save:function(e){var t=e.className,n=e.attributes,a=n.title,s=n.mediaURL,l=n.ingredients,o=n.instructions;return Object(i.createElement)("div",{className:t},Object(i.createElement)(c.RichText.Content,{tagName:"h2",value:a}),s&&Object(i.createElement)("img",{className:"recipe-image",src:s,alt:Object(r.__)("Recipe Image","gutenberg-examples")}),Object(i.createElement)(c.RichText.Content,{tagName:"h2",className:"ingredients",value:l}),Object(i.createElement)(c.RichText.Content,{tagName:"div",className:"steps",value:o}))}})}]); \ No newline at end of file diff --git a/05-recipe-card-esnext/src/index.js b/05-recipe-card-esnext/src/index.js index 613469f6..b2d6fe63 100644 --- a/05-recipe-card-esnext/src/index.js +++ b/05-recipe-card-esnext/src/index.js @@ -39,6 +39,15 @@ registerBlockType( 'gutenberg-examples/example-05-recipe-card-esnext', { selector: '.steps', }, }, + example: { + attributes: { + title: __( 'Chocolate Chip Cookies', 'gutenberg-examples' ), + mediaID: 1, + mediaURL: 'https://images.pexels.com/photos/1331979/pexels-photo-1331979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + ingredients: [ 'flour', 'sugar', 'chocolate', '💖' ], + instructions: [ 'Mix', 'Bake', 'Enjoy' ], + }, + }, edit: ( props ) => { const { className, diff --git a/05-recipe-card/block.js b/05-recipe-card/block.js index 5964358a..5312d55f 100644 --- a/05-recipe-card/block.js +++ b/05-recipe-card/block.js @@ -1,10 +1,11 @@ ( function( blocks, editor, i18n, element, components, _ ) { + var __ = i18n.__; var el = element.createElement; var RichText = editor.RichText; var MediaUpload = editor.MediaUpload; blocks.registerBlockType( 'gutenberg-examples/example-05-recipe-card', { - title: i18n.__( 'Example: Recipe Card', 'gutenberg-examples' ), + title: __( 'Example: Recipe Card', 'gutenberg-examples' ), icon: 'index-card', category: 'layout', attributes: { @@ -33,6 +34,17 @@ selector: '.steps', }, }, + + example: { + attributes: { + title: __( 'Chocolate Chip Cookies', 'gutenberg-examples' ), + mediaID: 1, + mediaURL: 'https://images.pexels.com/photos/1331979/pexels-photo-1331979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + ingredients: [ 'flour', 'sugar', 'chocolate', '💖' ], + instructions: [ 'Mix', 'Bake', 'Enjoy' ], + }, + }, + edit: function( props ) { var attributes = props.attributes; @@ -48,7 +60,7 @@ el( RichText, { tagName: 'h2', inline: true, - placeholder: i18n.__( 'Write Recipe title…', 'gutenberg-examples' ), + placeholder: __( 'Write Recipe title…', 'gutenberg-examples' ), value: attributes.title, onChange: function( value ) { props.setAttributes( { title: value } ); @@ -64,7 +76,7 @@ className: attributes.mediaID ? 'image-button' : 'button button-large', onClick: obj.open }, - ! attributes.mediaID ? i18n.__( 'Upload Image', 'gutenberg-examples' ) : el( 'img', { src: attributes.mediaURL } ) + ! attributes.mediaID ? __( 'Upload Image', 'gutenberg-examples' ) : el( 'img', { src: attributes.mediaURL } ) ); } } ) From f1f6fd23c7f899b6d41613089d2c4a0dc6316c62 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 2 Oct 2019 14:37:09 -0700 Subject: [PATCH 2/2] Fix whitespace, translatations --- 01-basic/block.js | 2 +- 02-stylesheets/block.js | 2 +- 03-editable/block.js | 10 +++++----- 04-controls-esnext/src/index.js | 12 ++++++------ 04-controls/block.js | 12 ++++++------ 05-recipe-card-esnext/src/index.js | 18 +++++++++++++----- 05-recipe-card/block.js | 16 ++++++++++++---- 7 files changed, 44 insertions(+), 28 deletions(-) diff --git a/01-basic/block.js b/01-basic/block.js index 86ff9229..8885910d 100644 --- a/01-basic/block.js +++ b/01-basic/block.js @@ -20,7 +20,7 @@ title: __( 'Example: Basic', 'gutenberg-examples' ), icon: 'universal-access-alt', category: 'layout', - example: {}, + example: {}, edit: function() { return el( 'p', diff --git a/02-stylesheets/block.js b/02-stylesheets/block.js index 389fad04..98fd48f4 100644 --- a/02-stylesheets/block.js +++ b/02-stylesheets/block.js @@ -15,7 +15,7 @@ title: __( 'Example: Stylesheets', 'gutenberg-examples' ), icon: 'universal-access-alt', category: 'layout', - example: {}, + example: {}, edit: function( props ) { return el( 'p', diff --git a/03-editable/block.js b/03-editable/block.js index 77124fd8..a45ffca2 100644 --- a/03-editable/block.js +++ b/03-editable/block.js @@ -22,11 +22,11 @@ }, }, - example: { - attributes: { - content: __( 'Hello world' ), - }, - }, + example: { + attributes: { + content: __( 'Hello world' ), + }, + }, edit: function( props ) { var content = props.attributes.content; diff --git a/04-controls-esnext/src/index.js b/04-controls-esnext/src/index.js index 7fef0486..347af81e 100644 --- a/04-controls-esnext/src/index.js +++ b/04-controls-esnext/src/index.js @@ -25,12 +25,12 @@ registerBlockType( 'gutenberg-examples/example-04-controls-esnext', { default: 'none', }, }, - example: { - attributes: { - content: __( 'Hello world' ), - alignment: 'right', - }, - }, + example: { + attributes: { + content: __( 'Hello world' ), + alignment: 'right', + }, + }, edit: ( props ) => { const { attributes: { diff --git a/04-controls/block.js b/04-controls/block.js index 05eae203..120b1d1d 100644 --- a/04-controls/block.js +++ b/04-controls/block.js @@ -27,12 +27,12 @@ }, }, - example: { - attributes: { - content: __( 'Hello world' ), - alignment: 'right', - }, - }, + example: { + attributes: { + content: __( 'Hello world' ), + alignment: 'right', + }, + }, edit: function( props ) { var content = props.attributes.content; diff --git a/05-recipe-card-esnext/src/index.js b/05-recipe-card-esnext/src/index.js index b2d6fe63..53b64ec5 100644 --- a/05-recipe-card-esnext/src/index.js +++ b/05-recipe-card-esnext/src/index.js @@ -42,12 +42,20 @@ registerBlockType( 'gutenberg-examples/example-05-recipe-card-esnext', { example: { attributes: { title: __( 'Chocolate Chip Cookies', 'gutenberg-examples' ), - mediaID: 1, - mediaURL: 'https://images.pexels.com/photos/1331979/pexels-photo-1331979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', - ingredients: [ 'flour', 'sugar', 'chocolate', '💖' ], - instructions: [ 'Mix', 'Bake', 'Enjoy' ], + mediaURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/320px-2ChocolateChipCookies.jpg', + ingredients: [ + __( 'flour', 'gutenberg-examples' ), + __( 'sugar', 'gutenberg-examples' ), + __( 'chocolate', 'gutenberg-examples' ), + '💖' + ], + instructions: [ + __( 'Mix', 'gutenberg-examples' ), + __( 'Bake', 'gutenberg-examples' ), + __( 'Enjoy', 'gutenberg-examples' ), + ], }, - }, + }, edit: ( props ) => { const { className, diff --git a/05-recipe-card/block.js b/05-recipe-card/block.js index 5312d55f..40e91107 100644 --- a/05-recipe-card/block.js +++ b/05-recipe-card/block.js @@ -38,10 +38,18 @@ example: { attributes: { title: __( 'Chocolate Chip Cookies', 'gutenberg-examples' ), - mediaID: 1, - mediaURL: 'https://images.pexels.com/photos/1331979/pexels-photo-1331979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', - ingredients: [ 'flour', 'sugar', 'chocolate', '💖' ], - instructions: [ 'Mix', 'Bake', 'Enjoy' ], + mediaURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/320px-2ChocolateChipCookies.jpg', + ingredients: [ + __( 'flour', 'gutenberg-examples' ), + __( 'sugar', 'gutenberg-examples' ), + __( 'chocolate', 'gutenberg-examples' ), + '💖' + ], + instructions: [ + __( 'Mix', 'gutenberg-examples' ), + __( 'Bake', 'gutenberg-examples' ), + __( 'Enjoy', 'gutenberg-examples' ), + ], }, },