Save place in markup when previewing changes

  • Whitegoodshelp

    (@whitegoodshelp)


    7 years, 7 months ago

    Hello this is a feature request. When I am creating or editing one of my pages I do so in the source text editing window. Each time I want to preview a change, which admittedly is probably every 30 seconds to a minute for me, I have to scroll up to the top of the page. From there I click preview changes.

    This opens a preview in a separate tab and I can admire my work. But then getting back to where I was in the source code is ludicrously awkward. I have to go back to the original tab. And then scroll all the way down scanning all of my markup trying to find the point where I was editing. Having to do this hundreds of times in a day puts a serious damper on my workflow.

    Surely there is a better way? It would be wonderful if someone could enlighten me. But if not, please can you create a way to edit markup halfway into a long page, and then quickly preview changes and go back to the exact point they were editing.

    I generally think this would improve workflow for anyone not just me.

    Andy

    PS. I’ve tried just switching to the preview tab and refreshing the page. But because the new changes have not been saved, the preview page will not fetch the new version.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 7 months ago

    Thank you for the thoughtful suggestion! It may not surprise you that incorporating suggestions can take a long time, if adopted at all. In the interim, implementing your own solution would be useful.

    You can alter the preview button’s CSS so it floats with your scroll position. For example

    #preview-action {
	position: fixed;
	z-index: 99;
	right: 0;
	top: 70px;
}

    Rather crude, but useful. You can cause custom admin CSS to appear inline as described in the admin_head action doc page. Such code can go in your theme’s functions.php, but it will be overwritten on updates. To keep it safe, add it to a child theme or a custom plugin.

    Thread Starter Whitegoodshelp

    (@whitegoodshelp)

    7 years, 7 months ago

    Many thanks. That sounds like a great workaround. I was going to add that if only the preview button could be accessed without having to scroll back up to the top of the page it would be a big help.

    I’m just not sure exactly how to get it to work. I just clumsily pasted your code into my child themes functions PHP file which brought the site down. Then I realised it is CSS and should be in a stylesheet. Doh! Then I pasted the entire code from the linked site into functions PHP file and that also brought the site down.

    I would very much appreciate a more specific instruction. Presumably I paste the CSS code into my child themes stylesheet? But what exactly would I need to put into the child themes functions PHP file?

    Many thanks

    Andy

    Moderator bcworkz

    (@bcworkz)

    7 years, 7 months ago

    Because we are styling the admin area, the simple style.css approach will not work for us. That’s why we need the PHP code to place the CSS in the admin header. This should do it:

    // Add inline CSS in the admin head to alter preview button placement
function my_custom_admin_head() {
  echo '<style>
    #preview-action {
      position: fixed;
      z-index: 99;
      right: 3px;
      top: 70px;
    }
    </style>';
}
add_action( 'admin_head', 'my_custom_admin_head', 50 );

    Simply add this to the end of functions.php, assuming there is no closing ?>. Best practice on functions.php is to NOT have it. It helps prevent hard to find “headers already sent” errors.

    You can adjust the right and top dimensions to tune the placement of the button if you like.

    Thread Starter Whitegoodshelp

    (@whitegoodshelp)

    7 years, 7 months ago

    Many thanks bcworkz. That is literally the most useful and important modification I’ve ever found. It will massively improve my workflow from now on. I genuinely cannot understand why it is not designed like that. I can’t imagine I am unique in being constantly frustrated by having to re-find my place after previewing changes.

    Admittedly I get a bit obsessive about previewing changes. I like to preview changes after virtually every change. So I’m probably a bit excessive but most people would find something like this useful. I’m extremely grateful.

    I’m now wondering whether it would be possible to have the save button do the same? I have disabled autosave. I like to save manually regularly, but only after previewing the changes to ensure I’m happy. So if the save draft button was to also follow my scrolling it would be a perfect fix.

    Moderator bcworkz

    (@bcworkz)

    7 years, 7 months ago

    Believe it or not, much time is spent in usability studies to determine what works best for most people. The thing is, most people tend to not write extensive pages. I think you would agree that you are not like most people 🙂 I’m not either, I’ve run up against the exact same thing myself in composing sizable pages. As soon as you mentioned it in your OP, I knew exactly what you were talking about. Been there, done that.

    Yes, the save/update button can float as well. I’m rearranging the CSS a bit to keep it concise. Replace everything within the <style> tags with this:

        #preview-action, #publish {
      position: fixed;
      z-index: 99;
      right: 3px;
    }
    #preview-action { top: 70px; }
    #publish { top: 105px; }
    Thread Starter Whitegoodshelp

    (@whitegoodshelp)

    7 years, 7 months ago

    Many thanks. I’m presuming that floats the publish button. When I’m ready to publish I don’t mind going to the top of the page because I have finished editing. The 2nd button that I would find extremely useful to have floating is the save draft button.

    I’ve just tried to work it out myself, but struggling. I like the 2nd button, especially the different CSS styling. But could you just finally tell me what to amend so that I have the save draft button floating instead please? I probably preview and save draft hundreds of times whilst composing a long article, so these are the ones that will revolutionise my working environment.

    Once again many thanks for your extremely useful help.

    Andy

    Thread Starter Whitegoodshelp

    (@whitegoodshelp)

    7 years, 5 months ago

    The new Gutenberg editor has the feature I wanted 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Save place in markup when previewing changes’ is closed to new replies.