Building blocks without writing Javascript using Advanced Custom Fields

Slide 1

Slide 1 text

Building blocks without writing javascript Mark Wilkinson Co-founder & developer at Highrise Digital https://highrise.digital @wpmark

Slide 2

Slide 2 text

Blocks?

Slide 3

Slide 3 text

Block editor

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

How are blocks developed?

Slide 7

Slide 7 text

PHP JS

Slide 8

Slide 8 text

React.js https://reactjs.org/

Slide 9

Slide 9 text

Webpack etc.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ACF v5.8 acf_register_block_type()

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

https://www.advancedcustomfields.com/resources/acf_register_block_type/

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

https://highrise.digital/hdacfblocks-wcmcr-2018/

Slide 19

Slide 19 text

HD ACF GB Blocks Now with native block support

Slide 20

Slide 20 text

Content Hero Feature row Call to action Videos Quotes Image Accordion Documents Locations Heading Separator Statistics Recent content Gravity form Pricing

Slide 21

Slide 21 text

Content Hero Feature row Call to action Videos Quotes Image Accordion Documents Locations Heading Separator Statistics Recent content Gravity form Pricing

Slide 22

Slide 22 text

Block output

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

CSS helper classes

Slide 26

Slide 26 text

has--light-text has--bg-image has--bg-color has--block-intro has--block-title template--one block--count-2

Slide 27

Slide 27 text

Extensibly built

Slide 28

Slide 28 text

Constantly evolving

Slide 29

Slide 29 text

Mark Wilkinson Co-owner of Highrise Digital WordPress developer @wpmark @highrisedigital https://highrise.digital

Slide 30

Slide 30 text

Questions ? Although not necessarily answers! @wpmark