Skip to main content

Print Button

Released in version 1.17.1

The Print Button block opens the browser print dialog for either:

  • the full page, or
  • a specific section of the page selected with a CSS selector.

It is designed to be:

  • Editor-friendly: the block uses a native Gutenberg Button, so styling is handled with the normal Button controls.
  • Flexible: you can leave it as a standard page print button or target a specific content area such as #main-content or .article-body.

What this block creates​

When you insert Print Button, it creates a nested core block structure:

  • core/buttons
  • core/button (inside the Buttons block)

This means you are styling a real Gutenberg Button, not a custom button UI.

Why this matters

All the normal Button settings are available because the visible button is a native core/button.

Field​

This block adds one custom option in the block sidebar.

Target Selector (Optional)​

Use a CSS selector to limit printing to a specific part of the page.

  • Example: #main-content
  • Example: .article-body
  • Default: empty

If this field is left empty, the block prints the full page.

If a selector is provided, the frontend script attempts to find the first matching element with document.querySelector() and print only that element.

In the editor, the current selector is also shown below the block as a small preview label.

How scoped printing works​

On the frontend, clicking the button does not navigate anywhere. Instead, the block intercepts the click with JavaScript and opens the browser print dialog.

Full-page printing​

If Target Selector is empty, the block simply calls the browser print dialog for the full page.

Section-only printing​

If Target Selector contains a valid selector and an element is found:

  1. The block adds temporary helper classes to the page.
  2. Everything on the page is hidden for print.
  3. The matching target element is made visible.
  4. The browser print dialog opens.
  5. The temporary classes are cleaned up after printing.

This allows the block to print only one section without requiring a separate template.

Fallback behavior​

If the selector is invalid for the current page or no matching element is found, the block falls back to printing the full page.

This prevents the button from failing silently.

Styling and configuration​

Because the block contains a native Button, you can configure it normally using the standard Gutenberg UI:

  • Button style
  • Colors
  • Typography
  • Border
  • Spacing
  • Width
  • Alignment and layout through the outer Buttons block

The default button text is Print, but you can change the button label using the normal Gutenberg Button editing controls.

Example use cases​

Print the whole page​

Leave Target Selector empty.

Use this when you want a standard print action for the current page.

Print just the main article​

Set Target Selector to something like:

  • main
  • #main-content
  • .single-post-content

This is useful when the page includes headers, sidebars, utility links, or related content that should not be printed.

Set Target Selector to a more targeted selector such as:

  • .event-details
  • #invoice
  • .program-overview

This is useful for pages with a dedicated printable region.

Troubleshooting​

This is expected.

The block intentionally forces the nested button link to # and handles printing with JavaScript.

It printed the whole page instead of my selected section​

Usually this means the selector did not match anything on the rendered page.

Check that:

  • the selector is valid CSS
  • the selector exists on the frontend, not just in the editor
  • the selector matches the first element you expect

If no match is found, the block falls back to a full-page print.

The printed section layout looks different than the screen layout​

This can happen because browser print styles differ from screen styles.

If needed, add theme or custom print CSS to improve the printed result for the targeted section.

Technical notes (for developers)​

  • Block name: yoko-core/print-button
  • Registered server-side from the built block metadata.
  • Rendered server-side via render.php.
  • Frontend behavior is handled in view.js.
  • The nested button link is rewritten with:
    • data-print-button="1"
    • data-print-target-selector="..."
    • href="#"
  • Target selectors are sanitized on render using wp_strip_all_tags() and trim().
  • If WP_HTML_Tag_Processor is available, it is used to inject the print data attributes into the nested button markup.