Forem: Geoffrey Brossard

Unlocking Multilingual Menus: How to Make Your WordPress Full-Site-Editing Navigation Translatable with Polylang!

Geoffrey Brossard — Wed, 23 Oct 2024 21:47:43 +0000

If you’ve ever found yourself knee-deep in PHP, wrestling with WordPress native navigation blocks, and wondering why your menus look like they’ve been lost in translation (literally), you’re not alone! Fear not! Today, we’ll transform that jumbled mess into a beautifully translatable masterpiece using Polylang.

Understanding Polylang and Full Site Editing (FSE)

Polylang is a fantastic tool for creating multilingual WordPress sites, but it isn’t fully integrated with Full Site Editing (FSE) and Block themes. The traditional WordPress menus are absent in FSE and have been replaced with navigation blocks linked to wp_navigation posts.

While Polylang offers some compatibility with FSE, the removal of classic menu functionality leaves users without a straightforward solution for translating navigation content. Additionally, navigation content is stored only in the database, making it impossible to embed directly in the theme’s code translating through WordPress's native internationalization (i18n) features.

Making the navigation menus of a WordPress site translatable with the Polylang plugin can be achieved in just fifty lines of code. Here’s a step-by-step guide.

Step 1: Make `wp_navigation` Post Type Translatable

The navigation block is connected to a wp_navigation post where links and menu items are stored. This allows the user to display the same menu across different navigation blocks.

First, we will make this post type translatable by Polylang using the pll_get_post_types filter.

function nangka_making_wp_navigation_translatable( $post_types, $is_settings ) {
    if ( ! $is_settings ) {
        $post_types['wp_navigation'] = 'wp_navigation';
    }
    return $post_types;
}
add_filter( 'pll_get_post_types', 'nangka_making_wp_navigation_translatable', 10, 2 );

Step 2: Add a Submenu in the Dashboard

Making the wp_navigation post type translatable with Polylang serves an essential internal technical purpose. But it did not add the Polylang translation toolboxes in the Full Site Editing (FSE) Editor because Gutenberg is not invoked in the same manner within this context. As a result, we will manage translations through the list page located at /wp-admin/edit.php?post_type=wp_navigation.

For added convenience, we will create a submenu under Appearance:

function nangka_add_submenu_navigation_posts() {
    add_theme_page(
        __( 'Navigation menus', 'nangka' ),
        __( 'Navigation menus', 'nangka' ),
        'edit_theme_options',
        'edit.php?post_type=wp_navigation',
        '',
        10
    );
}
add_action( 'admin_init', 'nangka_add_submenu_navigation_posts', 100 );

You can now navigate to see the list of wp_navigation posts. On this list page, you can edit the language of a navigation content using the quick edit feature and add translations using the Polylang buttons.

Opening the wp_navigation post for editing will launch the Full Site Editing (FSE) Editor, which is the expected behavior for managing your WordPress menus. This functionality allows users to easily customize and translate their navigation items when creating a multilingual site with Polylang.

Step 3: Handle Menu Rendering with Translation

Now that we have translations for our Navigation posts, we need to load the appropriate content based on the language of the loaded page. To accomplish this, we will replace the rendering callback of the navigation block to modify the ref attribute with the translated navigation post ID before rendering the block. This ensures that users always see the correct content based on their selected language.

function nangka_navigation_render_callback_with_translation( $settings, $metadata ) {
    if ( 'core/navigation' !== $metadata['name'] ) {
        return $settings;
    }

    $default_render_callback = $settings['render_callback'] ?? null;
    $settings['render_callback'] = function ( $attributes, $content, $block ) use ( $default_render_callback ) {
        $wp_nav_id = absint( $attributes['ref'] ?? 0 );
        if ( ! empty( $wp_nav_id ) && function_exists( 'pll_get_post' ) ) {
            $wp_nav_id = pll_get_post( $wp_nav_id );
            if ( ! empty( $wp_nav_id ) ) {
                $attributes['ref'] = $wp_nav_id;
            }
        }

        return ! empty( $default_render_callback )
            ? call_user_func( $default_render_callback, $attributes, $content, $block )
            : $content;
    };
    return $settings;
}
add_filter( 'block_type_metadata_settings', 'nangka_navigation_render_callback_with_translation', 10, 2 );

Conclusion

With these three simple functions, we now have translatable navigation menus! Further step could be adding the Polylang meta widget in the FSE Editor, but it may not be crucial for every use case.

This technique can also be applied to other post types like wp_template and wp_template_part. Currently, the only way to make them translatable is by creating a theme or child theme and using patterns (see this video for a full explanation). However, it was even not possible to implement this with Navigation since its content resides solely in the database and cannot be translated directly in code.

Create an Engaging Voting Widget with Tailwind CSS

Geoffrey Brossard — Mon, 14 Oct 2024 22:02:22 +0000

With the upcoming American elections, it's a great time to practice your voting skills and get ready for the polls with this JavaScript-free widget!

In this article, we will explore how to create a simple voting widget using Tailwind CSS to customize a radio button without the need for JavaScript. This widget will allow users to upvote or downvote and display the current score, enhancing user engagement on your site.

Step 1: Create the sprite

In this example, I used the GIF animation Upward Arrow icon by Icons8 as a base and customized its color. Then I transformed the GIF into a sprite. We also need a static button image.

My sprite contains 24 images that will be displayed one after the other to create the animation, just like a roll of film. You can create a sprite with more or fewer images, but you'll have to adapt the animation.

Step 2: Code Explanation

2.1 Extend Tailwind with Our Animation

First, we will extend the Tailwind CSS default configuration to incorporate our animation. The sprite will be set as a background image, and we will create a simple @keyframes rule to position the background. Then we will create the sprite animation using it.

tailwind.config = {
    theme: {
        extend: {
            keyframes: {
                sprite: {
                    from: {
                        backgroundPosition: "left"
                    },
                    to: {
                        backgroundPosition: "right"
                    }
                }
            },
            animation: {
                "vote-sprite": "sprite .8s steps(23) 1 forwards"
            }
        }
    }
}

If you use a different number of frames in your sprite, adjust the number of steps and duration of the animation accordingly.

2.2 Radio inputs

Three radio inputs represent the voting options:

Downvote: To vote down.
Blank: To cancel the vote.
Upvote: To vote up.

Each input is hidden using the hidden class and we will be used as peers to change the style of next elements depending on the states of the radio inputs.

<input id="down-radio" class="peer/down hidden" type="radio" name="vote" value="down">
<input id="blank-radio" class="peer/blank hidden" type="radio" name="vote" value="blank" checked="checked">
<input id="up-radio" class="peer/up hidden" type="radio" name="vote" value="up">

2.3 Labels

The labels are used to activate the radio inputs when clicked. We will have four labels used as buttons for voting actions: one label for checking downvote, one label for canceling the downvote checking blank, and the same for upvoting.

They utilize Tailwind classes for appearance and behavior management:

The first label is displayed by default and and points to downvote. Its background is the static image.
The second label is shown when downvote is checked and it contains the animation animation that runs each time we vote.

The same principle applies for upvoting.

<!-- Downvote -->
<label class="peer/down-btn aspect-square cursor-pointer w-12 peer-checked/down:invisible" for="down-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Downvote"></label>
<label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer left-0 opacity-0 pointer-events-none w-12 transition-opacity peer-hover/down-btn:opacity-100 peer-checked/down:animate-vote-sprite peer-checked/down:pointer-events-auto peer-checked/down:opacity-100 peer-checked/down:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932412479/c91aef3d-6588-4883-b503-2db3b6594ba0.png');" aria-label="Remove downvote"></label>

<!-- Upvote -->
<label class="peer/up-btn aspect-square cursor-pointer rotate-180 w-12 peer-checked/up:invisible" for="up-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Upvote"></label>
<label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer opacity-0 pointer-events-none right-0 w-12 transition-opacity peer-hover/up-btn:opacity-100 peer-checked/up:animate-vote-sprite peer-checked/up:pointer-events-auto peer-checked/up:opacity-100 peer-checked/up:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932423782/2e233a8b-db52-431f-9f1b-7458214ac960.png');" aria-label="Remove upvote"></label>

2.4 Vote Counter

The central section displays the vote score. Using transition and translate classes, we can animate score changes when a user votes. The wrapper masks other values with overflow-hidden.

<div class="group flex items-center h-8 mx-1 overflow-hidden text-2xl">
    <div class="flex flex-col font-semibold items-center transition duration-700 translate-y-0 peer-checked/up:group-[]:-translate-y-8 peer-checked/down:group-[]:translate-y-8">
        <span class="text-red-700">-1</span>
        <span>0</span>
        <span class="text-green-800">1</span>
    </div>
</div>

2.5 Wrapping in Flexbox

We wrap everything in an inline-flex container to ensure elements are well placed and aligned. We also noticed that clicking on the buttons was selecting some text on mobile devices so we recommend using select-none to remove the problem.

3. Try It Out

<div class="gap-0 h-16 inline-flex items-center relative select-none">
    <input id="down-radio" class="peer/down hidden" type="radio" name="vote" value="down">
    <input id="blank-radio" class="peer/blank hidden" type="radio" name="vote" value="blank" checked="checked">
    <input id="up-radio" class="peer/up hidden" type="radio" name="vote" value="up">

    <label class="peer/down-btn aspect-square cursor-pointer w-12 peer-checked/down:invisible" for="down-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Downvote"></label>
    <label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer left-0 opacity-0 pointer-events-none w-12 transition-opacity peer-hover/down-btn:opacity-100 peer-checked/down:animate-vote-sprite peer-checked/down:pointer-events-auto peer-checked/down:opacity-100 peer-checked/down:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932412479/c91aef3d-6588-4883-b503-2db3b6594ba0.png');" aria-label="Remove downvote"></label>
    <div class="group flex items-center h-8 mx-1 overflow-hidden text-2xl">
        <div class="flex flex-col font-semibold items-center transition duration-700 translate-y-0 peer-checked/up:group-[]:-translate-y-8 peer-checked/down:group-[]:translate-y-8">
            <span class="text-red-700">-1</span>
            <span>0</span>
            <span class="text-green-800">1</span>
        </div>
    </div>
    <label class="peer/up-btn aspect-square cursor-pointer rotate-180 w-12 peer-checked/up:invisible" for="up-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Upvote"></label>
    <label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer opacity-0 pointer-events-none right-0 w-12 transition-opacity peer-hover/up-btn:opacity-100 peer-checked/up:animate-vote-sprite peer-checked/up:pointer-events-auto peer-checked/up:opacity-100 peer-checked/up:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932423782/2e233a8b-db52-431f-9f1b-7458214ac960.png');" aria-label="Remove upvote"></label>
</div>

Conclusion

This simple voting widget, built solely with HTML and Tailwind CSS, provides a smooth user experience without requiring JavaScript. By customizing styles and integrating this code, you can easily allow users to interact with your content effectively. For more information on using Tailwind CSS, check out the official documentation.

Creating a Medium-like text highlighter to report typo

Geoffrey Brossard — Sun, 20 Nov 2022 09:52:39 +0000

Public comments should not be the place to point out spelling mistakes.

Choice of UI

We decided to use a contextual menu that opens like the Medium highlighter.

Some other news sites use other means such as a dedicated email address or a simple contact form, but we knew that these methods would be hijacked for sending press releases that would then pollute the processing of typos 😬️.

This method also makes it easier to give context of the typo among the content of the article in order to find it in the content.

The final result in action:

No library suits us

There are not many JS libraries available on this topic, or I was not able to find the right keywords to make my searches.

Here are the libs I found and why we didn't go with them :

typo-reporter (JS script opening pop-up to send typo report): quite similar to what we did, but there is no contextual menu
medium-editor (a clone of medium.com inline editor toolbar): a bit too much as we just want the highlight/select feature
jquery.textSelect (jQuery extension to work with text selection): depends on jQuery, not maintained for a long time and does not bring significant feature such as the contextual menu
Highlighter pro (WordPress extension): too heavy for what we need
👍️ TinyQ (zero dependency JS lib)
👍️ Highlight share (Medium-like text selection sharing)

Finally, we decided to go from scratch, as it seems that not much code needs to be written. And if the user selects only one word, it will not be easy to find it if we don't have the surrounding text.

Opening the popover on text selection

The position of the popover is above the first line of selection by default. If the first line is above the top of the screen or there is not enough space to place the popover, we put it below the last line. On mobile, a native contextual menu is displayed upon text selection with features like Copy or Select all which could hide our popover, so we put it below the first line by default and above the last line if the first line is too up. This responsive positioning is done with CSS.

const popoverContainer = document.querySelector( '.wrapper' );

/**
 * Returns an object with keys:
 * - left, top: position relative to `popoverContainer`
 * - pos: 'above' if popover is linked to first line or 'below' for last line
 */
function GetPopoverPosition() {
    // the list of rects for all lines of the selection
    const rects = document.getSelection().getRangeAt( 0 ).getClientRects();

    // pos is below if we don't have enough space above
    let pos = rects[0].top < 50 ? 'below' : 'above';
    // rects values for the first or last line depending on pos
    let { left, top, width, height } = pos === 'above' ? rects[0] : rects[rects.length - 1];

    // adjust around line: center horizontally, align to top or bottom depending on pos
    left += width / 2;
    if ( pos === 'below' ) {
        top += height;
    }

    // adjust with scroll in screen
    left += window.scrollX;
    top += window.scrollY;

    // adjust with parent position relative to body
    const bodyRect = document.body.getBoundingClientRect();
    const parentRect = popoverContainer.getBoundingClientRect();
    left -= parentRect.left - bodyRect.left;
    top -= parentRect.top - bodyRect.top;

    return { left, top, pos };
}

Then we create the open and close functions for the popover:

function OpenPopover() {
    const { top, left, pos } = GetPopoverPosition();

    // create positioned popover element
    const popover = document.createElement( 'button' );
    popover.className = 'typo-report-popover typo-report-popover--' + pos;
    popover.style.top = top + 'px';
    popover.style.left = left + 'px';

    // without this, the click on the popover clears the text selection
    const stopEvent = ( e ) => {
        e.preventDefault();
        e.stopPropagation();
    };
    popover.addEventListener( 'mouseup', stopEvent );
    popover.addEventListener( 'touchend', stopEvent );

    popoverContainer.appendChild( popover );
}

function ClosePopover() {
    popoverContainer.querySelectorAll( '.typo-report-popover' )
                    .forEach( e => e.parentElement.removeChild( e ) );
}

.typo-report-popover {
    background-color: #f0eff4;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    display: block;
    height: 36px;
    position: absolute;
    transform: translateX(-50%);
    width: 48px;

    &::before {
        background-image: url('spellcheck.svg');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        bottom: 6px;
        content: '';
        display: block;
        left: 12px;
        position: absolute;
        right: 12px;
        top: 6px;
    }

    &::after {
        background-color: #f0eff4;
        content: '';
        height: 8px;
        position: absolute;
        width: 8px;
    }

    @mixin above() {
        margin-top: -4px;
        transform: translate(-50%, -100%);

        &::after {
            bottom: 0;
            box-shadow: 4px 4px 4px rgba(0, 0, 0, .3);
            transform: translate(-50%, 50%) rotate(45deg);
        }
    }
    @mixin below() {
        margin-top: 4px;

        &::after {
            top: 0;
            box-shadow: -4px -4px 4px rgba(0, 0, 0, .3);
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }

    &.typo-report-popover--above {
        @include above;

        @media (max-width: 768px) {
            @include below;

            transform: translate(-50%, 100%);
        }
    }

    &.typo-report-popover--below {
        @include below;
    }
}

Then we need to toggle the popover when the user selects text or when the selection is cleared. The most obvious JS event is selectionchange and we also worked with mouseup and touchend to ensure compatibility for older browsers.

function TogglePopover() {
    // timeout to avoid blinking
    setTimeout( () => {
        // close previous popover
        ClosePopover();

        // open new popover if there is selected text within the highlightable elements
        const selection = document.getSelection();
        if ( selection.type === 'Range' && !selection.isCollapsed && !!selection.toString().trim() ) {
            OpenPopover();
        }
    }, 100 );
}
document.addEventListener( 'mouseup', TogglePopover );
document.addEventListener( 'touchend', TogglePopover );
document.addEventListener( 'selectionchange', TogglePopover );

Retrieving the text selection, with its context

In the selection, we can have undesired text content such as <script> or <img>. So we have to filter it out:

const excludedContentSelectors = [ 'script', 'img', 'noscript', 'iframe', '.print' ];
const excludedContentSelector = excludedContentSelectors.map( d => `${d},${d} *` ).join( ',' );

function SelectionToString() {
    const range = document.getSelection().getRangeAt( 0 );
    const fragment = range.cloneContents();

    // filters invisible nodes that should not be included in the text (meta data, print, scripts, images, etc)
    FilterChildren( fragment );

    return fragment.textContent;
}

function FilterChildren( node ) {
    const newChildren = Array.prototype.map.call( node.childNodes, ( child ) => {
        if ( child.nodeType === Node.TEXT_NODE && !!child.textContent ) {
            return child;
        } else if ( child.nodeType === Node.ELEMENT_NODE && ! child.matches( excludedContentSelector ) ) {
            FilterChildren( child )
            return child;
        } else {
            return null;
        }
    } ).filter( ( child ) => !! child );
    node.replaceChildren.apply( node, newChildren );
}

To be able to find the typo easily among the whole article, we need to send to the editor the selected text but also some context around it. This means we need to extend the beginning of the selection before and the end after what the user actually selected.

To do this, we browse up the DOM from the selected nodes to their parents until we match a non-inline element. Thus, if a user selects a word within a <strong> or <i> markup, we don't get the content of this markup only which can be very short, but the parent <p> element. This is also important not to go too up in the DOM tree so that we do not send the whole article content as context.

The selected content can contain some HTML markup, and we also try to filter it out.

So we define a set of elements for which the direct children are the boundaries when we go up in the DOM to find a block element, filtering the text content:

const highlightableElementSelectors = [ 'h1', '.article-content' ];
const highlightableSelector = highlightableElementSelectors.join( ',' );

function GetSelectionWithContext() {
    const selection = document.getSelection();

    // save current selection
    const { startContainer, startOffset, endContainer, endOffset } = selection.getRangeAt(0);

    // retrieve start as the first block element in parents, excluding full content
    let start = startContainer;
    while ( ! start.parentElement.matches( highlightableSelector )
            && (
                start.nodeType === Node.TEXT_NODE
                || (
                    start.nodeType === Node.ELEMENT_NODE
                    && window.getComputedStyle( start ).display === 'inline'
                )
            )
        ) {
        start = start.parentElement;
    }

    // retrieve end as the first block element in parents, excluding full content if it's not the last element of full content
    let end = endContainer;
    while ( ! end.nextSibling
            || (
                ! end.parentElement.matches( highlightableSelector )
                && (
                    end.nodeType === Node.TEXT_NODE
                    || (
                        end.nodeType === Node.ELEMENT_NODE
                        && window.getComputedStyle( end ).display === 'inline'
                    )
                )
            )
        ) {
        end = end.parentElement;
    }

    // change selection to get context before and after
    selection.setBaseAndExtent( start, 0, startContainer, startOffset );
    const selectedContextBefore = SelectionToString();
    selection.setBaseAndExtent( endContainer, endOffset, end.nextSibling, 0 );
    const selectedContextAfter = SelectionToString();

    // rollback to user selection and return context
    selection.setBaseAndExtent( startContainer, startOffset, endContainer, endOffset );
    const selectContent = SelectionToString();
    return `${HTMLEntities( selectedContextBefore )}<mark>${HTMLEntities( selectContent )}</mark>${HTMLEntities( selectedContextAfter )}`;
}

function HTMLEntities( str ) {
    const div = document.createElement( 'DIV' );
    div.innerText = str;
    return div.innerHTML;
}

The call of GetSelectionWithContext() gives this kind of results, the actual selection of the user being 'une vaste retrospective' among a paragraph of text:

To avoid text selection on the whole page but limit it to the highlightableElements, we could modify the TogglePopover function (using jQuery helper function):

function TogglePopover() {
    // timeout to avoid blinking
    setTimeout( () => {
        // close previous popover
        ClosePopover();

        // open new popover if there is selected text within the highlightable elements
        const selection = document.getSelection();
        if (
            selection.type === 'Range' && !selection.isCollapsed && !!selection.toString().trim()
            && jQuery( selection.anchorNode ).parents( highlightableSelector ).length > 0
            && jQuery( selection.focusNode ).parents( highlightableSelector ).length > 0
        ) {
            OpenPopover();
        }
    }, 100 );
}

Opening a modal to suggest a correction

When the user clicks on the popover, a modal opens showing the selected text in context and a field, so the user can type a suggestion for a correction.

The call of GetSelectionWithContext() could be a bit heavy depending on the DOM structure, so it is good that it is called only once when the user has decided on the selected piece of text.

For this first implementation, we use the convenient jsmodal.

function OpenReportPopup() {
    const selectionWithContext = GetSelectionWithContext().replaceAll( /\t/g, '' )
        .replaceAll( /  +/g, ' ' )
        .replaceAll( /(\r?\n)+/g, '<br>' )
        .replaceAll( /<br>(<br>)+/g, '<br>' );

    // open modal
    const content = '<div class="typo-report-popup">' +
                    '<h2>Report a typo</h2>' +
                    `<blockquote>${selectionWithContext}</blockquote>` +
                    '<h3>Your correction:</h3>' +
                    '<textarea class="fix-proposal" placeholder="Type here the correction of the yellow text"></textarea>' +
                    '<button class="send-fix-proposal">Send the correction</button>' +
                    '<div class="error"></div>' +
                    '</div>';
    Modal.open( {
        content: content,
        left: '50%',
        draggable: false,
        openCallback: () => {
            document.querySelector( 'html' ).style.overflow = 'hidden';
            document.querySelectorAll( '.send-fix-proposal' )
                    .forEach( ( send ) => {
                        send.addEventListener( 'click', () => {
                            send.innerHTML = 'Sending…';
                            send.disabled = true;
                            SendTypoFix( selectionWithContext, document.querySelector( 'textarea.fix-proposal' ).value );
                        } );
                    } )
        },
        closeCallback: () => {
            document.querySelector( 'html' ).style.overflow = '';
        }
    } );
}

function SendTypoFix( markedSelection, fix ) {
    // TODO: your implementation
}

Then we add the event listener on the popover in the function OpenPopover:

popover.addEventListener( 'click', OpenReportPopup );
popover.addEventListener( 'touchend', OpenReportPopup );

🚀️ What's next?

Now we have to style the content of the popup and implement the sending of the typo report through the preferred channel of the website editor: e-mail, team messaging, etc.

We could also limit the size of the text before and after to avoid useless huge piece of text to be sent.

Forem: Geoffrey Brossard

Unlocking Multilingual Menus: How to Make Your WordPress Full-Site-Editing Navigation Translatable with Polylang!

Understanding Polylang and Full Site Editing (FSE)

Step 1: Make wp_navigation Post Type Translatable

Step 2: Add a Submenu in the Dashboard

Step 3: Handle Menu Rendering with Translation

Conclusion

Create an Engaging Voting Widget with Tailwind CSS

Step 1: Create the sprite

Step 2: Code Explanation

2.1 Extend Tailwind with Our Animation

2.2 Radio inputs

2.3 Labels

2.4 Vote Counter

2.5 Wrapping in Flexbox

3. Try It Out

Conclusion

Creating a Medium-like text highlighter to report typo

Choice of UI

No library suits us

Opening the popover on text selection

Retrieving the text selection, with its context

Opening a modal to suggest a correction

🚀️ What's next?

Step 1: Make `wp_navigation` Post Type Translatable