You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1. Create ACF field group, set location as Form > Block. Be sure to select "Show in GraphQL". You don't need to se the GraphQL types manually. The default works.
9
-
1. Refresh Gutenberg Block cache in menu graphql > gutenberg
10
-
1. Verify that new component is available in gutenberg editor or graphiql (note you may need to clear site cache)
9
+
1. Verify that new component is available in the editor (note you may need to clear site cache)
11
10
1. Create backend PHP template and styles
12
11
1. in /blocks/ dir add new dir for block (eg "/block/slideshow")
13
12
1. add template to `/block/slideshow/block.php`
14
13
1. add styles to `/block/slideshow/block.css`
15
-
1. Add GQL to /gql/fragments/GutenbergBlocks.gql query. Be sure to alias your fields with `fields` like so:
16
-
```
17
-
# Custom Blocks
18
-
fragment SlideshowBlock on Block {
19
-
... on AcfSlideshowBlock {
20
-
# AcfCreditBlock is always like `Acf${BlockName}Block`
21
-
attributes {
22
-
wpClasses: className
23
-
}
24
-
fields: blockSlideshow {
25
-
# blockSlideshow is the ACF field group name
26
-
slides {
27
-
...MediaImage
28
-
}
29
-
}
30
-
}
31
-
}
32
-
```
33
-
1. Import Component to the WpGutenberg.vue file for lazy loading
34
-
1. Build frontend Vue template in `/components/gutenberg`
35
-
1. See Missing Pieces for demos
14
+
1. Import Component to the WpContent.vue file for lazy loading
15
+
1. Build frontend Vue template in `/components/wp-block`
0 commit comments