DEV Community

Cover image for Gutenberg Block to retrieve GitHub public repositories (and enhance a portfolio)
Sarah Siqueira
Sarah Siqueira

Posted on • Edited on

4

Gutenberg Block to retrieve GitHub public repositories (and enhance a portfolio)

The inspiration for this block came from a feature available in my portfolio built with React. This feature displays my public repositories in GitHub. More details and the source code can be seen in this article.

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,
    } 
)
Enter fullscreen mode Exit fullscreen mode

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'),
                ]
        );
    }
Enter fullscreen mode Exit fullscreen mode

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(); ?>

Enter fullscreen mode Exit fullscreen mode

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();

}

Enter fullscreen mode Exit fullscreen mode

The complete code is available on the GitHub repository here.

Using Gihut API

About the GitHub API, you can easily display a list with public repositories or other information you want of any GitHub user using the GitHub API.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay