1. This is 1st block tutorials: Heading

This is H1 testing

This is H2 testing

This is H3 testing

This is H4 testing

This is H5 testing

This is H6 testing

2. This is 2nd block tutorials: Paragraph with Cap drop

This is the first paragraph for this tutorials website with showing the drop cap which is enlarging the first letter of a paragraph. Twenty Twenty-Four aims to be flexible. By default, it uses specific font families (like Cardo for headings and Inter for body text) and has pre-defined font sizes for each heading level. <h6> will typically be smaller than other headings. It might be bold depending on the specific “Style Variation” you choose, but it’s not universally uppercase by default.

3. This is 3rd block tutorials: List block

A. This is dot list/unorder list testing

List1
List2
List3
List4
List5

B. This is number list/order list testing

Serial 1
Serial 2
Serial 3
Serial 4
Serial 5

4. This is 4th block tutorials: Quote

Don’t take your life so lightly, you have to confront Allah SWT on the day of Qiyamah for every moment you spend on the earth.

Ali Riaz

5. This is 5th block testing: Code block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test Block</title>
    <!-- Tailwind CSS CDN for easy styling -->
    <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
    <style>
        /* Custom styles for demonstration, complementing Tailwind */
        body {
            font-family: "Inter", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 90%; /* Fluid width for responsiveness */
            width: 400px; /* Max width for desktop */
        }
        .highlight-text {
            animation: fadeAndScale .5s ease-out forwards;
        }
        @keyframes fadeAndScale {
            0% { opacity: 0.5; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
    <div class="container bg-white p-6 rounded-lg shadow-xl text-center">
        <!-- Placeholder Image -->
        <img src="[https://placehold.co/300x150/8a2be2/ffffff?text=JS+Test](https://placehold.co/300x150/8a2be2/ffffff?text=JS+Test)" alt="Placeholder for JavaScript test" class="w-full h-auto rounded-lg mb-4">

        <h2 class="text-3xl font-bold text-indigo-700 mb-4 rounded">
            Interactive JavaScript Demo
        </h2>
        <p id="dynamic-text" class="text-gray-700 text-lg mb-6 leading-relaxed rounded p-2 transition-all duration-300 ease-in-out">
            Click the button below to see some magic!
        </p>

        <button id="action-button" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
            Click Me!
        </button>

        <div class="mt-6">
            <p class="text-gray-600 text-sm">Button clicked:</p>
            <span id="click-count" class="text-2xl font-semibold text-indigo-500 rounded px-2 py-1">0</span> times
        </div>

        <div id="message-box" class="mt-4 p-3 bg-blue-100 text-blue-800 rounded-md hidden"></div>
    </div>

    <script>
        // Get references to the HTML elements by their IDs
        const dynamicText = document.getElementById('dynamic-text');
        const actionButton = document.getElementById('action-button');
        const clickCountDisplay = document.getElementById('click-count');
        const messageBox = document.getElementById('message-box');

        let clickCounter = 0; // Initialize a counter for button clicks
        let messages = [
            "You've started a fascinating journey!",
            "Keep clicking, something new happens!",
            "JavaScript is fun, isn't it?",
            "You're making progress!",
            "Another click, another update!",
            "The counter grows with each interaction!",
            "This is just the beginning!",
            "You're a JavaScript pro!",
            "Amazing! Keep going!",
            "What will happen next?"
        ];

        // Function to display a temporary message in the message box
        function showMessage(message, type = 'info') {
            messageBox.textContent = message;
            messageBox.className = `mt-4 p-3 rounded-md transition-all duration-300 ${
                type === 'info' ? 'bg-blue-100 text-blue-800' :
                type === 'success' ? 'bg-green-100 text-green-800' :
                'bg-red-100 text-red-800'
            }`;
            messageBox.classList.remove('hidden'); // Make sure it's visible

            // Hide the message after 3 seconds
            setTimeout(() => {
                messageBox.classList.add('hidden');
            }, 3000);
        }

        // Add an event listener to the button
        actionButton.addEventListener('click', () => {
            clickCounter++; // Increment the counter

            // Update the text content of the paragraph element
            const randomIndex = Math.floor(Math.random() * messages.length);
            dynamicText.textContent = messages[randomIndex];

            // Add a class to trigger a temporary animation for the text
            dynamicText.classList.remove('highlight-text'); // Remove to re-trigger animation
            void dynamicText.offsetWidth; // Trigger reflow to restart animation
            dynamicText.classList.add('highlight-text');

            // Update the click count display
            clickCountDisplay.textContent = clickCounter;

            // Show a success message for some clicks
            if (clickCounter % 5 === 0) {
                showMessage(`You've clicked ${clickCounter} times!`, 'success');
            } else {
                showMessage("Text and counter updated!", 'info');
            }
        });

        // Optional: Initial message on page load
        window.onload = () => {
            showMessage("Page loaded! Click the button!", 'info');
        };
    </script>
</body>
</html>

6. This is 6th block tutorials: Details block

What does a details block look like?

There are two parts on a detail block; one is summary part usually indicate headline or question, and another one is hidden block that may be any block from the WordPress block store.,

7. This is 7th block tutorials: Preformatted block

a. showing preformatted block with ASCII Art

    _.-'""'-._   _.-'""'-._
   /         \ /         \
  |   O   O   |   O   O   |
  |    ---    |    ---    |
   \  -----  / \  -----  /
    '-.____.-'   '-.____.-'
         \\       //
          ||     ||
         _//-----/\\_
        (___)   (___)

b. showing preformatted block with code

/* Minimal CSS for common web elements. */

/* Global Box-Sizing for consistent layout */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Basic Body Styling */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 15px;
    background-color: #f4f7f6;
    color: #333;
}

/* Styling a Button */
.my-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.my-button:hover {
    background-color: #0056b3;
}

/* Styling a Card */
.my-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin: 20px auto;
    max-width: 500px;
    width: 90%;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .my-button {
        padding: 8px 16px;
        font-size: 14px;
    }
    .my-card {
        padding: 15px;
        margin: 10px auto;
    }
}

c. Showing preformatted block with Plain text table

╔═══════════════════╦═══════════════════╦═════════════════╗
║ Item              ║ Quantity          ║ Price           ║
╠═══════════════════╬═══════════════════╬═════════════════╣
║ Apples            ║ 10                ║ $1.50           ║
║ Bananas           ║ 5                 ║ $0.75           ║
║ Oranges           ║ 12                ║ $2.00           ║
╚═══════════════════╩═══════════════════╩═════════════════╝

8. This is 8th block tutorials: Pullquote

There are so many causalities in the war between Iran and Israel, especially on the side of Iran.
AL-Jajeera news

9. This is 9th block tutorials: Table

Product	unit sold	unit left	unit bought	unit price	retailer price
Coconut chocolate	250	250	500	3 BDT	4 BDT
Chips	160	340	500	8 BDT	10 BDT
Ice-cream	350	150	500	21 BDT	25 BDT

Product price table

10. This is 10th block tutorials: Verse block

اللَّهُ لَا إِلَٰهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ ۚ لَا تَأْخُذُهُ سِنَةٌ وَلَا نَوْمٌ ۚ لَهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الْأَرْضِ ۗ مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلَّا بِإِذْنِهِ ۚ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ ۖ وَلَا يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلَّا بِمَا شَاءَ ۚ وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالْأَرْضَ ۖ وَلَا يَئُودُهُ حِفْظُهُمَا ۚ وَهُوَ الْعَلِيُّ الْعَظِيمُ
(Surah Al-Baqarah - البقرة, Verse 255 - آية الكرسي)

Getting to know what classic block is.

This is all about blocks related to the text and paragraph.

WordPress Block Editor Tutorials