WordPress Gutenberg WordPress is nearing it's end of the version 4.x minor release cycle. With every WordPress major update comes a big change; and WordPress Gutenberg 5.0 is going to be no disappointment in this department. What is Gutenberg? From the ...

 

WordPress Gutenberg and more...



WordPress Gutenberg


WordPress Gutenberg

WordPress is nearing it’s end of the version 4.x minor release cycle. With every WordPress major update comes a big change; and WordPress Gutenberg 5.0 is going to be no disappointment in this department.

What is Gutenberg?

From the mouths of the WP Folks:

A new publishing experience for WordPress is in the works: get ready to make your words, pictures, and layout look as good on screen as they do in your imagination, without any code.

Gutenberg is an entirely new editing experience; A completely revised post/page editing screen. Content is now organized in blocks. Custom meta-boxes (where additional post content can be entered) are now all moved over to the side while the editor fills the screen top to bottom.

Gutenberg Additional Information

You may learn more about WordPress Gutenberg on the official WordPress website.

Using Gutenberg Today

If you would like to begin experimenting with Gutenberg; head over to the official WordPress plugin repository and grab the WordPress Gutengerg Plugin.

Remember, it is strongly advised to only use this plugin on development websites and not on live/production websites.

Gutenberg Acceptance

Gutenberg is initially getting very mixed reviews; almost split right down the middle. It appears about half the current WordPress community embrace what Gutenberg offers; while the other half are extremely reluctant to the change.

You can also Read the Gutenberg Plugin Reviews.

Deactivating Gutenberg

Fortunately, for those who clearly despise Gutenberg, there is an option to disable the new functionality and restore the previous editor. Yes, it comes in the form of another plugin.

Using Classic Editor by Andrew Ozz, the older-style editor will be restored. This begs the question, “How long will this be compatible?”.

Gutenberg and WP Edit (Pro)

Obviously, Gutenberg will have a HUGE impact on WP Edit (Pro).

Initial Tests

Initial testing is very promising. Button configurations have remained intact, which means the options are still working properly. There are a few bugs with javascript and stylesheet files.

Editor buttons are also loading properly and their functionality is working correctly, which is VERY encouraging.

Backwards Compatibility

I’m sure many will be asking if WP Edit (Pro) will be backwards compatible with non-Gutenberg websites. I honestly can’t answer that question at this time. It is my utmost desire to make the plugins backwards compatible.

WordPess Gutenberg Release Date

As of the date of this writing, Gutenberg is only said to be released in 2018.

Gutenberg and Other Plugins/Themes

Gutenberg will affect thousands, if not tens of thousands, of plugins and themes. The reaches of Gutenberg dive deeply into posts, pages, custom post types, meta boxes, and many other pluggable functions available on the editor screen.

Rest assured developers are scrambling to get their plugins/themes “Gutenberg Compatible”.

Additional Information

Yoast has a great article regarding An Alternative Approach To Gutenberg.


The post WordPress Gutenberg appeared first on WP Edit Pro Knowledge Base.

      
 

Custom Buttons API


Beginning with WP Edit Version 4.0 (and WP Edit Pro Version 5.0); the WP Edit (Pro) Custom Buttons API will be introduced, allowing other WordPress plugin/theme developers to add their buttons into the WP Edit (Pro) button configuration system.

Using the Custom Buttons API will allow a user of WP Edit (Pro) to place the custom plugin or theme button in any editor row (and location) as desired.

The following article is intended for plugin/theme developers. Please do not attempt to edit code unless experienced.

Create Buttons Normally

The buttons will still need to be created normally; just like any other editor buttons. This will involve both adding the button to the editor; and initializing the code for the button.

Creating the buttons normally will also ensure they are visible in the content editor, until the WP Edit (Pro) user has a chance to visit the WP Edit (Pro) admin settings page and set the button arrangement; or if WP Edit (Pro) is deactivated.

Adding Buttons to Editor

The first step is adding the button to the editor. There are many articles on how to add a custom button to the tinymce editor; so I’ll just cover the basics.

Typically, adding a button to the editor will look like:

add_filter( 'mce_buttons_2', 'myplugin_register_buttons' );function myplugin_register_buttons( $buttons ) { array_push( $buttons, 'my_plugin_button' );return $buttons;}

Here, my_plugin_button is the name of the button being added in the editor button javscript file.

Adding Initialization Code

The next step is adding the plugin to the external plugins filter. This tells WordPress where the javascript file is located that handles the button. Again, there are many articles so I’ll just cover the basics.

add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_javascript' );function myplugin_register_tinymce_javascript( $plugin_array ) { $plugin_array['my_plugin_js'] = plugins_url( '/js/tinymce-plugin.js',__FILE__ ); return $plugin_array;}

Here, my_plugin_js is the name of the plugin being added in the editor button javascript file.
The plugins_url( '/js/tinymce-plugin.js',__FILE__ ); is the location of the editor button javascript file.

Quick View of Javascript Button Code

Just for reference, let’s see where these values come from in the javascript code used for the editor button:

(function() { tinymce.PluginManager.add('my_plugin_js', function( editor, url ) { editor.addButton('my_plugin_button', { text: 'My Plugin', onclick: function() { editor.insertContent('WP Edit (Pro) is awesome!'); } }); });})();

The my_plugin_js is the unique name of the button plugin being passed to the editor Plugin Manager. The same value is used in the mce_external_plugins filter being passed to WordPress. Finally, the button_id value in the custom buttons API must also match this value.

The my_plugin_button is the unique name of the actual button, and is the same value used in the mce_buttons_2 filter being passed to WordPress.

Custom Buttons API

WP Edit (Pro) provides a custom buttons API to allow plugin/theme developers to add their editor buttons into the WP Edit (Pro) button configuration system. This will allow end users to place the button in any desired location in the editor toolbars.

Developers can access this system by using the wp_edit_custom_buttons filter. The filter provides one argument; which is an array of arrays, each containing seven key/value pairs. New buttons can be added by appending a new array (or arrays) to the filter.

These values only affect how the button appears on the WP Edit (Pro) admin settings page; and do not interfere with how the button is displayed in the content editor.


KeyTypeValue
tooltip_title(string) (required)The title of the button; shown on fancy tooltip.
If fancy tooltips are disabled; this title will be displayed using the “title” attribute.
tooltip_content(string) (required)The content of the button; shown on the fancy tooltip.
Content accepts html tags. Wrap sentences with paragraph tags.
Use this to display a brief message regarding the functionality of the button.
button_id(string) (required)This value MUST match the name of the “mce_external_plugins” filter key used to add the javascript file for the editor button.
It is the same value used in the javascript file to create the button being used (TinyMCE.PluginManager.add(‘THIS VALUE’, …)).
dashicon(string) (optional)WP Edit includes the WordPress “dashicons” stylesheet.
This value should only be set if the button icon will be loaded from the dashicons stylesheet.
An example value might be “dashicons dashicons-editor-ul” or “dashicons dashicons-editor-ol”.
If this value is set; the “button_text” value must be blank.
custom_icon(string) (optional)This value can be used for a custom button image.
An example might be:
plugins_url() . '/my_plugin/my_editor_button/images/my_image.png'
Recommended image size is 20px by 20px.
If this value is set; the “button_text” value must be blank.
button_text(string) (optional)The text to be shown on the button.
This should only be used if the button is labled with text (no icon).
If an image is used instead (in the “dashicon” or “custom_icon” value; leave this field blank.
editor_row(string) (optional)The editor toolbar row where the button should be appended (until moved and saved by user).
Possible values are:
A) ‘toolbar1’ (string)
B) ‘toolbar2’ (string)

Text Button Example

Adding a text button simply involves passing the text of the button as the “button_text” value. Be sure to leave the “dashicon” and “custom_icon” values blank; if a text value is set.

add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => '','custom_icon' => '','button_text' => 'Test Plugin','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

Basically, we are appending a new array to the incoming array being filtered. This example will add a new button titled “Test Plugin”, and add it to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Dashicon Button Example

A WordPress Dashicon may also be used for the WP Edit (Pro) button image. Visit the WordPress Dashicons Webpage; and select which icon will be used. Next, click the “Copy HTML” link. This will display a javascript alert; containing the dashicon code.

The code for a dashicon (after clicking “Copy HTML”) will contain some extra html markup (a span container). All that is needed are the class names inside the span tag. For example, <span class="dashicons dashicons-admin-tools"></span> becomes just dashicons dashicons-admin-tools.
add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => 'dashicons dashicons-admin-tools','custom_icon' => '','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

Basically, we are appending a new array to the incoming array being filtered. This example will add a new button with the dashicon image, and add it to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Custom Icon Button Example

Finally, a custom icon can be used for the WP Edit (Pro) button image. When using a custom button; the location of the image will need to be passed in the “custom_icon” value.

Recommended image size for the WP Edit (Pro) button image is 20px by 20px.
add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => '','custom_icon' => plugins_url() . '/my_plugin/my_editor_button/images/my_image.png','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

Basically, we are appending a new array to the incoming array being filtered. This example will add a new button with the custom image, and add it to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Multiple Buttons Example

Adding multiple buttons to the Custom Buttons API is easy. Just create additional arrays to accommodate each additional editor button.

add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'test_plugin','dashicon' => 'dashicons dashicons-admin-tools','custom_icon' => '','button_text' => '','editor_row' => 'toolbar2' ); $args[] = array( 'tooltip_title' => 'Test Plugin 2','tooltip_content' => '<p>Test Plugin content 2.</p>','button_id' => 'test_plugin_2','dashicon' => '','custom_icon' => plugins_url() . '/my_plugin/my_editor_button/images/my_image.png','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

The result is two buttons being added to the WP Edit (Pro) buttons container (second row).

Custom Buttons API

Full Code Example

The full code example below can be used as reference.

add_filter( 'mce_buttons_2', 'myplugin_register_buttons' );function myplugin_register_buttons( $buttons ) { array_push( $buttons, 'my_plugin_button' ); return $buttons;}add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_javascript' );function myplugin_register_tinymce_javascript( $plugin_array ) { $plugin_array['my_plugin_js'] = plugins_url( '/js/tinymce-plugin.js',__FILE__ ); return $plugin_array;}add_filter( 'wp_edit_custom_buttons', 'wp_edit_button_filter' );function wp_edit_button_filter( $args ) { $args[] = array( 'tooltip_title' => 'Test Plugin','tooltip_content' => '<p>Test Plugin content.</p>','button_id' => 'my_plugin_js','dashicon' => '','custom_icon' => plugins_url() . '/my_plugin/my_editor_button/images/my_image.png','button_text' => '','editor_row' => 'toolbar2' ); // Important; return original filter $args return $args;}

User Experience

Let’s outline what the end-user of WP Edit (Pro) will see when the filtered buttons are applied.

Phase One

If the end-user has not yet visited the WP Edit (Pro) admin settings page to save the new buttons (or if WP Edit (Pro) is deactivated); the editor buttons will be appended to whichever editor row was used when “Creating the Buttons Normally” (detailed above).

Custom Buttons API

Phase Two

Once the end-user visits the WP Edit (Pro) admin settings page; a notice will be displayed alerting the user new buttons have been added to the container.

Custom Buttons API

Phase Three

After the user places the buttons in a new location and saves; the process is complete. The buttons will now appear in the same location in the editor.

WP Edit (Pro) Buttons Editor
Custom Buttons API

Post/Page Content Editor
Custom Buttons API

Conclusion

As illustrated above; it’s really simple to add buttons to the WP Edit (Pro) button Custom Buttons API. A single function will allow other plugin/theme plugins to add their buttons to a system which allows the end-user to place the buttons in any custom arrangement.

Notes

  • It is important to both add the button manually; and via the WP Edit (Pro) Custom Buttons API. This will ensure the button is shown in the editor even if WP Edit (Pro) is deactivated. Once the end user saves the WP Edit (Pro) buttons; the new button locations will appear in the editor.
  • When using the wp_edit_custom_buttons filter; it is VERY important to return the $args array, or else it will prevent other plugin/theme buttons from rendering.
  • If adding multiple buttons; the button_id must be unique for each button. In fact; it is a good idea to namespace the button with a unique prefix; which will prevent clashes with other plugin/theme buttons.
  • Both the Free version and the Paid version of WP Edit use the same wp_edit_custom_buttons filter. There is no need to code buttons for both plugins separately. The custom buttons will be recognized by either WP Edit version.

Help

If you would like some assistance with setting the WP Edit (Pro) Custom Buttons API filter properly; please feel free to open a support ticket on the WP Edit Pro Support Website.


The post Custom Buttons API appeared first on WP Edit Pro Knowledge Base.

      
 

Troubleshoot Blank WordPress Editor


Brief Introduction

I have been working directly with the WordPress content editor for just over three years, now. My two primary plugins; WP Edit and WP Edit Pro interact directly with the WordPress content editor, adding new and exciting editing possibilities.

In my experience I have also learned how to “break” the editor. Perhaps I entered an improper piece of code, or perhaps something inside WordPress core changed; resulting in a “broken” editor. Additionally; I am a WordPress Forum moderator and see these issues arise frequently in the forums.

Signs of a Broken or Blank WordPress Editor

There are quite a few signs which may appear with a broken or blank WordPress editor:

  1. The editor is blank (no text). Actually, the text is white and the background is white; making it “appear” blank. If you select the editor content with the mouse; you’ll see it is still there.
  2. The editor button rows are not loading.
  3. It is impossible to toggle between “visual” and “text” modes.
  4. When clicking editor buttons; they do nothing.
  5. No javascript is working on the page; for example, you can’t click the “Screen Options” tab, or you can’t reorder metaboxes on the post/page editor page.

If you are experiencing any of these symptoms, then something is not communicating properly in your WordPress environment.

Most people will recognize a broken WordPress editor after a major update; either to core or to a plugin or theme. WordPress is extremely dynamic; with ever-changing code. It is the plugin/theme developers responsibility to “keep up” with WordPress and follow their suggested best coding practices. So the first thing we want to check is making sure everything is up to date.

Updating Everything

Before we continue; it is very important to ensure all code is up to date. This includes:

  • Updating to the latest version of WordPress.
  • Updating the theme to the latest release.
  • Updating all plugins to their latest releases.

Now, manually clear your browser cache. This will “force” the browser to re-download all website content; which will include updated javascript and style sheets. The WordPress content editor is notorious for holding onto cached javascript files; sometimes resulting in a broken editor.

Check Editor Again

Now that everything has been updated; and the browser cache has been cleared; let’s check the editor again. If the editor works; Congratulations! It was a simple matter of updating the files and clearing the browser cache. You are now up to date with the code; stable; and secure. Go celebrate!!

If the editor is still not working; don’t get discouraged. You’re definitely not alone.

Recognizing/Troubleshooting a Conflict

The next step is to troubleshoot for a plugin or theme conflict (happens all the time). It is very important to follow all steps exactly as outlined below.

  1. Deactivate all plugins. Yes, ALL plugins.
  2. Switch to the newest default WordPress theme (currently 2015).
  3. Manually clear the browser cache.

Now, go back and see if the editor is working properly. 99 out of 100 times; the editor “should” be working properly now. If it is not; then something is happening which is beyond the scope of this article. Please go back and confirm the first three steps were followed precisely.

If the editor is now working properly, let’s continue.

Test the Theme

With the editor working properly; it’s time to reactivate the theme. Switch back to the theme being used before the testing above; and manually clear the browser cache. Again, go back and test the editor.

If the editor is not working properly; the issue is with the theme. Please file a support ticket with the theme author/vendor.

If the editor is still working properly; the theme is good, and we can continue.

Testing Plugins

Here is where the issue typically happens. In most of my experience; a broken content editor can be attributed to a plugin. It may be using outdated code; hasn’t adjusted to a change in WordPress core; or is simply broken.

So, let’s begin testing plugins. Different methods can be used depending on how many plugins are installed; but here is my suggestion:

  1. Reactivate a few plugins (2 – 3).
  2. Manually clear the browser cache.
  3. Go back and check the editor.

If the editor loads properly; those plugins are good. Repeat the steps above until the editor breaks again.

If the editor breaks; one of those plugins is faulty.

The idea is to keep reactivating/deactivating plugins until we narrow down exactly which plugin is causing the editor to break. Once found; we can notify the plugin author.

What Next?

Once you have identified the faulty plugin or theme; it would be great to notify the developer. See if you can find the plugin/theme support channel, and create a support ticket. Remember; the developer may not be aware of the issue, so be nice.

It is extremely rare the editor would not work properly with all plugins deactivated and using the default WordPress theme.

However, if when deactivating all plugins and switching to the default WordPress theme; the content editor is still not loading properly; then please create a support ticket in the WordPress Forums. Link to this article so the moderators/volunteers can see we have tested everything properly.


The post Troubleshoot Blank WordPress Editor appeared first on WP Edit Pro Knowledge Base.

      
 

Styles & Scripts


WP Edit Pro now provides an interface for users to enter custom styles and scripts. There are two options for setting up styles and scripts:

  • Globally – from the WP Edit Pro settings page (Posts/Pages tab). These styles and scripts will be executed on ALL posts and pages.
  • Individually – from the post/page editor screen. These styles will ONLY be executed on the page where they are entered.

Global WP Edit Pro Styles & Scripts

Setting styles and scripts on the global level will execute the code on all posts and pages. This is best used when a style or script will be used on multiple (if not all) posts and/or pages. Instead of having to enter it multiple times on each post or page; simply enter it in the global section.

global_styles_scripts_settings

Remember; these styles and scripts will be loaded on all posts and pages.

Individual WP Edit Pro Styles & Scripts

Another option; is setting the styles and scripts on a per post/page basis. This allows custom CSS to be entered for each post or page. This option is best used when separate custom styles or scripts are needed for each post or page.

Enable Individual Post/Page Styles & Scripts

The setting to enable individual style and scripts can be found on the WP Edit Pro settings page (Posts/Pages tab).

ind_scripts_styles_main

Individual Post/Page WP Edit Pro Metabox

Once the setting has been enabled; the WP Edit Pro Scripts and Styles metabox will appear on each post/page; beneath the content editor.

post_page_metabox1

Individual Styles

The styles entered here will ONLY appear on the same post/page where they are entered.

Individual Scripts

The scripts entered here will ONLY appear on the same post/page where they are entered.

Body Classes

This option will allow the user to specify additional classes that will be added to the body HTML tag.

Post Classes

This option will allow the user to specify additional classes that will be added to the post HTML tag.

Styles & Scripts Page Output

When adding custom styles and scripts; it’s important to understand where they will appear in the final page output. The current coding “best practices” is to place custom styles in the head of the document; and custom scripts in the body of the document.

Custom Styles Output

Custom styles will be output in the header of the document; just before the closing head HTML tag.

Global custom styles will appear as follows:
global_page_styles_output

Individual custom styles will appear as follows:
ind_page_styles_output

Custom Scripts Output

Custom scripts will be output in the body of the document; just before the closing body HTML tag.

Global custom scripts will appear as follows:
global_scripts_output

Individual custom scripts will appear as follows:
ind_scripts_output

Notes to Remember

A few important notes to remember when using styles and scripts.

Order of Priority

Because some people may want only global styles or scripts; and some people may only want individual styles or scripts; and some people may want both…. there is an order of priority.

  • Global styles and scripts will appear first in the final code output.
  • Individual styles and scripts will appear next; after global styles and scripts (if they exist).
  • If no global styles and scripts exist; and no individual styles and scripts exist; then no code will be output.

Individual Styles & Scripts Functionality

The individual styles and scripts; and their associated functions; will ONLY execute if the option is set on the WP Edit Pro settings page (Posts/Pages tab).

If the option is not set; then none of the individual styles and scripts will be executed; even if they are already saved in the post/page settings.

Admin Only Individual Scripts

Because of the sometimes sensitive nature of WordPress; running scripts should most often only be performed by trusted users. For this reason; only administrators (or more specifically; those with the “manage options” capability) will be able to edit/insert scripts on individual posts and pages.

Data is Embedded… Not Linked

The styles and scripts are embedded into the final page output; they are not linked to externally.

No Input Validation

There is no input validation. The code is applied exactly as it is entered in the options areas.


The post Styles & Scripts appeared first on WP Edit Pro Knowledge Base.

      
 

Dropbox Create Web Application


In version 3.6 of WP Edit Pro; the Dropbox button was introduced. In order to use the Dropbox button; a web application must first be created.

This post is intended to walk through the process of creating said Dropbox web application.

Create Drobox Web Application

The first step is to visit the Developers Applications section of Dropbox. A new account will need to be created if one doesn’t already exist.
dropbox_login

Once an account has been created; click the “App Console” link in the left navigation menu.
app_console

Create Application and Select Name

Next, click the “Create App” button in the upper right hand of the screen.
create_app

Next, check the “Drop Ins” option.
drop_ins

Now a name must be selected for the application. Choose a unique name; that is easily recognizable.
app_name

Finally, click “Create App”.

Obtaining Application Key

Once the application has been created; the next screen will show details of the newly created application. Among these details; is the “App key”.
app_key

Copy the “App key”; and paste it back into WP Edit Pro (Editor tab), under the Drobbox “App key” option.
dropbox_settings

Lastly, enter the domain of the website where the dropbox files will appear (your site url) into the “Drop-ins domains” option field. This is necessary to connect successfully to the Dropbox API and pull the files to the website.

Congratulations! Dropbox is now successfully configured.


The post Dropbox Create Web Application appeared first on WP Edit Pro Knowledge Base.