FibroJedi's Sticky Preview and Publish Buttons

Description

Stop scrolling back up to the Publishing buttons on large screens! Or stop having to scroll down a long way on smaller screens!

FJ-SPPB creates a Preview and Publish/Update Button in post editor that scrolls down the screen as you scroll, saving you time and annoyance.

Customise your tab to work your way and even decide how the buttons function.

Other Features

• Normal or Compact Mode.
• Set the border colour of the tab. This also reflects in the options panel’s UI.
• Choose post types and post formats you do not want the tab to appear on. For example, on a Video or an Aside format, where it doesn’t really help!
• Mastodon/Fediverse link on the plugin’s screen so you have a point of contact as I don’t publicise an email address.

Need Help or Have Ideas?

• Use the thread on the plugin page
• Or reach out to me on:
  • Mastodon: @[email protected]
  • Twitter: @FibroJedi
  • Facebook

Known Issues

• As mentioned, this has not been tested with Gutenberg. If you want to do this and let me know what code changes I need to make, I’ll credit you once I implement it.

Screenshots

Installation

1. In your WordPress Admin, go to “Plugins → Add New` and search for FibroJedi.
2. Click/tap Install
3. Click/tap Activate

Alternatively:
1. Upload the whole plugin folder to your /wp-content/plugins/ folder.
2. Go to the Plugins page and activate the plugin.
3. Your new tab will appear on the right hand side whenever you edit a post or page.

FAQ

Where is it intended to be used?

FJ-SPPB is a back office plugin and has not been tested with Gutenberg features. Others are welcome to modify it to suit their needs. But I originally made this for me, and I use Classic Editor, so that’s its main focus.

What Does It Do?

This tiny plugin’s primary role is to create a tab on the right hand side of page/post editor, containing the key “publishing” actions that usually sit at the top of the editor. As you scroll down the page – or writing your content makes the page longer – FJ-SPPB scrolls with you.

Does This Affect/Replace the Default “Publishing Actions” Widget?

Nope. The tab is in addition to it so you can control where your interface items go.

Other Features

As I made this for myself originally, there are a few other features, most of which can be switched off if you do not want them:

• Word Count at the last save/publish action.
• Close for Now: depending on your window size, this will either be a [X] or a circular (X) symbol. This hides the tab until the next save/publish action.
• Confirmation Dialog: get prompted when pressing [Save Draft], [Update] or [Publish]. You can enable/disable this in options.

How Does It Work?

FJ-SPPB does not run the code to save, update or preview your posts. Instead it simulates a click on the default buttons. Thus, what you would expect those ones to do, FJ-SPPB does. See it as a handy shortcut or scrolling bookmark!

Are there any options?

Yes! Under the Settings menu, look for Sticky Preview Buttons. There you can set:
* Colour Option! The first personalisation option has arrived: setting the border colour! Just choose from the colour pallet in options.
* Compact Mode: In case off-screen still takes up too much screen-space, you can now enable Compact Mode for a slimline tab.
* Enable per Post Type the tab is not necessarily helpful for all your post types. You can now show it on only the types of content where you need it most.
* Word Count: Show the approximate word count of the current article/page based on the previous save.
* Positioning: Decide how far down the screen you want the tab to appear.
* Opacity of the tab when a cursor is not over it.
* Publish/Update Confirmation option, so you have a second or two to be sure of the updates you’ve made.
* Enable Beta Features: sometimes issues can’t be properly tested until others do it. Enable Beta Features tells you what the current “thing” is and lets you opt in – and out again.

Features Planned

• Exclude Shortcodes from Word Count: Currently, SPPB expands most shortcodes before calculating the estimated Word Count. But you may not want all shortcodes excluded.

I’m open to suggestions on future features, but it already does what I wanted it to. I didn’t want to overdo the settings. It might be other features would be better done as add-on plugins.

Reviews

Neatly solves the laptop real estate problem

bidmead August 2, 2023 3 replies

Working with WordPress on a 13″ Framework notebook as I do when writing for Tested Technology, it’s practically mandatory to set the screen options to single column to make the most of the limited screen real estate. But if you do this, the control buttons you need (occasionally) to Publish or Update, or (very often) to review the Preview are no longer to hand in the second column and are generally out of reach most of the time. This strikes me as a design shortcoming in WordPress and one I’ve sought to solve through a variety of approaches over the course of more than a year. FibroJedi’s plug-in is the fix I was looking for. I run it with 10% opacity, 70% from the top so that it’s always handy but not in the way. Ideally, I’d like to be able to make its dialogue box smaller and place it with a little more granularity. But as it stands it’s changed the way I work with WordPress. I’m very grateful. — Chris

WOW! Just want I always wanted!

trishahdee February 12, 2023 1 reply

I use Advanced Custom Fields (ACF) on practically every WordPress site I create. I recently created an Option page with a Repeater field that was getting very long. The Submit button is way at the top of the page so I would add a row at the bottom and have to scroll up to the top to submit. UGH! This plugin added a Submit button in the top bar so it’s always available no matter how long the Option page gets. Fantastic time saver!

Contributors & Developers

Changelog

1.4.4

• [Fix] Error with links on the Plugin page, which may have affected some users.
• [Fix] Wrong button size loaded in compact mode.
• [Tweak] Minor update to allow future changes to your tab depending on the mode you have chosen.
• [Tweak] Reduced opacity on disabled post types (where you chose not to have the tab) for visual clarity on enabled ones.
• [Tweak] Disabling post types (for the purposes of hiding the tab) shows reduced opacity. Enable again for Bright-Green-ness!
• Compatibility with WordPress 6.7.0
• [Fix] Sorted out my brain melt over versioning and version numbers should now be consistent everywhere.

1.4.3

• Compatibility with WordPress 6.6.3
• [WIP Bug Fix] ensuring that OpenGraph, Title and Meta Description all save in RankMath, when the SPPB save method is “direct” not “simulated click”.
• [Fix] Updating the links on the Plugins page to make sure they open in a new tab.

1.4.2

• Fixing the Short Description field required by the plugin repository. Well, I say “fixing”, but this is my third
  attempt. My apologies for the multiple updates and inconvenience I’ve caused.

1.4.1

• Adjustment to plugin tags and other header data.

1.4.0

• Compatibility with WordPress 6.6.1: Sorry this took so long to confirm. If you spot any issues, please do report them.
• [Fix] Compatibility with “Dark Mode for WP Dashboard”: Options page is readable if you have this plugin installed and have not disabled Dark Mode in user options.
• Minor text alterations on the Settings page.

1.3.4

• Compatibility with WordPress 6.5.5: Apologies for missing 6.5.4!

1.3.3

• Compatibility with WordPress 6.5.3: I cannot see any errors or issues, but if you do, please do reach out so I can fix them. Thanks!

1.3.2

• Apparently, the plugin system didn’t like me trying to use four numbers for versioning. So I’ve this 1.3.2.
• Bug Fix: display issue in Post Type list on the Settings Page.
• Updated reference to the stylesheet: the new CSS is always (and only) downloaded when the plugin is updated.

1.3.1

• Bug fix: background colour for the ‘success’ notice when saving settings. Please do a hard refresh of the settings page as for 1.3.0.

1.3.0

• People using “Light Mode” or a lighter admin theme should be able to read the options page again. Whoops, sorry.
• The options page also displays in a readable format if using a “Dark Mode” browser extension. I tested on Dark Reader. I am not affiliated with them and others are available.
• The Options page information bar wraps under the options table at certain window sizes. It doesn’t squash in any more.
• As these changes involve CSS, please do a hard refresh of your browser while on the SPPB page.

1.2.9

• Changed Twitter contact information to Mastodon/Fediverse. I will still occasionally check Twitter, but cannot guarantee how quickly.
• Tested to WordPress 6.5.
• Fixed incorrect version number showing on settings screen. Whoops.

1.2.8

• [Bug Fixed]: corrected a hilarious case of the estimated word count being 2-3 times higher than it should have been.
  ** There are still minor differences between what the in-built editor says and my calculation due to how symbols and numbers are interpreted.
• Compatibility with WordPress 6.4.1 confirmed.
• Removed various PHP and HTML comments.

1.2.7

• Note: Compatibility with WordPress 6.4
• [Bug Fixed]: Undefined variable error in compact mode, when the option to show tooltips was set to ‘No’.

1.2.6

• [New Option] Choose whether the Update/Publish button simulates a click on the default WordPress button, or whether it saves the post.
  ** This was introduced to enable you to save posts via SPPB even if another plugin conflict interferes with the default Update/Publish button.
• [CSS] Button spacing in Compact Mode increased. (I put some in…)

1.2.5

• [New Feature] Compact Mode: have a minimal tab that contains just the ‘core’ buttons and nothing else. Keep it simple, keep it small.
  ** If you had Word Count shown on the normal tab, you can view it by hovering your cursor over the “Update” button.
  ** You can switch between modes in Settings.
• [New Function] Proper Uninstall Function: all options are now deleted from your database when you remove the Plugin. Deactivation does not delete your settings.
• [New Function] Initial welcome notice sent on activation. All being well, this should be a once-per-installation deal!
• [Animation] Default Animation updates:
  ** Changed the animation CSS inline with cross-browser compatibility and “composited” animations.
  ** They should be smoother too.
• [Settings] When changing the border colour of your tab in settings, the ‘glow’ around the settings changes too.
• [Settings] Alternate rows coloured differently for clarity.
• [Settings] Added more “Distance from the Top” options. You can now choose a multiple of 5, rather than just 10.
• [Bug Fix]: preventDefault() typo when being asked to confirm the closure of the tab.
• [Tweaks] Moved the default off-screen position further off-screen. This prevents overlapping other widgets in that part of the post editor. It was annoying me, so I guess it annoyed others too!
• [Tweaks] Increased the width of the border so as to make it more obvious now the tab is further tucked away.
• [Tweaks] Attempts to prevent you setting a “top” value of over 80% if you’re in Normal Mode. If you have this to >80% then the tab may not fit on your screen.
• Update compatible with WordPress 6.3.1
• [Beta] Enable beta mode in Settings if you want to test it out.
  ** Changed animation method to prevent browser errors about CSS animations.
  ** To avoid the scrollbar conflicting with the mouseover intent of the tab, scrolling is disabled until your cursor it out of or away from the tab.

1.2.1

• Tested, and updated description to mark compatibility with WordPress 6.3.

1.2.0

• Stylesheet tweaked: Doing a “hard refresh” of the settings page should be sufficient to update it.
• New Option: Set the border colour of the tab. This also reflects in the options panel’s UI.
• New Option: choose post types and post formats you do not want the tab to appear from. For example, on a Video or an Aside format, where it doesn’t really help!
• Typos corrected.
• Removed an old word-count function.
• Removed comments/test code that sneaked in from betas past.
• Added Twitter/X link on the plugin’s screen so you have a point of contact as I don’t publicise an email address.

1.1.5

• The blue action button now reads differently depending on the status of the post: published (and public), private, draft and password-protected. This is just for clarity of labelling – the functionality has not been changed.
• Added a confirmation to the circular X button. This just ensures you don’t close the tab accidentally. (It will return on the next save/publish or reload action if you do!).
• Bug Fix: “Headers already sent” error should no longer be a plague. If you’re getting this, please open a help thread as it may be a plugin clash.

1.1.0

• Support added for other post types. Previously this was done by specifying which ones to allow. This makes the default behaviour that it appears for all custom post type, for example.
• Currently disabled on post formats, where I think it’s an unnecessary process for your system: e.g. link, aside, chat etc. If you’d like to see this as an option, please let me know.

1.0.3

• Tested up to WordPress 6.2
• A note in the plugin file (line 80): You can change the items in the array to include shortcodes you wish to be removed before the Word Count is calculated. For example, tables of contents. I will make this an actual plugin option, hopefully in the next version.

1.0.2

• Tested, tweaked and verified with WordPress 6.1

1.0.1

• Minor Bug Fixes.

1.0

• Proper release! Minor bug fixes, text updates and settings page amendments.

0.6

• [Bug Fix] Word Count now expands shortcodes, then strips the HTML tags, making its estimate far more accurate.
• [New] Quick link to skip to the main custom fields panel. I will add an option to disable this in due course.

0.5

• Sliding Effect put into options, so that, if you have a resolution of >=1200px you can keep it visible rather than have it slide away.
• [Bug Fix]: The (X) link was hiding the button area inside the tab, but not the whole tab. This has now been fixed.
• [Update]: The word counting method has been rewritten and is now much closer to the number given in the editor.

0.4

• [NEW] (Screens/Resolution >= 1200px) FJ-SPPB now slides off to the right so it’s not overlapping metaboxes. Hover over it to use buttons and it’ll slide back when you’re not hovering (the cursor, not you). Animation done through CSS so is browser-dependent, but most modern browsers should be fine with this.
  Next Version: I will make this an option within FJ-SPPB’s settings.
• [Formatting] Reduced the link to settings to the same font size as the word count. Added space between those two (relevant only when both are enabled in settings.)
• Checked compatibility with WordPress 5.9
• [Bug Fix] Switching the [Settings] link off did not work in some cases. This has been fixed.

0.3

• New Options for the Sticky Tab!
  ** Show/Hide Word Count
  ** Show/Hide link to Settings
  ** Set distance from the “top” of the screen from 10% to 80%. Higher than 80% not available in case it gets pushed off the screen.
  ** You can now set an opacity for the tab, which lets you see other metaboxes behind it. Opacity will always be 100% when your cursor is over it. Users of tablets or other touchscreens where you choose not to use a mouse/trackpad should keep this at its default of 100%;
• [X] link to close the tab until next save/publish action, now appears as a blue circle on the right on resolutions >=1000px to make it more intuitive. <1000px screens will get the lightweight [X] as before.

Note: “top” is calculated from the top of the top meta box, rather than the top of the screen, so that you don’t cover up Screen Options, Help etc in the top bar.

• Added link to SPPB settings in the Plugins list.
• moved the ‘top’ attribute from the external CSS and added it inline.
• [Bug Fix] Activation error in some cases. Apologies, that one’s my bad. All tested and working now.

0.2.5

• Bug Fix: [Save Draft] button now correctly appears in the tab on new pages or posts that have not yet had an actual official draft saved (post_status = “auto-draft”). This has been tested and works as intended.
• Bug Fix: [Preview] no longer attempts to preview a new post that does not yet have a title/assigned permalink. This prevents an error 404. Once the title field is completed, [Preview] continues as normal.

0.2

• Added word count estimate. Not because I thought others needed it, but I did.
  ** It is intended to set this as an optional extra in a future release rather than on by default.
• Confirmation dialog when using the [Update] and [Publish] buttons. This does not affect the functionality of the default buttons at the top of the editor.

0.1.5

• Added [Publish], [Update] and [Save Draft] buttons
• Added the “hide for now” link.

0.1

• Initial Version with just the [Preview Changes] button
• Retroactive Patch: Updated function names with fibrojedi_ prefix as opposed to fj_ per guidelines.