FibroJedi's Sticky Preview and Publish Buttons

Descripción

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.

The plugin uses minimal code and only a little CSS. Buttons and the tab use default WordPress admin CSS classes.

Version 1.2.X Additions

  • New Option: Normal or Compact Mode.
  • 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!
  • Added Twitter/X 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 Twitter (@FibroJedi) or message me at facebook.com/fibrojedi.

Features In-Development

Internationalisation/Translation
I am slowly working on adding the functions needed to translate this and make it useful to non-English speakers. Please bear with me. I’m currently tagging the strings, which should give no discernable problems. Until I figure out the .po/.pot files anyway.

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.

Capturas

  • FJ-SPPB on an already-published page or post: Just the preview and update buttons.
  • FJ-SPPB on a post or page draft. "Update" button is now "Publish" and the "Save Draft" button is active.
  • The new Settings list to customise your tab.
  • Compact Mode sees your tab take up even less space and be just as handy!
  • Customise your Sticky Tab, try new features

Instalación

  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.

Preguntas frecuentes

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.

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.

Reseñas

2 de agosto de 2023 3 respuestas
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
12 de febrero de 2023 1 respuesta
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!
Leer la 1 reseña

Colaboradores y desarrolladores

«FibroJedi's Sticky Preview and Publish Buttons» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

Registro de cambios

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.