Gutenberg Block to retrieve GitHub public repositories (and enhance a portfolio)
Tags: gutenberg, wordpress, blocks, gutenbergblock
Published: 2023-04-25 20:11:51

The inspiration for this block came from a feature available in my portfolio built with React. This feature [displays my public repositories in GitHub](https://sarahjobs.com/code-samples). More details and the [source code can be seen in this article](https://dev.to/sarahcssiqueira/enhance-your-portfolio-show-your-github-repositories-as-posts-in-a-blog-using-github-api-459c).

The present Gutenberg block **does basically the same thing**, but instead of React and Javascript, **some code was rewritten in PHP**.

## Dynamic Blocks

Creating a Gutenberg Block whose purpose is mainly styling and HTML generation can be done almost entirely with Javascript. But for other features like displaying posts, doing remote API calls, etc, it's a **better approach to render the block using PHP** and not JavaScript. 

To achieve that, in the index.php file of our block, we added the **argument render_callback** to the **register_block_type function**. That will handle the output of the block, superseding the javascript save/frontend function in the /src/index.js file.

On time, on the **/src/index.js** file we need to disable the save function.


```
index.js

registerBlockType( 
	metadata, {
		edit: Edit,
		save: () => null,
	} 
)
```

Then, on index.php:

```
//index.php

   function block_register()
    {
        register_block_type(
            __DIR__,
            [
                'attributes'      => [
                    'githubuser' => [
                        'type'    => 'string',
                        ],
                ],
                'render_callback' => array($this, 'render_retrieved_github_repos'),
                ]
        );
    }
```

Later, **this callback function render_retrieved_github_repos** will be responsible to render the block. In **this specific case**, the function fetches the Github API data.

```
//index.php 

 function render_retrieved_github_repos( $attributes, $content )
    {
            
        // Get the username input 
        $username = $attributes['githubuser'];
        
        $response = wp_remote_retrieve_body( 
wp_remote_get("https://api.github.com/users/" . $username . "/repos") );

        /* Decode the response */
        $repositories = json_decode($response, true);

        ob_start(); ?>

```
This callback function render_retrieved_github_repos **also display the data** fetched from the Github API.

```
//index.php

<?php foreach ( $repositories as $repo ): ?>
        
  <div class="">

    <a href="<?php echo $repo["svn_url"]?>"class=""> <?php echo $repo["name"] ?></a>

     <p class=""><?php echo $repo["description"] ?><a href="<?php $repo["svn_url"] ?>"class="">Go to repository</a></p>

     <p class=""><?php $date = strtotime($repo["created_at"])?><?php echo date('Y/M/d', $date);?></p>
                
     <p class=""><?php foreach ($repo["topics"] as $topic) {echo $topic;}?></p>

     <p class=""><?php echo $repo["stargazers_count"]?> stars</p>

     <p class=""><?php echo $repo["forks_count"]?> forks </p>

  </div>
            
 <?php endforeach; ?> 

<?php return ob_get_clean();

}

```

The complete code is available on the [GitHub repository here](https://github.com/sarahcssiqueira/wp-plugin-display-github-repos).

## Using Gihut API 

About the GitHub API, you can easily display a [list with public repositories](https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#list-repositories-for-a-user) or other information you want of any GitHub user using the GitHub API.