Writing

content/blog/2024-08-29-how-to-remove-html-tags-from-rest-api-title-and-content-in-wordpress.md

@@ -0,0 +1,98 @@
+---
+title: "How to remove HTML tags from the REST API title and content in WordPress"
+slug: "how-to-remove-html-tags-from-the-rest-api-title-and-content-in-wordpress"
+date: 2024-09-05T23:14:11+05:30
+# image : "https://ia800508.us.archive.org/25/items/blog-images_202309/White%20Blue%20Illustration%20Business%20Blog%20Banner.png"
+# author
+author : ["Ronak Vanpariya"]
+# categories
+categories: ["solutions", "Technology"]
+tags: ["REST API", "WordPress"]
+# meta description
+description: "In this article I have shared the solution for the removing HTML tags from the WordPress REST API response"
+keywords: ["WordPress REST API HTML tags", "PHP REST API HTML entity decode"]
+# save as draft
+draft: false  
+---
+
+Hello everyone, :wave:
+
+## How to remove HTML tags from REST API title in WordPress
+
+WordPress supports HTML in fields that developers wouldn't typically expect HTML in (e.g. post title). When you use the REST API to retrieve posts, the response body will include HTML, including HTML tags. This can be a problem if you are using the REST API to serve data to a non-HTML client, such as a mobile app or a JavaScript library.
+
+To remove HTML tags from the REST API title, you can use the following code:
+
+```php
+class Customise_WordPress {
+
+  function __construct($name) {
+  // Remove the REST API HTML tags.
+    $post_type = "post";
+    add_filter( 'rest_prepare_'. $post_type, array( $this, 'decode_rest_api_title' ), 20, 3 );
+  }
+
+  /**
+   * Decode HTML tags from the website title.
+   *
+   * @param string $response Actual response.
+   * @param Object    $request Actual request.
+   * @param Object    $post actual Post object.
+   *
+   * @return $response return text with decoded entirties.
+   */
+  public function decode_rest_api_title( $response, $post, $request ) {
+    if ( isset( $post ) ) {
+      $decoded_title = wp_strip_all_tags( $response->data['title']['rendered'] );
+      $decoded_content = wp_strip_all_tags( $response->data['content']['rendered'] );
+      $response->data['title']['rendered'] = $decoded_title;
+      $response->data['content']['rendered'] = $decoded_content;
+    }
+    return $response;
+  }
+}
+```
+
+To use this code, simply copy and paste it into your theme's functions.php file. Then, create a new instance of the `Customise_WordPress` class. For example:
+
+```php
+$customise_wordpress = new Customise_WordPress();
+```
+
+This will remove HTML tags from the REST API title for all posts.
+
+You can also modify the code to only remove HTML tags from the REST API title for specific post types. For example, to only remove HTML tags from the REST API title for posts of the `post` type, you would change the following line:
+
+```php
+$post_type = "post";
+```
+
+to:
+
+```php
+$post_type = array('post');
+```
+
+You can also add additional filters to the `add_filter()` call to remove HTML tags from other fields in the REST API response. For example, to remove HTML tags from the REST API content, you would add the following filter:
+
+```php
+add_filter( 'rest_prepare_post_content', array( $this, 'decode_rest_api_content' ), 20, 3 );
+```
+
+The `decode_rest_api_content()` function would be similar to the `decode_rest_api_title()` function, but it would decode the `content` field instead of the `title` field.
+
+## Benefits of removing HTML tags from the REST API title
+
+There are several benefits to removing HTML tags from the REST API title:
+
+* It makes the REST API response more consistent and easier to parse.
+* It reduces the risk of XSS attacks.
+* It improves the performance of the REST API, as HTML tags need to be decoded before they can be used.
+
+If you are using the REST API to serve data to a non-HTML client, I recommend that you remove HTML tags from the REST API title and other fields in the REST API response.
+
+Thanks For Reading 🙏
+
+> This articles is generated Manually from generative AI, But carefully reviewed by Me personally. Please let me know if you found any issues, in comment section below.
+
+{{< footer-donation >}}

content/blog/fetch-instagram-details.md

@@ -1,89 +1,70 @@
 ---
 title: "Fetch Instagram Details"
-date: 2020-05-10T20:16:20+05:30
+date: 2024-09-09T10:00:00+05:30
 draft: false
 image : "https://user-images.githubusercontent.com/26689210/81502620-9f490c80-92fc-11ea-8775-43e099db29a8.png"
 
 # author
 author : ["Ronak Vanpariya"]
 # categories
 categories: ["Technology"]
-tags: ["Instagram", "Wordpress"]
+tags: ["Instagram", "API", "Wordpress"]
 # meta description
-description: "How to fetch instagram details from API"
+description: "How to fetch Instagram details using the latest API requirements."
 
 ---
 
-> This guide is deprecated you now need to login or need Instagram token use Instagram API
+> This guide has been updated: Instagram now requires an access token to fetch user data. This guide covers how to authenticate and retrieve user details using the Instagram Graph API.
 
-## Get-instagram-details
+## Get-Instagram-Details (Updated)
 
+Instagram has deprecated its public API, and now you need an **Instagram Access Token** to fetch user data. To retrieve details like username, profile picture, bio, and follower count, you must authenticate your app and get the appropriate permissions using the Instagram Graph API.
 
-#### You can find the live demo from this url https://vanpariyar.github.io/get-instagram-details/
+### Steps to Get Instagram Details
 
-- In this demo, I have implemented the Instagram Public GraphQL API so no worry to get Instagram Token.
-- (Note):- This API works only For the Public Details.
-- I have used simple structure, So anyone can able to make use of their own site.
+1. **Set up your Instagram Developer account:**
+   - Go to the [Instagram for Developers](https://developers.facebook.com/docs/instagram-api) page.
+   - Create an app and get the **App ID** and **App Secret**.
 
-## This API i have used in this Demo
-`https://www.instagram.com/"+instaUsername+"?__a=1`
-- we can use simple get request to the above API shown below:-
-______________________________________________________________
+2. **Get User Access Token:**
+   - After setting up the app, use OAuth to authenticate users and retrieve the access token. You'll need the **user_profile** and **user_media** permissions to access user details.
+   - You can refer to [Facebook's OAuth documentation](https://developers.facebook.com/docs/facebook-login/) for details on the authentication flow.
 
-```javascript
-$('.instagram-get').on( 'click', function(event) {
-    if(instaUsername = $('#instagram-username').val()){
-        $.ajax({
-            url:"https://www.instagram.com/"+instaUsername+"?__a=1",
-            type:'get',
-            success:function(response){
-                console.log(response);
-                $(".profile-pic").attr('src',response.graphql.user.profile_pic_url_hd);
-                $(".name").html(response.graphql.user.full_name);
-                $(".biography").html(response.graphql.user.biography);
-                $(".username").html(response.graphql.user.username);
-                $(".number-of-posts").html(response.graphql.user.edge_owner_to_timeline_media.count);
-                $(".followers").html((response.graphql.user.edge_followed_by.count));
-                $(".following").html((response.graphql.user.edge_follow.count));
-                $('.insta-details').show('slow');
-            }
-
-        });    
-
-    }
-});    
-```
-_____________________________________________________________________________________________
--You can see the response from the Ajax in your browser's console.
-- I have used the Jquery Ajax request To get The data and For the view part, I have used Bootstrap.
-- You can use anything to get data like if you are using the `fetch` method then you can use the below code.
+3. **Make API requests:**
+   - Once authenticated, you can use the following endpoint to get the user's data:
+
+   `https://graph.instagram.com/me?fields=id,username,media_count,account_type&access_token={access-token}`
+
+   Here's an example of how you can use **fetch** to get the data:
 
 ```javascript
 $('.instagram-get').on( 'click', function(event) {
-    if(instaUsername = $('#instagram-username').val()){
-        fetch("https://www.instagram.com/"+instaUsername+"?__a=1").then(function(response) {
-                console.log(response);
-                $(".profile-pic").attr('src',response.graphql.user.profile_pic_url_hd);
-                $(".name").html(response.graphql.user.full_name);
-                $(".biography").html(response.graphql.user.biography);
-                $(".username").html(response.graphql.user.username);
-                $(".number-of-posts").html(response.graphql.user.edge_owner_to_timeline_media.count);
-                $(".followers").html((response.graphql.user.edge_followed_by.count));
-                $(".following").html((response.graphql.user.edge_follow.count));
-                $('.insta-details').show('slow');
-        });
-    }
-});    
+    let accessToken = 'YOUR_ACCESS_TOKEN';  // Replace with a valid access token
+    fetch(`https://graph.instagram.com/me?fields=id,username,media_count,account_type&access_token=${accessToken}`)
+    .then(response => response.json())
+    .then(data => {
+        console.log(data);
+        $(".username").html(data.username);
+        $(".media-count").html(data.media_count);
+        $(".account-type").html(data.account_type);
+        $('.insta-details').show('slow');
+    })
+    .catch(error => console.log('Error fetching Instagram details:', error));
+});
 ```
-______________________________________________________________________________________________________
-
->#### You can find the live demo from this url https://vanpariyar.github.io/get-instagram-details/
 
+### Important Notes:
+- The new Instagram API only supports user data that you have permission to access (your account or authenticated users).
+- You can also fetch media-related data such as recent posts using the media endpoints:
+
+  `https://graph.instagram.com/me/media?fields=id,caption,media_url&access_token={access-token}`
 
+### Demo URL (Deprecated)
+The demo that previously used the public GraphQL API no longer works, as Instagram now requires OAuth authentication and access tokens. You can check the [Instagram API documentation](https://developers.facebook.com/docs/instagram-api/) for more details on building your app.
 
-![Fetch The Deatails Of instagram](https://user-images.githubusercontent.com/26689210/70326031-832ad600-1859-11ea-91a5-e00e16563baa.png)
+![Fetch Instagram Details](https://user-images.githubusercontent.com/26689210/70326031-832ad600-1859-11ea-91a5-e00e16563baa.png)
 
-#### if Are You still reading this, :thumbsup: thank you so very much for your time :hourglass:.
--:hand: if you are getting any errors you can make issue on this repo with proper details .
+#### If you are still reading this, :thumbsup: thank you so very much for your time :hourglass:.
+:hand: If you are getting any errors, you can create an issue on this repo with proper details.
 
-{{< footer-donation >}}
+{{< footer-donation >}}

content/blog/how-to-start-with-gutenberg-editor-custom-block-development.md

@@ -1,74 +1,74 @@
 ---
-title: "How to Start With Gutenberg Editor Custom Block Development"
-date: 2020-05-21T20:08:49+05:30
-image : "https://user-images.githubusercontent.com/26689210/82570312-07baa800-9b9f-11ea-97cd-f553a56709be.png"
+title: "Getting Started with Gutenberg Editor Custom Block Development"
+date: 2024-09-09T12:00:00+05:30
+image: "https://user-images.githubusercontent.com/26689210/82570312-07baa800-9b9f-11ea-97cd-f553a56709be.png"
 # author
-author : ["Ronak Vanpariya"]
+author: ["Ronak Vanpariya"]
 # categories
 categories: ["Technology"]
-tags: ["Gutenberg", "Wordpress","JavaScript"]
+tags: ["Gutenberg", "WordPress", "JavaScript"]
 # meta description
-description: "How to Start With Gutenberg Editor Custom Block Development very easy and straight forward guide."
+description: "A beginner-friendly guide to developing custom blocks in the WordPress Gutenberg Editor."
 # save as draft
 draft: false
 ---
 
-## How to start with Gutenberg Editor custom block development.
+## How to Start with Gutenberg Editor Custom Block Development
 
-Start learning Gutenberg very easily. See step by step Guide.
+Developing custom blocks for the Gutenberg editor can be simple and rewarding. This guide will walk you through the essentials and provide key resources to get started with WordPress block development.
 
-How to start with Gutenberg editor development. What should I learn?
+### Where to Begin?
 
-### For Reference:
+The best place to start is by diving into the [WordPress Block Developer Handbook](https://developer.wordpress.org/block-editor/). It covers everything from creating simple blocks to advanced customizations, and is the go-to resource once you’ve got the basics of JavaScript under your belt.
 
-So, My simple first answer is you should start the development using the new block by going [WordPress Block developer handbook.](https://developer.wordpress.org/block-editor/)
+### JavaScript Options for Gutenberg Block Development
 
-Believe me or not this is the best resource in the world after you know some basics of Javascript syntax.
+When it comes to developing Gutenberg blocks, you have two primary options:
 
-### Type of JS to develop Gutenberg Block
+1. **Vanilla JavaScript**
+2. **Modern ESNext (ES6+) standards**
 
- 1. Simple Javascript.
+While both can work, I recommend using **ESNext standards** to leverage the latest JavaScript features and take advantage of modern workflows.
 
- 2. ES next standards.
+A great tool to get you started with Gutenberg block development is [Create Guten Block](https://github.com/ahmadawais/create-guten-block), an open-source NPM package. This package comes pre-configured with **Webpack** and **ESLint**, making setup a breeze. It’s perfect for developers looking for a hassle-free environment to start building custom blocks.
 
-My personal choice is [create guten block](https://github.com/ahmadawais/create-guten-block). this is an opensource NPM package for development Gutenberg block.
+### React and Gutenberg: The Relationship
 
-This package has all setup of [webpack](https://webpack.js.org/) and [eslint](https://eslint.org/) and one of the best parts is the setup process goes easy.
+Gutenberg is built on top of **React**, so if you have experience with React, you’re already a step ahead. Knowing React’s component-based architecture will make Gutenberg block development much easier.
 
-Go with ES next standards.
+#### Can You Use React Hooks in Gutenberg?
 
-## Relationship with React and Gutenberg Editor
+Yes! Since Gutenberg uses React under the hood, you can utilize hooks such as:
 
-Gutenberg is developed on the top of [React](https://reactjs.org/).
+1. **useState()**
+2. **useRef()**
 
-### Can I use Hooks like react
+Hooks allow you to manage state and references in your blocks just like you would in a React application. You can import them from `wp.element`.
 
-yes, you can use it. You can pull out from wp.element.
+If you’re new to hooks, check out the official [React Hooks Documentation](https://reactjs.org/docs/hooks-intro.html) to get started.
 
- 1. useState()
+### My Development Experience
 
- 2. useRef()
+#### Simple JavaScript Blocks
 
- 3. etc..
+I’ve built a few simple Gutenberg blocks using vanilla JavaScript. You can check out a demo on my GitHub repository here:  
+[https://github.com/vanpariyar/gutenberg-blocks-plugin](https://github.com/vanpariyar/gutenberg-blocks-plugin)
 
-If you don't know React hooks Go here: [https://reactjs.org/docs/hooks-intro.html](https://reactjs.org/docs/hooks-intro.html)
+#### ESNext and Modern Development
 
-## My Experience
+For more complex projects, I prefer using **ESNext**. One of the plugins I developed using this approach is available on GitHub:  
+[**vanpariyar/gutenberg-instagram-post-grid**](https://github.com/vanpariyar/gutenberg-instagram-post-grid)
 
-### Development For simple JS
+You can also check out this plugin on WordPress’s plugin repository:  
+[**Social Gallery Block**](https://wordpress.org/plugins/social-gallery-block)
 
-This is my simple Demo you can check it out:- [https://github.com/vanpariyar/gutenberg-blocks-plugin](https://github.com/vanpariyar/gutenberg-blocks-plugin)
+### Additional Demos
 
-### Development For ES Next
+I’ve also created other demos showcasing different features of Gutenberg block development. One such demo involves fetching random quotes and saving them in the WordPress database:  
+[**vanpariyar/gutenberg-demo-esnext**](https://github.com/vanpariyar/gutenberg-demo-esnext)
 
-fortunately, I have developed one Gutenberg WordPress plugin.
-[**vanpariyar/gutenberg-instagram-post-grid**
-*Easy Doker Setup snap install docker pip install docker-compose docker-compose up goto: http://localhost:8080/ Enter…*github.com](https://github.com/vanpariyar/gutenberg-instagram-post-grid)
+### Final Thoughts
 
-Check out this on Wordpress Listing: [https://wordpress.org/plugins/social-gallery-block](https://wordpress.org/plugins/social-gallery-block)
+If you’re just starting out with Gutenberg block development, it may feel overwhelming at first. But with tools like **Create Guten Block** and resources like the **WordPress Developer Handbook**, you’ll be able to develop custom blocks quickly and efficiently. Keep experimenting and don’t hesitate to dive into the React ecosystem—it’ll pay off in the long run.
 
-### Other Demos
-[**vanpariyar/gutenberg-demo-esnext**
-*To get random Quote on Clicks. and saves in database. - vanpariyar/gutenberg-demo-esnext*github.com](https://github.com/vanpariyar/gutenberg-demo-esnext)
-
-{{< footer-donation >}}
+{{< footer-donation >}}

themes/hugo-theme-stack/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,7 +4,7 @@ body:
   - type: markdown
     attributes:
       value: |
-        Thanks for taking the time to fill out this bug report! Please provide as much information as possible and make sure you have checked the [documentation](https://stack.jimmycai.com/).
+        Thanks for taking the time to fill out this bug report! Please provide as much information as possible and make sure you have checked the [documentation](https://stack.jimmycai.com/guide/).
   - type: textarea
     id: what-happened
     attributes:

themes/hugo-theme-stack/assets/scss/partials/article.scss

@@ -131,6 +131,7 @@
 .article-tags {
     display: flex;
     gap: 10px;
+    flex-wrap: wrap;
 
     a {
         color: var(--accent-color-text);