How to Disable Text Selection in WebPage

Sometimes, you might want to share code or content on your website that you don’t want users to copy easily. In this tutorial, I’ll show you how to disable text selection in web pages using a simple CSS trick.

Step-by-Step Guide

Step 1: Add Custom CSS

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Add the following CSS code to disable text selection for specific blocks:

.no-select {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

Step 2: Apply the CSS Class to Your Gutenberg Block

1. Edit the page or post containing the content you want to protect.
2. Select the block where you’ve added your code or content.
3. In the block settings on the right sidebar, open the “Advanced” section.
4. In the “Additional CSS Class(es)” field, add the class ‘no-select'.

Here’s an example of how your code block might look:

<pre class="no-select">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Faisal Fateh Khan",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Lahore",
    "addressCountry": "Pakistan"
  },
  "email": "mailto:[email protected]",
  "jobTitle": "SEO Manager",
  "url": "https://faisalfateh.com"
}
</script>
</pre>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Faisal Fateh Khan",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Lahore",
    "addressCountry": "Pakistan"
  },
  "email": "mailto:[email protected]",
  "jobTitle": "SEO Manager",
  "url": "https://faisalfateh.com"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Faisal Fateh Khan",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Lahore",
    "addressCountry": "Pakistan"
  },
  "email": "mailto:[email protected]",
  "jobTitle": "SEO Manager",
  "url": "https://faisalfateh.com"
}
</script>

Conclusion

With these simple steps, you can easily disable text selection for specific content in your web pages. This method is particularly useful for sharing sensitive code or content that you want to keep protected.

Feel free to share your experiences or ask questions in the comments below!