How to avoid cruft in posts and pages
The new Gutenberg editor in WordPress has made pasting text into blocks more resilient against cruft.
Not everyone drafts their content directly in their web publishing content manager. Authors sometimes draft their content in Word documents, Google Docs or some other software.
When this content gets hastily copied and pasted into a content management system (CMS) like SquareSpace or WordPress, funky things can happen.1
Cruft happens
Pretty much all text on a computer is code wrapped in code. If the text is large or small, or italicized or bold, or written in Arial or Helvetica, or blue or orange, this information has been encoded. The difficulty is that sometimes the wrong information, the wrong encoding, gets copied and pasted into new contexts.
This is a common problem when text gets copied into web publishing content managers. This is one kind of cruft.
When text gets copied and pasted into the old Visual tab in WordPress, for example, you end up with a lot of <span> tags everywhere.
The good news is that the new Gutenberg editor in WordPress has made pasting text into blocks more resilient against cruft.2
You can check for cruft in the new Gutenberg editor by switching your paragraph blocks to HTML (look for this option in the three dots on the top right) and looking for the extra <span> tags.3
Avoid cruft
It’s good to avoid cruft, and write clean code. There are a number of benefits. Firstly, avoiding cruft allows the intended style of the website to work properly. Having consistent style in your typography goes a long way to making your site more readable, more enjoyable, and more pro.
Avoiding cruft also allows the content to get taken up by other devices and applications properly. It helps your text be more readable and more accessible.
One way to avoid cruft is to simply draft your content directly in your CMS. Alternatively, some folks use code editors like Text Wrangler, or BBEdit as a primary editor, because they’re built to limit and manage the additional encoding. These sorts of text editors also work great as an intermediary copy and paste step.