One place for hosting & domains

      Editor

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (5 Steps)


      Picture this: You log in to your WordPress dashboard to write a new blog post. You fire up the Classic Editor, only to find a problem. All of the formatting buttons are missing, and the text is white and impossible to see.

      Encountering this error can be frustrating. It may even prevent you from getting work done, potentially putting you behind schedule. Fortunately, there are several solutions to this issue.

      In this article, we’ll look at exactly what this error involves and then walk you through how to fix it in five steps. Let’s get started!

      An Introduction to the White Text and Missing Buttons Error in the WordPress Visual Editor

      Before we dig into this error, let’s clarify exactly what we mean by the “visual editor.” This refers to the nicely-formatted editor you use to create your posts or pages in WordPress, whether that’s the Classic Editor or the newer Block Editor.

      The error we’re dealing with in this article occurs with the visual editor when using the Classic Editor plugin.

      The WordPress visual editor.

      The formatting buttons along the top suddenly vanish. Additionally, the text you write in the editor field may appear the same color as the background, making it unreadable.

      This makes using the Classic Editor pretty much impossible. If you rely on it to create your blog content, you’ll want to fix this problem as quickly as possible. Fortunately, this issue isn’t difficult to correct.

      What to Do Before You Start Troubleshooting

      Before you start troubleshooting, we recommend making a backup of your site. If you’re using DreamHost, we make the backup process incredibly easy.

      If you’re using a different hosting provider, it likely also offers a backup solution. You can consult the appropriate documentation for instructions. You can also opt for a WordPress backup plugin such as UpdraftPlus.

      Skip the WordPress Error Stress

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (In 5 Steps)

      This error is most likely either a problem with your browser cache or with the Classic Editor itself  — both of which can be easily fixed. We recommend following these five steps in order, and only proceeding to the next if you’re still experiencing the issue.

      Step 1: Clear Your Browser Cache

      The first and simplest method you can try is clearing your browser cache. Your browser saves versions of websites you visit (including your WordPress editor) to make loading them quicker.

      If your cache is corrupted or has stored a version of a page with errors, it may continue to load the broken page. Clearing the cache forces the browser to load a fresh copy of the editor, hopefully resolving the problem.

      To clear your cache in Google Chrome, click on the three-dot menu icon in the upper-right corner, and then click on Settings. Under the Privacy and security section, select Clear browsing data.

      Options for clearing user data and cache in Google Chrome.

      In the pop-up, make sure only Cached images and files is selected, and then click on Clear data. If you don’t use Chrome or want further guidance, you can refer to our guide on clearing your browser cache.

      Step 2: Deactivate All of Your WordPress Plugins

      Next, you can check if a plugin might be causing the issue. The best way to do this is to deactivate all your plugins (except for the Classic Editor), check to see if the problem is resolved, and then re-enable them one by one until the error returns.

      At that point, you’ll have isolated the problematic plugin. Then you can check for updates, look for alternatives, or simply leave it deactivated if it’s one you don’t depend on.

      To deactivate your WordPress plugins, head to the dashboard and navigate to Plugins > Installed Plugins.

      Check the box next to all of the plugins except for the Classic Editor. In the Bulk actions box, you can choose Deactivate and click on Apply. Then reload the WordPress editor and verify that everything is working properly.

      If deactivating your plugins resolved the error, your next step is to isolate the plugin that was causing it. You can go down the list one by one and click on the Activate button under the plugin’s name. After each one is reactivated, check to see if the error has reappeared. If not, you can move on until you find the problematic plugin.

      Step 3: Replace the TinyMCE Folder

      TinyMCE is the technical name for the WordPress Classic Editor. It’s an open-source editor that’s used by quite a few platforms, in addition to WordPress.

      An issue with the TinyMCE files can cause the editor’s buttons to disappear. To fix this, you can replace the folder with a fresh copy.

      First, download the version of WordPress your site is using. You can find the current version number by checking the bottom-right corner of any page in your WordPress dashboard.

      The WordPress version in use on a website.

      Open up the WordPress zip file and move the TinyMCE folder somewhere else, such as your desktop. It’s located at wp-includes/js/tinymce.

      Finally, you’ll need to access your WordPress site’s file system and replace the old folder with the new one. Head to your DreamPress account (see Step 1 for instructions). Under the Details section, click on Manage Files to open the DreamHost file browser.

      The DreamHost file manager.

      If you’re not a DreamHost customer, you can also access your site via Secure File Transfer Protocol (SFTP). Navigate to wp-includes/js and upload the new copy of the TinyMCE folder using the “up arrow” button in the bottom left. Then you can refresh your WordPress dashboard and check the editor again.

      Step 4: Modify the wp-config.php File

      If the above fixes haven’t worked, you can try modifying your wp-config.php file to force WordPress to load scripts individually. To do so, start by opening up your WordPress site in the DreamHost file manager or via SFTP, as outlined above.

      The wp-config.php file is located in the root directory of your site. Simply add the following line of code to the top of the file, right after the opening <php> tag:

      define(‘CONCATENATE_SCRIPTS’,false);

      Here’s what your code should look like:

      The wp-config.php file, showing the location of the opening <php> tag.

      When you’re done, save the file, refresh your site, and then try to load the visual editor again. If you’re still seeing the error message, proceed to the last step.

      Step 5: Install the Advanced Editor Tools Plugin

      Previously known as TinyMCE Advanced, the Advanced Editor Tools plugin is a version of the TinyMCE script that offers additional features.

      The Advanced Editor Tools plugin.

      Essentially, it provides you with a hybrid of the TinyMCE editor and the Block Editor. Also, it’s free to download and use.

      After you install and activate it, you can locate the settings by navigating to Settings > Advanced Editor Tools.

      The Advanced Editor Tools plugin settings.

      Once it’s activated and you’ve configured the settings to your liking, refresh your WordPress site. Now, when you go to a new WordPress post or page, you should see that the previously-missing buttons appear in your visual editor.

      Additional WordPress Issue Resources

      Want to learn more about fixing common WordPress errors? We’ve put together several guides to help you.

      Website Management Made Easy

      Let us handle the backend — we’ll manage and monitor your website so it’s safe, secure, and always up.

      WordPress Visual Editor Problem, Solved

      If your WordPress editor is experiencing problems, such as unreadable white text or disappearing buttons, don’t worry. Like many WordPress errors, this one is relatively simple to fix, and there are multiple methods you can try.

      As we’ve discussed, you can follow these five steps to resolve the white text and missing buttons error in the WordPress editor:

      1. Clear your browser cache.
      2. Deactivate your WordPress plugins.
      3. Replace the TinyMCE folder with a fresh copy.
      4. Modify your wp-config.php file.
      5. Install the Advanced Editor Tools plugin.

      If you want to make troubleshooting easier, consider using DreamPress, our managed WordPress hosting solution. With DreamPress, we take care of problems for you, so you can focus on what matters.



      Source link

      How To Set Up Your CSS and HTML Practice Project With a Code Editor



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will set up the folders and files necessary for exploring CSS and building a website. Using a code editor, you will create a project directory for our website, a folder and file for our CSS code, a file for our HTML code, and a folder for images. This tutorial series uses Visual Studio Code, a code editor freely-available for Mac, Windows, or Linux, but you may use whichever code editor you prefer. Note that certain instructions may need to be slightly modified if you use a different editor.

      How To Create HTML and CSS Files and Folders

      After opening your preferred text editor, open up a new project folder and name it css-practice. You’ll use this folder to store all of the files and folders you create in the course of this tutorial series.

      To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called css-practice:

      Gif of process of adding a project folder in Visual Studio Code

      Next, create a new folder inside css-practice and name it css. Inside this folder, open up a new file in your project directory and save it as styles.css—this is the file you’ll use to store our CSS style rules. If you are using Visual Studio Code, you can create a new folder by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the css-practice folder, selecting “New Folder” and creating the css folder. Then, click Right Click(on Windows) or CTRL + Left Click (on Mac) on the new css folder, select “New File”, and create the file styles.css as illustrated in the gif below:

      Gif of how to add CSS folder and file

      Save the file and leave it open.

      You also need to create a file to add our HTML content—the text, images, and HTML elements that will be rendered in the browser. In the project directory css-practice, open an additional new file and save it as index.html in the same way you created the styles.css file above. Make sure to save this index.html file in the css-practice folder and not in the css folder.

      Next, you need to add a line of code in the index.html document that instructs the browser to use the styles.css file as our style sheet. To do this, you’ll use the HTML <link> tag and link to the styles.css file. Add the following code snippet to your HTML document:

      index.html

      <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">
      

      This code snippet tells the browser to interpret the HTML code according to the stylesheet located at css/styles.css. Make sure you don’t erase this line while adding or deleting content to your index.html file throughout this tutorial series. Save your index.html file and keep it open.

      Finally, create an additional folder inside css-practice and name it images in the same way that you created the css folder above. This folder will be where you save any images you use in this tutorial series.

      You should now have a project folder named css-practice that contains the folders and files necessary for exploring CSS in this tutorial series:

      • A folder named css that contains the file styles.css
      • An empty folder named images
      • A file named index.html

      If you are using Visual Studio Code, your editor should now display the following file tree and the open files:

      Visual Studio Code Editor with file tree displayed

      Notice that the file names include extensions (.html and .css) that refer to the type of content they contain. You will add content to these files in our hands-on exercises in the tutorials that follow.

      Debugging and Troubleshooting CSS and HTML

      Precision is important when working with HTML and CSS. Even an extra space or mistyped character can keep your code from working as expected.

      If your HTML or CSS code is not rendering in the browser as intended, make sure you have written the code exactly as written in the tutorial. Though we encourage you to manually write out the code for the purpose of learning, copy and pasting can be helpful at times to ensure that your code matches the examples.

      HTML and CSS errors can be caused by a number of things. Check your markup and CSS rules for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. You should also make sure that you don’t accidentally use “curly” or “smart” quotation marks like and " that are often used by word processors. Curly quotes are designed for human-readable text and will cause an error in your code as they are not recognized as quotation marks by browsers. By typing quotation marks directly into your code editor, you can make sure you are using the right kind.

      Also, each time you change your code, make sure to save your file before reloading it in the browser to check your results.

      A Quick Note on Automatic HTML Support Features

      Some code editors—such as the Visual Studio Code editor we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.

      Conclusion

      You are now ready to proceed with the tutorial series. In the next tutorial, you’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.



      Source link

      How to Update Your Old WordPress Posts With the Block Editor


      Since the Block Editor is now the default tool for creating new WordPress content, site owners are having to address the question of what will happen to their older posts and pages. This content will inevitably need updating since the Classic Editor plugin won’t be around forever.

      Fortunately, there are methods in place for handling this exact situation. If you need to make changes to an old post, you can easily do so without any help from the Classic Editor. This makes it much easier to bring your old and new content into alignment.

      In this post, we’ll discuss the Block Editor (you might know it by its nickname: Gutenberg) and then we’ll show you two methods for updating your old posts using this new tool. Let’s get started!

      Understanding the Differences Between the Classic and Block Editors

      For many years, WordPress users created new content for their websites in a visual editor, now known as the Classic Editor. It consisted primarily of one large field where you could add text, images, and other media.

      The WordPress Classic Editor.

      The main downside to the Classic Editor was that some elements — such as tables and content columns — required coding or extra plugins to implement. This arguably made the publishing process more complicated and time-consuming than it needed to be.

      To address that issue, the Block Editor was created. It enables you to use a system of ‘blocks’ to create content in WordPress. Each block holds a specific type of content, such as a paragraph, an image, a table, a list, or just about any other element you might want to add to a post or page.

      The WordPress Block Editor.

      With blocks, WordPress users can create more complex content without the need for coding. Each block has individual settings so you can customize specific elements. Additionally, you can more easily move content around the page to create columns or other unique layouts.

      Generally speaking, the Classic Editor is considered the ‘simpler’ of the two options because of its interface. There’s just one field where all of your content goes, as opposed to many separate blocks. However, the Block Editor is built for ease-of-use and can be more user-friendly — especially for those new to WordPress.

      Get More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Switching Over from the Classic Editor to the Block Editor

      The Block Editor has been ‘live’ since December 2018 and now serves as the default editor for anyone running WordPress 5.0 or later. However, some users have chosen to disable it in order to continue using the old – or Classic – editor.

      If you’ve been using WordPress for some time and are familiar with the Classic Editor, using the Block Editor may not seem very appealing. After all, it still has compatibility issues with some plugins and themes, and learning a new interface isn’t the most fun way to use your time.

      However, there are a few reasons to embrace the change. To start with, the Block Editor should streamline your content creation. Once you get past the learning curve, adding blocks can be much faster than stopping to code a table or columns by hand. More importantly, you may want to make this transition for the sake of your site in the long term. While right now you can keep the Classic Editor in place using a plugin, WordPress plans to stop support for that system eventually.

      For now, support is promised until 2022. However, once updates are no longer being released, having this plugin installed on your site could pose a security risk. At a certain point, moving over to the Block Editor will be in the best interests of your website.

      What the Block Editor Means for Your Existing Content

      Fortunately, old posts and pages created in the Classic Editor are preserved in their current format with the Block Editor. Each one features a single, large block called a Classic block. All of your text, images, and other content will be found inside this block, unchanged.

      A Classic block in the WordPress Block Editor.

      The Block Editor’s effect on your theme and plugins is a little more complicated. There have been compatibility issues between the new editor and some themes and plugins, so it’s possible that enabling it will cause problems on your site.

      In particular, page builders and other plugins that affect the way the WordPress editor looks and functions tend to have trouble with the Block Editor. However, updates have been released for many of these plugins to fix these issues. It’s a good idea to check each of your major plugins (especially any that affect the editor) to see if they are compatible.

      The Block Editor should be useable with just about any theme. That said, it works better with some than with others. Ideally, you’ll want to use a theme that has been updated for use with the Block Editor or a theme that was created after the new editor’s release and built with compatibility in mind.

      The best way to avoid any potential issues is to create a staging version of your site. Then you can thoroughly test for any problems before updating your live site.

      How to Update Your Old WordPress Posts With the Block Editor (2 Methods)

      Of course, you may not want to leave your old WordPress content as-is. Fortunately, you can update your old posts, pages, and other content types in the Block Editor. There are two primary methods you can use, and each has its pros and cons.

      Before you can use either of them, you’ll need to make sure you have the Block Editor enabled. For most sites, this is already the case.  In other words, if your site is up-to-date and you haven’t done anything to disable the Block Editor, it should be currently active. Therefore, you won’t need to do anything.

      Otherwise, either deactivate the Classic Editor plugin or upgrade to WordPress 5.0 or above to automatically switch your site over to the new editor. Then, you can use one of the following two techniques to work on your existing content.

      Method 1: Continue Editing Your Posts in a Classic Block

      As we described earlier, existing posts and pages will be converted into Classic blocks. If you want, you can edit your content inside these blocks, just as you would in the Classic Editor.

      All you have to do is open the post you wish to update, and click on the Classic block. When you do, you’ll see the TinyMCE toolbar appear at the top of the block. It should look very familiar.

      A Classic block in the Block Editor with the TinyMCE toolbar.

      You can edit within this block exactly as you would in the Classic Editor. If you need to access the Text Editor, you can do so by clicking on the three-dot icon to the right of the toolbar, and selecting Edit as HTML.

      The Edit as HTML option in the Classic block.

      When you select this option, the block’s content will be shown as code, and you can edit it as needed.

      Editing a Classic block in HTML.

      To return to the Visual Editor, simply click on the three-dot icon again and select Edit Visually. That should be all you need to update your old posts using the Classic block.

      Method 2: Convert Your Old Content into Blocks

      The other option you have available is to convert a post or page’s Classic block into new blocks. This will divide up your content up into individual elements, just as if you had created it using the Block Editor.

      To do this, click on the three-dot icon and select Convert to Blocks.

      Selecting the Convert to Blocks option in a Classic block.

      Your post should then split up into separate pieces. Each paragraph will become its own block, as will every heading, image, list, video, button, and element.

      An old Classic Editor post converted into new blocks.

      You can click on an individual block to edit the content within it. While this process usually goes off without a hitch, you’ll want to make sure that each element of your post has converted to the correct type of block.

      For example, if a pull quote from your old post has converted into a regular paragraph block, you can change it by clicking on the leftmost icon in the block toolbar.

      The Change Block Type option in a block.

      You can then select the correct block type from the options listed. Once all of your blocks are set to the correct types, you can use the toolbar at the top of each to make any specific changes related to alignment and placement within the post. You can also make edits related to each block’s type, such as by altering text styling or image size. In other words, you can now use the Block Editor’s full range of capabilities to work on your content.

      New Kid on the Block (Editor)

      Updating old posts is a smart way to freshen up your content and give your site a facelift. If you’re worried about how your old posts will fare in the age of the Block Editor, however, never fear. You can easily make changes to your old posts and pages.

      While you’re updating your WordPress site, why not upgrade your hosting service too? Our DreamPress plans include 24/7 WordPress support to help with all your Block Editor questions.



      Source link