1 of 66

Bygg Gutenberg-block med Advanced Custom Fields

2 of 66

Hej!

​

​

​

​

Stanislav Khromov

@khromov

https://khromov.se

2

3 of 66

Gutenberg kommer!

3

4 of 66

We’re going to take an extra week to make sure everything is fully dialed in and the release date is now targeted for Tuesday, November 27th

4

5 of 66

Vad händer med

metaboxes och custom fields?

5

6 of 66

6

7 of 66

7

8 of 66

8

9 of 66

9

10 of 66

Vad innebär Gutenberg, egentligen?

10

11 of 66

Gutenberg innebär

  • Ett helt nytt fundament för postredigeringsskärmen som ersätter den gamla skärmen baserad på HTML / CSS / JavaScript med en baserad på React.�
  • Befintliga metaboxar fungerar, så länge de inte interagerar på några komplicerade sätt med postredigeringsskärmen. (Men många metaboxar gör det)

11

12 of 66

Gutenberg innebär

  • Att befintliga metaboxar bör portas till block.��“With the superior developer and user experience of blocks, especially once block templates are available, porting PHP meta boxes to blocks is highly encouraged!” - Gutenberg developer handbook.

12

13 of 66

Hur anpassar sig olika tillägg?

13

14 of 66

14

15 of 66

Bygga block

i Gutenberg

15

16 of 66

Bygga block i Gutenberg

  • Gutenberg innehåller ett API för att bygga egna block.�
  • Kräver att man registrerar blocken med hjälp av JavaScript och använder sig av React för att registrera sina fält. �
  • Går att skriva block med bara JavaScript, eller hybridblock som använder PHP för sina mallar, likt shortcodes.

16

17 of 66

Finns det ett

enklare sätt?

17

18 of 66

Gutenberg + Advanced Custom Fields

18

19 of 66

ACF + Gutenberg

Första diskussionen startades i Juni 2017.

19

Place your screenshot here

20 of 66

ACF Version 5.8

Släppt 15 oktober 2018 med Gutenberg-stöd

20

Place your screenshot here

21 of 66

Låt oss bygga

ett block tillsammans!

21

22 of 66

Faktabox

  • Ett block med en rubrik, bild och text som ofta används på sajter för att komma med relaterad information

​

22

23 of 66

acf_register_block()

  • Används för att registrera ett block
  • Hanterar inställningar för vad blocket heter och hur det ska bete sig i Gutenberg
  • Hanterar hur blocket ska skrivas ut på sidan

23

24 of 66

24

25 of 66

25

26 of 66

Efter att blocket registrerats

  • Gå in i fältgrupperna för Advanced Custom Fields och lägg till fält med Location > Block > (ditt blocknamn)

26

27 of 66

27

28 of 66

28

29 of 66

29

30 of 66

Malla hur blocket ska se ut.

  • Advanced Custom Fields låter oss hantera hur blocken ska skrivas ut med hjälp av PHP.�
  • Fungerar ungefär som en vanlig temamall.
    • get_field()

30

31 of 66

31

32 of 66

32

33 of 66

Resultatet

33

34 of 66

34

35 of 66

35

36 of 66

Hur hanterar vi stilmallarna?

  • Stilmallarna för blocken måste specifikt köas upp för Gutenberg med hjälp av actionen “enqueue_block_editor_assets”
    • Funkar på samma sätt som “wp_enqueue_scripts”.�
  • Att köa in hela temats CSS in i Gutenberg blir väldigt kladdigt.

36

37 of 66

37

38 of 66

38

39 of 66

Förslag på

mappstruktur

39

40 of 66

40

41 of 66

Demo!

41

42 of 66

Workshop

Skapa ett citatblock i Gutenberg

42

43 of 66

43

44 of 66

Vad behövs?

  • En fungerande WordPress-installation att koda i
    • Har du ingen? Ladda ner Local by Flywheel
  • Advanced Custom Fields 5.8-beta2
  • Gutenberg
  • Child Theme Generator (om du önskar)��Länkar till allt finns på:�khromov.se/gutenberg-workshop

44

45 of 66

Vad ska ni göra?

  • Förbered ett barntema till ditt befintliga tema om du inte redan har ett.
  • Skapa en acf-json/-mapp i ditt barntema.
  • Registrera ett citatblock med acf_register_block() via temats functions.php
  • Registrera två fält: Citatets innehåll och vem som citeras.
  • Skapa en temamall under blocks/quote.php och lägg in HTML-mall som skriver ut de fält du önskar. Det finns ett exempel här.
  • Skapa en CSS-fil under blocks-css/quote.css och köa upp den.��Länkar till allt samt lösningsförslag finns på:�khromov.se/gutenberg-workshop

45

46 of 66

Tack!

Länkar och presentation

khromov.se/gutenberg-workshop

Kontakt

@khromov / khromov.se

46

47 of 66

Kredd

  • Presentationsmall - SlidesCarnival
  • Foton - Unsplash

47

48 of 66

48

49 of 66

You can also split your content

White

Is the color of milk and fresh snow, the color produced by the combination of all the colors of the visible spectrum.

Black

Is the color of coal, ebony, and of outer space. It is the darkest color, the result of the absence of or complete absorption of light.

49

50 of 66

In two or three columns

Yellow

Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.

Blue

Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.

Red

Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

​

50

51 of 66

A picture is worth a thousand words

A complex idea can be conveyed with just a single still image, namely making it possible to absorb large amounts of data quickly.

51

52 of 66

Want big impact?

Use big image.

52

53 of 66

Use charts to explain your ideas

53

Gray

White

Black

54 of 66

And tables to compare data

54

​

A

B

C

Yellow

10

20

7

Blue

30

15

10

Orange

5

24

16

55 of 66

Maps

55

our office

56 of 66

89,526,124

Whoa! That’s a big number, aren’t you proud?

56

57 of 66

89,526,124$

100%

185,244 users

That’s a lot of money

Total success!

And a lot of users

57

58 of 66

Our process is easy

58

first

second

last

59 of 66

Let’s review some concepts

Yellow

Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.

Blue

Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.

Red

Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

​

Yellow

Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.

Blue

Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.

Red

Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

​

59

60 of 66

You can insert graphs from Google Sheets

60

61 of 66

61

SlidesCarnival icons are editable shapes.

​

This means that you can:

  • Resize them without losing quality.
  • Change fill color and opacity.
  • Change line color, width and style.

​

Isn’t that nice? :)

​

Examples:

​

​

62 of 66

62

Now you can use any emoji as an icon!

And of course it resizes without losing quality and you can change the color.

​

How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328

​

​

​

​

✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂😉😋😒😭👶😸🐟🍒🍔💣📌📖🔨🎃🎈🎨🏈🏰🌏🔌🔑 and many more...

😉

63 of 66

Android project

Show and explain your web, app or software projects using these gadget templates.

63

Place your screenshot here

64 of 66

iPhone project

Show and explain your web, app or software projects using these gadget templates.

64

Place your screenshot here

65 of 66

Tablet project

Show and explain your web, app or software projects using these gadget templates.

65

Place your screenshot here

66 of 66

Desktop project

Show and explain your web, app or software projects using these gadget templates.

66

Place your screenshot here