Preserved HTML Editor Markup
This plugin preserves the user-generated HTML markup in the TinyMCE editor. Unlike other plugins this one allows developers to work in the HTML tab AND end-users to work in the WYSIWYG Visual tab at the same time! No longer will your HTML markup be completely munged into an unrecognizable form when you switch between those tabs. And you don’t have to hang your users/editors out to dry when you hand off the project with a disabled Visual tab. IMPORTANT: Please read the installation instructions carefully. If you have existing content it will not render properly after activating this plugin until you use the Fix It Tools. (One user didn’t read or follow these steps and panicked thinking I ruined their website.) It also supports HTML5 Block Anchor tags in addition to other HTML5 elements, something that is currently not supported in WordPress via any existing plugins. Version 1.5 will probably be the last version I release for a while since my daughter will be born soon. I’ve added support for full JavaScript code blocks in the HTML tab. They are compatible and preserved when switching to Visual mode. This rounds out the support for almost complete html preservation, with full use of the WYSIWYG editor. And you don’t need to wrap comment codes around it per the recommendations located here: https://codex.wordpress.org/Using_Javascript but you can leave them in if you want. Version 1.4 was just a minor patch release. User @denl noticed a problem with the plugin CataBlog which implements its own administrative management features by disabling the ‘show_ui’ flag for its custom post type. I was ignoring any custom post type that didn’t have a GUI, but it was an unecessary filter that probably limited other plugins. This fix allows any post type that supports the TinyMCE editor to be “fixed” using the tools under Admin > Settings > Writing. Since version 1.3 you can now use inline CSS and JavaScript in the HTML editor and everything should be preserved. To be clear, this applies to tags only, like onclick events and style definitions – not script blocks themselves. To enable this feature you must disable the wptexturize and convert_chars filters by adding the following code to your theme’s functions.php: remove_filter("the_content", "wptexturize"); remove_filter("the_content", "convert_chars"); This new feature is pretty experimental at the moment. I tried to make it compatible with wptexturize but that proved close to impossible without duplicating a lot of core code in my plugin. It’s also not compatible with TinyMCE Advanced when the “stop removing p and br tags” setting is enabled. I’ve tested it on a variety of code samples and I’m pleased with the results but if you find any content that isn’t preserved just open a support ticket and I should be able to fix it. Since version 1.2, you now have a little more control over how content is created. And most of the previous caveats to using this plugin are now resolved. You can now choose whether to use BR tags OR P tags for newlines. Even better you can use both, where one return key press injects a BR tag, and two return key presses will wrap a Paragraph tag. This is great for being able to wrap headers at specific break points all while enjoying the semantic perks of paragraphs. In addition to choosing what type of tags to use, you can also change the behavior depending on the type of post, including custom post types. So Pages can default to BR tags, and Blog Posts can default to Paragraph tags. If you have existing content that was created before activating this plugin, you can now use the Fixit feature to convert your existing content in a way that makes it render the same as before. Only use this feature (located under Admin > Settings > Writing: Fixing Existing Content) if you are installing this plugin for the first time, otherwise it will remove all of the formatted white space in your posts. Multi-line HTML comments are now supported (Thanks to @cwlee_klagroup for suggesting the working fix!) The Format drop down in the TinyMCE editor had a bug which is now fixed. It will now select “Format” if you place the cursor on a section of bare text. Currently the editor just leaves the previously selected format option in place. It’s minor but it’s good to know when you have bare text in your content. There was a fairly problematic bug in the old version where in some browsers you couldn’t change the formatting of a single line in the Visual editor if you started from scratch. Choosing a different Format option would change the entire document, with the only work around being to edit the document in HTML mode. That was bad, and somehow went unnoticed for far too long. Anyway, that is fixed now. The caveats that still remains are: With script blocks added to your HTML markup, the right arrow key does not pass over them in the Visual Tab. You can down arrow over them however so this will likely never be addressed. If you use the Paragraph tag setting for newlines there is a minor bug where it will only wrap your content in Paragraph tags if you specify Paragraph in the Format drop down or if you enter more than one paragraph of text. So if you just type one sentence and click save it will not wrap the content in Paragraph tags. I tried to fix this but ran out of my allotted time working on other core issues. Should be fixed in the next release. For performance reasons, it will only preserve spaces if 4 spaces are used consecutively – i.e. an expanded tab in developer terms. It will not preserve intra-tag white space like . If you do add 4 or more spaces inside of an element tag it will corrupt the markup and mangle the output. But as this is intended for developer edits, this should be an extreme rarity given the habit is virtually non-existent in development communities. PRE tags are not affected and behave as you would expect, however due to how browsers parse tags, the first newline in the content of a PRE tag will be wiped out unless it is padded with either another new line or multiple spaces. CODE tags are not preserving white space at all, and when wrapped with PRE tags white space is still removed. I’m working to resolve this problem. Arbitrary section
Qubely – Advanced Gutenberg Blocks
Qubely is a full-fledged Gutenberg block toolkit with plenty of custom blocks, predefined sections and starter packs to create beautiful web pages. It minimizes the limitations of the Gutenberg editor and opens unlimited possibilities for any simple to complex design on Gutenberg. Qubely is a user-friendly Gutenberg plugin with necessary customization features and advanced functionalities. Extend the default WordPress Gutenberg editor with many custom blocks that are missing in there. Take control of your website design and apply out of the box styling options offered in Qubely. Create web pages that are stunning as well as mobile optimized. QUBELY GUTENBERG BLOCKS CORE FEATURES AT A GLANCE Predefined sections Modern layout packs Highly customizable row columns Row video background & blend mode Drag column resizing Shape divider/builder Device specific responsive controls Unlimited Google web fonts & system fonts Classic & gradient color and background Built-in animation Box-shadow Font Awesome 5 Icons and line icons Custom CSS Want to know all the latest news and be part of the Qubely community? Join our Facebook group! ADVANCED GUTENBERG BLOCKS INSIDE QUBELY Qubely adds numerous custom Gutenberg blocks to the Gutenberg block editor and takes Gutenberg editor to the next level. The available custom advanced Gutenberg blocks inside Qubely are: Row Button Testimonial Heading Counter Tabs Accordion/Toggle Advanced Text Video Popup Google Map Progress Bar Social Icons Button Group Info Box Advanced List Contact Form Icon List Pricing Team Image Timeline Post Grid Icon Divider Block Wrapper Pie Progress More advanced Gutenberg blocks, pre-designed sections and starter packs are coming every month! Signup on our site to receive updates via email. Pro Features (Now Free) 14 blocks that help you build more sophisticated designs- Form Builder Image Gallery Image Carousel Post Carousel Advanced Post Grid Pricing List Team Carousel Testimonial Carousel Media Card Pie Progress Countdown Table Builder Woo Products Woo Carousel QUBELY GUTENBERG BLOCKS FEATURES AND FUNCTIONALITIES IN DETAILS Row: Create a row and resize columns using mouse drag to achieve the desired layout with this Gutenberg block. Button: Design a flat, gradient or a line button on Gutenberg block editor. Set button icon and change icon position & size along with its spacing. Testimonial: Design testimonials with quote icon, message, name, designation, avatar, ratings, etcetera and set them up in the settings unlike no other Gutenberg blocks. Icon: Choose icons from the rich collection of Font Awesome and Qubely Line Icons. Apply a world of style options using this Icon Gutenberg block. Google Map: Embed Google Maps with Qubely Google Map block that gives you the controls to add map address, customize height, and zoom the map on a scale of 1 to 20. Divider: This WordPress gutenberg block plugin lets you separate content with the stunning 28 pre-designed dividers of Qubely’s Divider Gutenberg block. Advanced Text: Add advanced text with Qubely Gutenberg plugin. Apply advanced styling options. Change the typography, tweak the design and add border & box-shadow. Counter: Have an animated number/counter on your site with the Counter Gutenberg block to show your milestones in an attractive manner. Tabs: Display texts in beautiful predesigned tabs. Design tabs with preferred width and spacing. Create responsive tabs to showcase features and trends. Accordion: Place collapsible text contents on your site with the Accordion Gutenberg block. Setup items to reveal the hidden content in an aesthetic manner. Video Popup: Create a nice video popup with Qubely Video Popup block. Change the typography and apply the overlay, box shadow and animation. Heading: Create stunning titles with the advanced Heading Gutenberg block. Style heading text by tweaking typography, color, and other options. Progress Bar: Present your skills, experiences, or the progress of an ongoing project using Qubely’s Progress Bar Gutenberg block. Social Icons: Add and style all your social media profiles in one place with Qubely Social Icons Gutenberg block. Display popular social media channels with a label, icon or both. Button Group: Create and design trendy button groups. Qubely’s Button Group Gutenberg block comes with predefined layouts, size options, and more. Info Box: Place engaging information with Info Box. Choose design from the 3 predefined layouts and then personalize it with the settings. Advanced List: Get 2 list layouts- Classic and Fill in this WordPress gutenberg block plugin. Select the number of columns and design flexibly by defining space, background size, shadow and more. Contact Form: Design contact forms with 2 layouts and many other styling options. Enter receiver email right from the block settings and enable captcha. Icon List: Get 2 icon list layouts and customize them using the Qubely Icon List block. Chose icons and modify design with colour, spacing and border options. Pricing: Design pricing plans with 5 layouts. Show features, badges, and post button text in the plan. Set up the plan’s duration, typography, and style badges easily. Block Wrapper: Wrap up blocks with a background. Set up a gradient background by defining Gradient Angle and Type. Team: Enlist team members with details. Showcase member’s profile in 3 layouts. Display designation and description with the member profiles. Image: Insert and beautify images with Qubely Image Block. Get 2 layouts and style images by defining opacity, alignment, border-radius, box-shadow, and many more. Timeline: Display the timelines of various events with this WordPress Gutenberg block plugin. Showcase detailed road maps and style them with images, texts, headings, icons, and more. Post Grid: Display posts in different grid and list layouts. Define post number, style the feature image, tweak typography, control spacing, determine post excerpts, and do many more. Pie Progress: Display complex information and visualize them in circular progress with easy configuration. Choose style from available templates and make it your own. SOME EXCITING QUBELY FEATURES IN DETAILS Let’s dig deep into the exciting features of this advanced Gutenberg block plugin. PREDESIGNED SECTIONS Qubely has a rich library of pre designed sections those can be imported and used as blocks on the Gutenberg editor. You no longer need to style them from scratch. Also, With this Gutenberg plugin, you can modify their look if you ever want to. ROW-COLUMN STRUCTURE Take 1 to as many as 6 columns in a single row at a time. Get multiple combinations of columns. Most importantly, you can adjust the column size by flexibly dragging the columns. The widely used row-column concept of major page builders is with Gutenberg editor thanks to Qubely. ADVANCED ROW-COLUMN SETTINGS Apply padding and margin to columns and set column background with single color, image, and gradient. Give column border, apply border-radius, and animate columns. DEVICE SPECIFIC RESPONSIVE CONTROLS Create responsive designs with Qubely Gutenberg block plugin. Control the entire responsiveness by defining the breakpoint for small screens. Also, you can hide blocks on different devices. CUSTOM TYPOGRAPHY CONTROLS This Gutenberg page builder gives you full control over the typography. You can choose the font, apply font weight, font transform, set font size, line height, letter spacing in px, em, and percentage on the basis of the devices. Want To Contribute To The Plugin? You may now contribute to the plugin on Github: Qubely Blocks on Github
