Blog

  • Breadcrumbs – a Gutenberg Recipe

    Breadcrumbs – a Gutenberg Recipe

    Let’s look at how you can use Gutenberg and Full Site Editing to create Breadcrumbs for your WordPress site.

    What are breadcrumbs?

    I am going to leave it up to AI to answer this question:

    Breadcrumbs, in the context of web development and user interface design, are a navigation aid that helps users understand their current location within a website or application hierarchy. They are typically displayed as a horizontal trail of links, usually at the top of a page or just below the main navigation menu.

    The term “breadcrumbs” is derived from the fairy tale “Hansel and Gretel” by the Brothers Grimm, where the characters leave a trail of breadcrumbs to find their way back home. Similarly, digital breadcrumbs provide a trail of links that users can follow to retrace their steps or navigate to higher-level pages.

    ChatGPT

    The rest of this post was written by humans, I can assure you!

    The Recipe

    In this example, we are not looking to add Breadcrumbs universally to all pages, but we will do so for a single template. Specifically, we will add Breadcrumbs to the Single post template.

    You can replicate the steps shown below to achieve the same results for another template.

    Ingredients

    1. WordPress site with Gutenberg and Full Site Editing
    2. The Icon Block by Nick Diego

    Instructions

    Head over to the Site Editor, which is located in the WordPress Admin’s Sidebar Menu under Appearances:

    Click on Templates:

    Now, you need to click on the template responsible for the current post type. In our case, it is called Single:

    Having clicked on Single, you need to then either click on the center of the page or this icon:

    And then click on Post Title, then the button with the three dots at the end and then on Insert before.

    Now comes the meaty 🥩 part. Type / and then type row. You will get to select the Row block:

    Click the + button on the Row block, and add an Icon block from the already installed Icon Block mentioned in “Things you need”:

    Now, click on Icon Library and select the Home icon:

    Then add a link to the Home icon by clicking on the Link button and adding the / link to it:

    Next, add a Chevron Right icon by adding the Icon block once again.

    Then add the Categories block, followed by another Chevron Right as shown above:

    Next, add a Post Title block, similar to the Categories block.

    After you are done with all this, style as appropriate and then add a Separator below the Row block if desired.

    Video

    Here’s a short video detailing the steps above:

    The Code

    If you do not want to follow the steps detailed in the text or video but want to get it straight to your site, copy and paste the following code in your site editor at the place you want it to be:

    <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"wordpress-home","iconColor":"secondary","iconColorValue":"#0099ff","linkUrl":"/","width":"24px"} -->
<div class="wp-block-outermost-icon-block"><a class="icon-container has-icon-color has-secondary-color" href="/" style="color:#0099ff;width:24px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4L4 7.9V20h16V7.9L12 4zm6.5 14.5H14V13h-4v5.5H5.5V8.8L12 5.7l6.5 3.1v9.7z"></path></svg></a></div>
<!-- /wp:outermost/icon-block -->

<!-- wp:outermost/icon-block {"iconName":"wordpress-chevronRight","customIconColor":"#7e7e7e","iconColorValue":"#7e7e7e","width":"24px"} -->
<div class="wp-block-outermost-icon-block"><div class="icon-container has-icon-color" style="color:#7e7e7e;width:24px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->

<!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|secondary"}}}},"textColor":"secondary","className":"text-decoration-none","fontSize":"small"} /-->

<!-- wp:outermost/icon-block {"iconName":"wordpress-chevronRight","customIconColor":"#7e7e7e","iconColorValue":"#7e7e7e","width":"24px"} -->
<div class="wp-block-outermost-icon-block"><div class="icon-container has-icon-color" style="color:#7e7e7e;width:24px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->

<!-- wp:post-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"color":{"text":"#4a4949"}},"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#a8a8a8"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#a8a8a8;color:#a8a8a8"/>
<!-- /wp:separator -->

    TL;DR

    This post detailed how we can add simple breadcrumbs to our site via the Gutenberg Editor using core blocks and one externally installed block.

    Hope you enjoyed this post, and stay tuned for more.

  • Hello from Insytful

    Hello from Insytful

    Hello, and welcome to Insytful!

    We are a web and product development agency dedicated to help bring your online presence to the next level. Whether you need a website built from scratch or an app to solve a specific problem, we have the skills and expertise to make it happen.

    We have deep experience with CMSs, Headless Frontends, and eCommerce platforms.

    We understand that every business is unique, so we take the time to understand your specific needs and goals. Using the latest web technologies, we craft custom solutions that are tailored to your business to help you succeed more.

    Some of our past work.

    As part of our past engagements, we have built custom WordPress themes from scratch, developed multiple Gutenberg blocks, and created delightful headless experiences for our clients.

    Our pièce de résistance was working with a startup to help the founding team build a successful product using React Hooks, AWS stack, and Apollo GraphQL.

    Tech we specialize in

    The following are some of the technologies we have specialized in over the years:

    We do not shy away from learning a new framework or language when needed. On that note, we have mastered Gatsby, Next.js, and Remix to build powerful web applications for our partners.

    So if you want to take your online presence to the next level or create the next app to solve a specific need, we’d love to hear from you. Feel free to contact us at anytime to discuss your project and how we can help.

    Thanks for stopping by, and we look forward to working with you!

    Sincerely,
    The Insytful Team

  • A Case for the WP REST API

    A Case for the WP REST API

    Most developers have used an API (and more specifically the REST API) in some point in their careers; and a WordPress developer is no exception. We may have used the WordPress REST API for fetching data from a remote WordPress instance, or update some record somewhere with authentication or to create a Headless WordPress site. Perhaps we simply used it within a Gutenberg block.

    wp rest api

    GraphQL is an alternative to the REST API, and also a great technology. However, using GraphQL with WordPress requires the installation of a new plugin. If you are using GraphQL to merely solve the under-fetching/over-fetching problem for basic queries, you might want to continue reading this post.

    WP REST API 101

    The easiest way to play with the WP REST API is to visit any WordPress site’s URL followed by /wp-json. I’d recommend a REST client like Postman or Insomnia. In case you do not download these apps, you can visit the URL on your browser. If you go this route, however, I’d recommend an extension to view JSON data. You can find them on your Browser’s extensions library. Taking this site as example, let’s say you visit the following URL:

    https://insytful.co/wp-json

    You will get a huge chunk of JSON data. There will be multiple namespaces. I’d recommend you go explore the the WP namespace first:

    https://insytful.co/wp-json/wp/v2

    You will get the endpoints inside of the core WP namespace. Let’s look at the latests posts:

    https://insytful.co/wp-json/wp/v2/posts

    Solve over-fetching using _fields

    If you followed the last link, you would have seen a bunch of fields for the latest 10 posts. Let’s say you only need the title, and excerpt. Here comes the key part: you use the _fields URL parameter to limit the fields to just what you want:

    https://insytful.co/wp-json/wp/v2/posts?_fields=title,excerpt

    The above will only return the posts’ titles and excerpts. This would reduce the load time significantly since it’s much less data as compared to retrieving the entire dataset from the posts endpoint.

    Get the full categories, tags, and featured image

    Another “limitation” with the REST API is that you cannot see the name or slug of the attached category or tag for a post if you go to the /posts endpoint.

    The solution to this is to pass the _embed param to the URL.

    https://insytful.co/wp-json/wp/v2/posts?_embed

    The above will give you the terms (categories, tags) used for the posts. Additionally, you will also get the featured image details for the give post. This will save you from making multiple calls to the remote endpoint, thus saving time and money.

    Although this is not a full-on nested call like you can do with GraphQL, this is good enough for a lot of use cases.

    A note on using _fields and _embed

    As you try to use these tips, you would be tempted to use both the _fields and _embeds params in one call. You will notice that it is not possible to do so.

    When I tried the above scenario, it returned empty results. So, I followed this solution StackOverflow to get over this roadblock.

    TLDR;

    Perhaps you are discouraged from using the WP REST API because it fetches fields you do not need. Perhaps it is because the results do not contain the featured image URL or the category/tag name and slug. If so, then you might want to consider sticking to the REST API before looking elsewhere.

  • Add Multiple Products to WooCommerce Cart using the fetch API

    Add Multiple Products to WooCommerce Cart using the fetch API

    We were working on a WooCommerce project that required us to add multiple products to the cart from a single click of a button.

    (more…)