Tag: gutenberg

  • DIY Breadcrumbs in WordPress with Full Site Editing

    DIY Breadcrumbs in WordPress with Full Site Editing

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

    You would need to install the latest version of WordPress and a plugin that has FSE (Full Site Editing) support.

    You would also require the The Icon Block by Nick Diego.

    Here’s the code. You can copy it and paste it in your Single Post template.

    Once copied and saved, the frontend of the template would look something like this:

    Enjoy!

  • WP REST API can still cut it

    WP REST API can still cut it

    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.

    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://muhammad.dev/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://muhammad.dev/wp-json/wp/v2

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

    https://muhammad.dev/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://muhammad.dev/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://muhammad.dev/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.

  • New to WordPress Development? Here’s a 2025 Guide!

    New to WordPress Development? Here’s a 2025 Guide!

    Precursor

    Let me start with a personal take.

    I started dabbling with WordPress 10 years ago in 2015.

    In that period, there have been changes several changes. Still, there have also been things that have stayed the same.

    I’ve learned an important trick; to develop foresight, you need to practice hindsight.

    Jane McGonigal

    Let’s focus on the fundamentals, first – the things that stood the test of time and will do in future.

    We can use WordPress for many purposes. It can serve as a tool builder, like a resumé maker. It can also be a platform or even a billboard. Nevertheless, the fundamental reason we use WordPress is for content.

    When we say content, it can mean many things – including Instagram reels or TikToks. However, with WP, content primarily means the written word. That’s what I believe the Word in WordPress stands for.

    Although, we can upload and embed videos and images, the power of words is what makes WordPress, well, powerful.

    So, it is a Content Management System as its core.

    The Foundations

    Now that we know what WordPress is (a CMS), let’s dive into what you need to learn to become a developer in the short term.

    By near term, I mean a quarter of a year. Let’s say you start now; you could hopefully become a Junior WordPress Developer by June 2025.

    These are the tools you need to master to get going:

    1. An understanding of the WordPress basics. What is a post and how does it differ from a page? What is a post type? What is a taxonomy? How do I change a theme or install a plugin? And so on.

      There is an endless list of questions you may have as you follow through. I recommend you befriend your friendliest AI tool to ask questions and get clarity.
    2. A Development Environment. Avoid working on projects without a dev environment if you can. Do not work on projects with just a single production site where all the work happens. I also recommend having a local WP environment. This way, all your development work is on your computer. You can do this while you are working. LocalWP and Studio by WP.com are both great for beginners.

      Think of it this way. Would you be doing carpentry at the location of your customer or at your work shed? I would do it at my work shed or a home office shed (remote work FTW). So, let’s use a local development environment.
    3. Basic Web Development. I would say you should possess the basics of HTML, CSS, and JavaScript. I am not a purist, so w3schools.com is a good resource for learning that. If you happen to be a purist, head over to mdn!
    4. Some backend knowledge. It is also good to know some PHP and MySQL. Or even the basic syntax and ideas are sufficient.

      Again, ChatGPT is your friend. Pester it with your questions and test yourself against it.

    Intermediate

    Now, we are getting to where most developers should get to. However, a lot of them will take a false path. Others will stop with the foundations. For instance, they will still use the Classic Editor. They will rely solely on a Page Builder. They will also stick to store bought themes and plugins without considering any customizations.

    WordPress Hooks (filters and actions) 🪝 are an important part of advancing as a WordPress developer. It’s crucial we learn it right – and practice it.

    Gutenberg was merged to core in 2018 and there has been a mixed reaction from the community. I believe it is about time (albeit a bit too late) to embrace the block editor with both arms.

    There are so many terms when it comes to the block editor. But keeping abreast of the nuances pays off handsomely in the long run.

    With that said, let me throw some words:

    1. Blocks – they can be core or custom
    2. Block Patterns
    3. Block Filters
    4. Block Styles
    5. Block Variations
    6. Block Plugins
    7. Block Themes and Full Site Editing
    8. Block Templates
    9. Reusable Blocks
    10. Dynamic Blocks – as opposed to Static Blocks

    I do not want to explain here what each means. Nor do I want to be considered an expert in critiquing the decisions that went into its nomenclature. You could learn a ton about these from fullsiteediting.com or through Google / ChatGPT.

    You can also learn from wpdevelopment.courses. Please note, it is a paid resource and I am a student of the course. The course helped me a ton to level up in block theme development. And no, I am not being paid to say this.

    ES2015+ or ES6 is also a decade old now. And React is 12 years old now; almost a teenager. The reason I mention it is so that we are aware its about time we learned these. So along with learning Gutenberg, it’s essential to also learn modern JS.

    Of course, here comes the other essentials like security best practices. Escaping, Sanitizing, Validating – the whole nine yards.

    An excellent resource is WPVIP’s course on security.

    It could take a year or more to get comfortable at this.

    Advanced

    You are in the big boy league now.

    It can take a several years to become great at WordPress.

    Courses from here are great to get good at some advanced WP concepts.

    Also, feel free to go through these best practices.

    The best way to become great, in my opinion, is to go through the works of the best people in the industry.

    For example, reading through WP Core or Gutenberg Core’s code on GitHub, perhaps reading through a major plugin’s code like Google Site Kit, or by contributing to core and other open source software yourself.

    An obvious way to get advanced is by working on large site rebuilds or plugins that touch many sites and has great impact.

    Closing Thoughts

    Do not forget about the community.

    You would be doing yourself a great favor by participating in dialog with the WordPress community, over on Twitter or at local events such as Meetups and WordCamps. A friend I made at a meetup 10 years ago is my almost like a mentor now!

    Of course, when you get to the advanced level, it’s good to contribute back to WordPress in the form of code, events, teaching, encouraging, documenting, organizing, volunteering, and so on.

    So, how do I get started?

    It depends on what you want to achieve with WordPres.

    If I were to give you one call to action, it would be that you register as a member of WordPress.org – you will hopefully look back and thank yourself that you did so.

    The more important CTA, however, is to head over learn.wordpress.org and choose your path!

    Closing Thoughts

    I initially set out to write about the WordPress ecosystem—the so-called bubble where outsiders often dismiss WordPress developers as “not real developers.” Instead of merely highlighting a problem, I decided to offer a solution: a practical roadmap to becoming a proficient WordPress developer. I hope this approach provides real value and inspires you to embrace the journey ahead.

    Thank you for reading this far.

  • Create a “mini-app” using Core Gutenberg Blocks and some JavaScript

    Create a “mini-app” using Core Gutenberg Blocks and some JavaScript

    While it’s tempting to reach out to build a custom block every time you need custom functionality, it may not always be the best decision. Before committing to developing a custom block, it’s essential to evaluate the needs of your website.

    Custom blocks can offer flexibility and can provide a precise set of features tailored to your content. They can integrate with your site’s unique design system and provide custom experiences that generic blocks cannot. However, developing custom blocks requires time, expertise, and resources.

    You can use the core blocks alongside Gutenberg filters to customize its looks or behavior. You can also use block variations to create a slightly different way of utilizing the same core blocks. Or, if you want to change the look of the core blocks, you could employ block styles to achieve it.

    Having said all that, what if your requirements differ from the above? What if you want the flexibility of creating using the block editor, utilizing any color and style you want? But you also need to make that bit of HTML you built behave precisely how you want.

    The following is my take on using core blocks with some custom JS sprinkled on them to create a mini-app.

    Demo

    This is a Stopwatch mini-app that uses some blocks and JavaScript. You can play around with its functionality:

    00:00:00:000

    Now, let’s explore how I built this.

    The Blocks Used

    In this website, I use the Twenty Twenty Four theme.

    The above demo uses the following blocks:

    1. Group
    2. Stack (a variation of the Group block)
    3. The Icon Block by Nick Diego (not compulsory but used for aesthetics)
    4. Heading
    5. Row (a variation of the Group block)
    6. Buttons and the Button block

    The code for it looks like this (you may copy it to your WordPress site as you wish):

    https://gist.github.com/m-muhsin/d20b21c3765e5b913cd39b05a54b89b4

    You might notice I have used a few class names. This is so that I can use JavaScript to select those elements.

    After adding the above HTML and Block markup into this post, I wanted to add some JS.

    So, I used the Custom HTML block and added the following JS code to it within <script> tags.

    https://gist.github.com/m-muhsin/a685d5bed947020407dc802ecc0ffe4c

    That’s about it really!

    Some thoughts

    This idea that I presented is familiar in the WordPress world. We have used HTML generated using the classic editor coupled with enqueued JavaScript to power up custom experiences for ages.

    Also, this idea is excellent for when we need to add Google Analytics scripts, for example. We can have buttons with a certain class name and use a global script to target all those buttons to then add tracking scripts to them.

    Hope this small demo and explanation helps anyone out there!

  • Hello Sketch Block

    Hello Sketch Block

    Hello folks 👋

    This is me trying the new Sketch Block from the Gutenberg Block Experiments project.

    (more…)
  • Thinking in WordPress

    Thinking in WordPress

    WordPress is a handy blogging tool, a useful Content Management System or a capable web application framework. Whatever way you look at it, WordPress helps you solve problems in creative ways. In this article, I want to talk about how I approach projects and my methodology for problem-solving with WordPress. This is not an exhaustive list and one article wouldn’t do justice to the vastness of WordPress. I will try to add whatever pointers stand out among the decisions you would probably have to take.

    (more…)