SlideShare uma empresa Scribd logo
1 de 51
Baixar para ler offline
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
(function (blocks, element) {
  blocks.registerBlockType('cgb/block-wceu-block', {
    title: __('WCEU Block'),
icon: 'shield',
    edit: function (props) {
      return element.createElement(
        'p',
        null,
        'You will see me in the editor.'
      );
    },
    save: function (props) {
      return element.createElement(
        'p',
        null,
        'I am saved to the database.'
      );
    }
  })
})(
  wp.blocks,
  wp.element
);
const { registerBlockType } = wp.blocks;
registerBlockType( 'cgb/block-wceu-block', {
title: __( ‘WCEU Block' ),
icon: ‘carrot',
edit: function( props ) {
return (
<p>You will see me in the editor.</p>
)
},
save: function( props ) {
return (
<p>I am saved to the database.</p>
)
}
});
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
value: {
    type: 'array',
    source: 'query',
    selector: 'blockquote > p',
    query: {
      children: {
        source: 'node',
      },
    },
    default: [],
  },
  citation: {
    type: 'array',
    source: 'children',
    selector: 'cite',
  },
  align: {
    type: 'string',
  },
  style: {
    type: 'number',
    default: 1,
  },
<RichText
       tagName="cite"
       value={ citation }
       onChange={
         ( nextCitation ) => props.setAttributes( {
           citation: nextCitation,
         } )
       }
       placeholder={ __( 'Write citation…' ) }
     />
<blockquote
        className={ style === 2 ? 'is-large' : '' }
        style={ { textAlign: align ? align : null } }
      >
        <RichText.Content value={ toRichTextValue( value ) } />
        { citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
      </blockquote>
<!-- wp:quote {"align":"center","style":2} -->
<blockquote class="wp-block-quote is-large" style="text-align:center">
  <p>You'll have to learn how to configure a build step someday, probably.</p>
<cite>Lara Schenck</cite></blockquote>
<!-- /wp:quote -->
const { registerBlockType } = wp.blocks;
registerBlockType('cgb/block-wceu-block', {
    title: __('Section Block' ),
icon: 'carrot',
attributes: {
      value: {
        type: 'array',
        source: ‘children',
        selector: 'p'
      },
align: {
        type: ‘string'
      }
    },
edit: function (props) { ... },
    
save: function (props) { ... }
});
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018
Let's Build A Gutenberg Block | WordCamp Europe 2018

Mais conteúdo relacionado

Mais procurados

Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Mongo db query docuement
Mongo db query docuementMongo db query docuement
Mongo db query docuementzarigatongy
 
Cервер на Go для мобильной стратегии
Cервер на Go для мобильной стратегииCервер на Go для мобильной стратегии
Cервер на Go для мобильной стратегииArtem Kovardin
 
2012-09-17 - WDC12: Node.js & MongoDB
2012-09-17 - WDC12: Node.js & MongoDB2012-09-17 - WDC12: Node.js & MongoDB
2012-09-17 - WDC12: Node.js & MongoDBJohannes Hoppe
 
Windows Server 2012 Active Directory Recovery
Windows Server 2012 Active Directory RecoveryWindows Server 2012 Active Directory Recovery
Windows Server 2012 Active Directory RecoverySerhad MAKBULOĞLU, MBA
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBSqreen
 
Introduce of the parallel distributed Crawler with scraping Dynamic HTML
Introduce of the parallel distributed Crawler with scraping Dynamic HTMLIntroduce of the parallel distributed Crawler with scraping Dynamic HTML
Introduce of the parallel distributed Crawler with scraping Dynamic HTMLKei Shiratsuchi
 
Do something in 5 with apps scripts number 6 - fusion crossfilter
Do something in 5 with apps scripts number 6 - fusion crossfilterDo something in 5 with apps scripts number 6 - fusion crossfilter
Do something in 5 with apps scripts number 6 - fusion crossfilterBruce McPherson
 
Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal coreMarcin Wosinek
 
Do something in 5 with gas 8-copy between databases
Do something in 5 with gas 8-copy between databasesDo something in 5 with gas 8-copy between databases
Do something in 5 with gas 8-copy between databasesBruce McPherson
 
Security Challenges in Node.js
Security Challenges in Node.jsSecurity Challenges in Node.js
Security Challenges in Node.jsWebsecurify
 
Do something in 5 with gas 9-copy between databases with oauth2
Do something in 5 with gas 9-copy between databases with oauth2Do something in 5 with gas 9-copy between databases with oauth2
Do something in 5 with gas 9-copy between databases with oauth2Bruce McPherson
 
Redis the better NoSQL
Redis the better NoSQLRedis the better NoSQL
Redis the better NoSQLOpenFest team
 
Angular Restmod (english version)
Angular Restmod (english version)Angular Restmod (english version)
Angular Restmod (english version)Marcin Gajda
 
JavaScript client API for Google Apps Script API primer
JavaScript client API for Google Apps Script API primerJavaScript client API for Google Apps Script API primer
JavaScript client API for Google Apps Script API primerBruce McPherson
 

Mais procurados (20)

Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Mongo db query docuement
Mongo db query docuementMongo db query docuement
Mongo db query docuement
 
Cервер на Go для мобильной стратегии
Cервер на Go для мобильной стратегииCервер на Go для мобильной стратегии
Cервер на Go для мобильной стратегии
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
2012-09-17 - WDC12: Node.js & MongoDB
2012-09-17 - WDC12: Node.js & MongoDB2012-09-17 - WDC12: Node.js & MongoDB
2012-09-17 - WDC12: Node.js & MongoDB
 
Windows Server 2012 Active Directory Recovery
Windows Server 2012 Active Directory RecoveryWindows Server 2012 Active Directory Recovery
Windows Server 2012 Active Directory Recovery
 
GroovyConsole
GroovyConsoleGroovyConsole
GroovyConsole
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDB
 
Introduce of the parallel distributed Crawler with scraping Dynamic HTML
Introduce of the parallel distributed Crawler with scraping Dynamic HTMLIntroduce of the parallel distributed Crawler with scraping Dynamic HTML
Introduce of the parallel distributed Crawler with scraping Dynamic HTML
 
Do something in 5 with apps scripts number 6 - fusion crossfilter
Do something in 5 with apps scripts number 6 - fusion crossfilterDo something in 5 with apps scripts number 6 - fusion crossfilter
Do something in 5 with apps scripts number 6 - fusion crossfilter
 
Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal core
 
Do something in 5 with gas 8-copy between databases
Do something in 5 with gas 8-copy between databasesDo something in 5 with gas 8-copy between databases
Do something in 5 with gas 8-copy between databases
 
Security Challenges in Node.js
Security Challenges in Node.jsSecurity Challenges in Node.js
Security Challenges in Node.js
 
Ajax - a quick introduction
Ajax - a quick introductionAjax - a quick introduction
Ajax - a quick introduction
 
Do something in 5 with gas 9-copy between databases with oauth2
Do something in 5 with gas 9-copy between databases with oauth2Do something in 5 with gas 9-copy between databases with oauth2
Do something in 5 with gas 9-copy between databases with oauth2
 
Trimming The Cruft
Trimming The CruftTrimming The Cruft
Trimming The Cruft
 
Redis the better NoSQL
Redis the better NoSQLRedis the better NoSQL
Redis the better NoSQL
 
Angular Restmod (english version)
Angular Restmod (english version)Angular Restmod (english version)
Angular Restmod (english version)
 
Road to react hooks
Road to react hooksRoad to react hooks
Road to react hooks
 
JavaScript client API for Google Apps Script API primer
JavaScript client API for Google Apps Script API primerJavaScript client API for Google Apps Script API primer
JavaScript client API for Google Apps Script API primer
 

Semelhante a Let's Build A Gutenberg Block | WordCamp Europe 2018

jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyHuiyi Yan
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesRiad Benguella
 
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneRafael Felix da Silva
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Riak with node.js
Riak with node.jsRiak with node.js
Riak with node.jsSean Cribbs
 
Your First Gutenberg Block
Your First Gutenberg BlockYour First Gutenberg Block
Your First Gutenberg BlockYoav Farhi
 
Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Luka Zakrajšek
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6Dmitry Soshnikov
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说Ting Lv
 
Backbone.js Simple Tutorial
Backbone.js Simple TutorialBackbone.js Simple Tutorial
Backbone.js Simple Tutorial추근 문
 
Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots DeepAnshu Sharma
 
Dpilot - Source Code with Snapshots
Dpilot - Source Code with SnapshotsDpilot - Source Code with Snapshots
Dpilot - Source Code with SnapshotsKritika Phulli
 
Source Code for Dpilot
Source Code for Dpilot Source Code for Dpilot
Source Code for Dpilot Nidhi Chauhan
 
Persistencia de datos con Parse
Persistencia de datos con ParsePersistencia de datos con Parse
Persistencia de datos con ParseAlfonso Alba
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5arajivmordani
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloRobert Nyman
 

Semelhante a Let's Build A Gutenberg Block | WordCamp Europe 2018 (20)

jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
 
Gutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisablesGutenberg sous le capot, modules réutilisables
Gutenberg sous le capot, modules réutilisables
 
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Backbone js
Backbone jsBackbone js
Backbone js
 
jQuery
jQueryjQuery
jQuery
 
Riak with node.js
Riak with node.jsRiak with node.js
Riak with node.js
 
Your First Gutenberg Block
Your First Gutenberg BlockYour First Gutenberg Block
Your First Gutenberg Block
 
Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Django Class-based views (Slovenian)
Django Class-based views (Slovenian)
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
 
Backbone.js Simple Tutorial
Backbone.js Simple TutorialBackbone.js Simple Tutorial
Backbone.js Simple Tutorial
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots
 
Dpilot - Source Code with Snapshots
Dpilot - Source Code with SnapshotsDpilot - Source Code with Snapshots
Dpilot - Source Code with Snapshots
 
Source Code for Dpilot
Source Code for Dpilot Source Code for Dpilot
Source Code for Dpilot
 
Persistencia de datos con Parse
Persistencia de datos con ParsePersistencia de datos con Parse
Persistencia de datos con Parse
 
Pengenalan blaast platform sdk
Pengenalan blaast platform sdkPengenalan blaast platform sdk
Pengenalan blaast platform sdk
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 

Mais de Lara Schenck

CSS Algorithms - v3.6.1 @ Strange Loop
CSS Algorithms - v3.6.1 @ Strange LoopCSS Algorithms - v3.6.1 @ Strange Loop
CSS Algorithms - v3.6.1 @ Strange LoopLara Schenck
 
CSS Algorithms v3.4 @ CSSCamp Barcelona
CSS Algorithms  v3.4 @ CSSCamp BarcelonaCSS Algorithms  v3.4 @ CSSCamp Barcelona
CSS Algorithms v3.4 @ CSSCamp BarcelonaLara Schenck
 
Algorithms in CSS v3.1.0 | CSS Day 2019
Algorithms in CSS v3.1.0 | CSS Day 2019Algorithms in CSS v3.1.0 | CSS Day 2019
Algorithms in CSS v3.1.0 | CSS Day 2019Lara Schenck
 
Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...
Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...
Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...Lara Schenck
 
The Algorithms of CSS @ CSSConf EU 2018
The Algorithms of CSS @ CSSConf EU 2018The Algorithms of CSS @ CSSConf EU 2018
The Algorithms of CSS @ CSSConf EU 2018Lara Schenck
 
Browser Mechanics & CSS
Browser Mechanics & CSSBrowser Mechanics & CSS
Browser Mechanics & CSSLara Schenck
 
The Five-Figure WordPress Website
The Five-Figure WordPress WebsiteThe Five-Figure WordPress Website
The Five-Figure WordPress WebsiteLara Schenck
 

Mais de Lara Schenck (7)

CSS Algorithms - v3.6.1 @ Strange Loop
CSS Algorithms - v3.6.1 @ Strange LoopCSS Algorithms - v3.6.1 @ Strange Loop
CSS Algorithms - v3.6.1 @ Strange Loop
 
CSS Algorithms v3.4 @ CSSCamp Barcelona
CSS Algorithms  v3.4 @ CSSCamp BarcelonaCSS Algorithms  v3.4 @ CSSCamp Barcelona
CSS Algorithms v3.4 @ CSSCamp Barcelona
 
Algorithms in CSS v3.1.0 | CSS Day 2019
Algorithms in CSS v3.1.0 | CSS Day 2019Algorithms in CSS v3.1.0 | CSS Day 2019
Algorithms in CSS v3.1.0 | CSS Day 2019
 
Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...
Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...
Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS...
 
The Algorithms of CSS @ CSSConf EU 2018
The Algorithms of CSS @ CSSConf EU 2018The Algorithms of CSS @ CSSConf EU 2018
The Algorithms of CSS @ CSSConf EU 2018
 
Browser Mechanics & CSS
Browser Mechanics & CSSBrowser Mechanics & CSS
Browser Mechanics & CSS
 
The Five-Figure WordPress Website
The Five-Figure WordPress WebsiteThe Five-Figure WordPress Website
The Five-Figure WordPress Website
 

Último

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Último (20)

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

Let's Build A Gutenberg Block | WordCamp Europe 2018

  • 31. (function (blocks, element) {   blocks.registerBlockType('cgb/block-wceu-block', {     title: __('WCEU Block'), icon: 'shield',     edit: function (props) {       return element.createElement(         'p',         null,         'You will see me in the editor.'       );     },     save: function (props) {       return element.createElement(         'p',         null,         'I am saved to the database.'       );     }   }) })(   wp.blocks,   wp.element );
  • 32. const { registerBlockType } = wp.blocks; registerBlockType( 'cgb/block-wceu-block', { title: __( ‘WCEU Block' ), icon: ‘carrot', edit: function( props ) { return ( <p>You will see me in the editor.</p> ) }, save: function( props ) { return ( <p>I am saved to the database.</p> ) } });
  • 40. value: {     type: 'array',     source: 'query',     selector: 'blockquote > p',     query: {       children: {         source: 'node',       },     },     default: [],   },   citation: {     type: 'array',     source: 'children',     selector: 'cite',   },   align: {     type: 'string',   },   style: {     type: 'number',     default: 1,   },
  • 41. <RichText        tagName="cite"        value={ citation }        onChange={          ( nextCitation ) => props.setAttributes( {            citation: nextCitation,          } )        }        placeholder={ __( 'Write citation…' ) }      />
  • 42. <blockquote         className={ style === 2 ? 'is-large' : '' }         style={ { textAlign: align ? align : null } }       >         <RichText.Content value={ toRichTextValue( value ) } />         { citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }       </blockquote> <!-- wp:quote {"align":"center","style":2} --> <blockquote class="wp-block-quote is-large" style="text-align:center">   <p>You'll have to learn how to configure a build step someday, probably.</p> <cite>Lara Schenck</cite></blockquote> <!-- /wp:quote -->
  • 43. const { registerBlockType } = wp.blocks; registerBlockType('cgb/block-wceu-block', {     title: __('Section Block' ), icon: 'carrot', attributes: {       value: {         type: 'array',         source: ‘children',         selector: 'p'       }, align: {         type: ‘string'       }     }, edit: function (props) { ... },      save: function (props) { ... } });