https://github.com/wp-graphql/graphql-gutenblock-example

Example Gutenberg Block using WPGraphQL to populate the data
https://github.com/wp-graphql/graphql-gutenblock-example

graphql gutenberg javascript php react wordpress wordpress-plugin wpgraphql

Last synced: 2 days ago
JSON representation

Example Gutenberg Block using WPGraphQL to populate the data

• Host: GitHub
• URL: https://github.com/wp-graphql/graphql-gutenblock-example
• Owner: wp-graphql
• Created: 2018-06-29T14:30:58.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-29T17:55:17.000Z (almost 7 years ago)
• Last Synced: 2025-06-03T02:57:28.211Z (21 days ago)
• Topics: graphql, gutenberg, javascript, php, react, wordpress, wordpress-plugin, wpgraphql
• Language: JavaScript
• Homepage: https://wpgraphql.com
• Size: 3.09 MB
• Stars: 19
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-gutenberg - WPGraphQL Gutenberg Block

README

        
# GraphQL Gutenblock Example

This is an example showing how to use GraphQL (via the WPGraphQL plugin) to populate data in a

Gutenberg block. 

![](img/5-backend-use-query-fragment.png)

# Create Guten Block

This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).

Below you will find some information on how to run scripts.

>You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block).

## 👉  `npm start`

- Use to compile and run the block in development mode.

- Watches for any changes and reports back any errors in your code.

## 👉  `npm run build`

- Use to build production code for your block inside `dist` folder.

- Runs once and reports back the gzip file sizes of the produced code.

## 👉  `npm run eject`

- Use to eject your plugin out of `create-guten-block`.

- Provides all the configurations so you can customize the project as you want.

- It's a one-way street, `eject` and you have to maintain everything yourself.

- You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own.

---

###### Feel free to tweet and say 👋 at me [@MrAhmadAwais](https://twitter.com/mrahmadawais/)

[![npm](https://img.shields.io/npm/v/create-guten-block.svg?style=flat-square)](https://www.npmjs.com/package/create-guten-block) [![npm](https://img.shields.io/npm/dt/create-guten-block.svg?style=flat-square&label=downloads)](https://www.npmjs.com/package/create-guten-block)  [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/ahmadawais/create-guten-block) [![Tweet for help](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Tweet%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/) [![GitHub stars](https://img.shields.io/github/stars/ahmadawais/create-guten-block.svg?style=social&label=Stars)](https://github.com/ahmadawais/create-guten-block/stargazers) [![GitHub followers](https://img.shields.io/github/followers/ahmadawais.svg?style=social&label=Follow)](https://github.com/ahmadawais?tab=followers)