How to make the Preview button automatically open new tab?

The Preview button and associated functionality is currently undergoing a fair amount of iteration – I would imagine we will see a keyboard shortcut added, along with other options for modifying it’s UI down the road.

A Big Hack

Interestingly, the old direct-preview button’s component is still rendered, but is hidden on a > 600px media query. We can reveal the button again with a little CSS:

.edit-post-header__settings .editor-post-preview {
    display: block;
}

I wouldn’t rely on this working indefinitely, however.

A Little Hack

For now, the most canonical solution would probably be to register a block editor plugin which renders a new <PostPreviewButton> component as a child of a <PinnedItems> slotfill.

It should be noted that doing this directly undermines the UX design for the <PinnedItems> slotfill and area, which is intended to show buttons for functionality which the user explicitly opts in to. Thus, were this to be distributed in a plugin, it would be a good idea to associate it with a toggleable editor setting.

Related Posts:

  1. Disable device preview options in the block editor
  2. How do you manage the Gutenberg block previews in the admin area?
  3. Deactivate Gutenberg tips forever – not Gutenberg
  4. How do I register multiple blocks with block.json and register_block_type_from_metadata?
  5. Disable Gutenberg text-Settings in all blocks
  6. gutenberg block – how to force update after attribute changed?
  7. How can I add a custom attribute to Gutenberg core blocks?
  8. Add additional classes to gutenberg .editor-styles-wrapper
  9. How to use the WordPress < LinkControl /> Component
  10. Remove border radius setting from the Gutenberg button block?
  11. Add PHP block template to content using wp_insert_post
  12. Gutenberg reusable blocks – is it possible to customise an instance?
  13. Dynamic gutenberg block with react instead of php
  14. File structure and react setup when creating multiple Gutenberg blocks
  15. Gutenberg moving core blocks between categories
  16. Reset data when the field is cleared
  17. Is there a hook or filter yet for Gutenberg Block Editor to not auto-add Noreferrer to links with a target?
  18. How to remove specific panels in the editor (Gutenberg) when editing a block (via right panel)?
  19. Is it possible to use to create a “switchable” preview of a Carousel Gutenberg block?
  20. What is the significance of ‘root’ in getEntityRecords?
  21. How to Disable Gutenberg & Return to the Classic WordPress Editor Without any Plugins
  22. Gutenberg default value not saved in json
  23. Gutenberg default initial values for FocalPointPicker
  24. Pre-set CSS class into custom block/template
  25. How to check whether Gutenberg editor is installed or not [duplicate]
  26. How to align a single Gutenberg block button in WP 5.5.3?
  27. Is it possible to print the output of a Gunteberg block with no classes?
  28. How can you reset InnerBlock content to base template?
  29. Gutenberg Multiple InnerBlocks
  30. How can we mimic the columns block in Gutenberg to instead be a list?
  31. How to set Gutenberg preferences programmatically with wp.data.dispatch?
  32. Dynamic Gutenburg block output echoes in WP Dashboard
  33. Are gutenberg blocks ideally supposed to look the same in both back-end and front-end?
  34. How to output child block attributes on a parent block
  35. Is there a better way to to make async API calls using the @wordpress/data module?
  36. How can I center Gutenberg buttons on mobile?
  37. Extend the “core/link” Block Format
  38. Passing settings from Reusable Block to it’s children
  39. Gutenberg element: How to usw Rangecontrol with two values to imitate a rangeslider?
  40. Is there any simple way to remove Gutenberg editor H1 H5 H6 and change the label for the rest H2 H3 H4?
  41. Deprecated for blocks.getSaveElement
  42. WordPress filter post content with PHP before editing it in Gutenberg
  43. Pass PHP vars to gutenberg sidebar
  44. Suggested image dimensions Gutenberg Hook
  45. How Add New Button to Gutenberg Editing Toolbar
  46. How to force gutenberg to reload blocks after saving
  47. Update a block template and apply those changes to an existing post/page
  48. Custom block save does not match due to stripped slashes from br tag and added figure tag around images
  49. How to disable align-wide for specified blocks in Gutenberg
  50. Deprecated function not working in Gutenberg
  51. Gutenberg Block checkbox check-unckeck does not work
  52. WordPress npm run build and start only outputs wp-scripts start but does nothing
  53. Gutenberg get index of gutenberg innerblock
  54. Custom Endpoint API based on attribute gutenberg block
  55. Gutenberg : how can I get the title of the current block within its ‘edit’ function?
  56. Gutenberg – Remove add block button
  57. how can default_content filter tell if content will load in block editor or classic editor?
  58. Gutenberg programmatically move block to position
  59. Gutenberg somehow not loading in WP 5
  60. Gutenberg block – remove setting for core/file
  61. Gutenberg JavaScript error
  62. Gutenberg selecting child blocks directly from appender
  63. Image not aligning with text
  64. Custom validation on publish/ update in Block Editor
  65. WordPress Gutenberg – Open the “Block Pattern Explorer” programmatically
  66. Modify src attribute on image block
  67. Two text color palettes are appearing in Gutenberg
  68. WordPress Gutenberg – Sidebar get posts list based on selected category
  69. Gutenberg button removed on save if its empty
  70. Gutenberg build error: You may need an appropriate loader to handle this file type SCSS
  71. Gutenberg: How to constrict floated table blocks to 1000px width in the front-end, when align wide & full are being used?
  72. Quasy – modal component does not hide itself
  73. Table block – Wrap table
  74. ResizableBox component is not selectable in block editor
  75. Whitelist a single SVG for use in post_content
  76. Gutenberg block previews suddenly not working
  77. WordPress Gutenberg Signal on Block Alignment Change
  78. When to use block patterns over nested blocks?
  79. How to convert block to a list block in WordPress gutenberg editor?
  80. How to do store, retrieve and write attributes in the registerFormatType method in Guttenberg?
  81. How can I create more advanced layouts in Gutenberg block editor?
  82. How to replace the Gutenberg default block with a custom block?
  83. how to disable a button added by a plugin in gutenberg toolbar?
  84. Images are not shown in the post editor
  85. Updating failed message when a wp_insert_post function is hooked to save_post hook
  86. Get post ancestors in the Block Editor
  87. Prevent FormTokenField component to accept random entries
  88. How to move the customizations done in the Editor to my child theme?
  89. Unable to see the attributes for the custom block created
  90. Change Featured image location from side to normal using react (gutenberg)
  91. Get postId in a wordpress pattern file?
  92. Remove placeholder from core/image in InnerBlocks template
  93. Gutenberg block not displaying prop values
  94. ACF InnerBlocks breaks css grid, How can we add classes to allowedblocks (WordPress Gutenberg)
  95. How to disable block directory?
  96. Adding custom link text to a URLInputButton
  97. Rearrange order of block into a block category gutenberg
  98. Gutenberg Block Deprecation – Handling old viewScript and styles
  99. Resaving posts to update static blocks
  100. How to dynamically add style tags to Gutenberg editor in react

Leave a Comment