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.

Fields​

This block adds two custom options 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.

Use this field to add custom CSS rules that should only apply when this page is printed.

  • Example: @page { margin: 0.5in; }
  • Example: .site-header, .site-footer { display: none !important; }
  • Example: main { font-size: 12pt; line-height: 1.4; }
  • Default: empty

If this field is left empty, the block does not output any additional print styles.

If CSS is provided, the block renders it on the frontend inside a <style media="print"> tag on pages where the block appears.

This CSS is page-wide during print. It is not automatically scoped to the target selector.

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.

How Print CSS interacts with scoped printing​

If you use both Target Selector and Print CSS, the custom CSS still applies to the full page during print.

This is useful when you need to fine-tune the printed output for a specific template, such as:

  • hiding shared page chrome
  • adjusting margins or typography
  • fixing layouts that need print-specific overrides

If you want the CSS to affect only the printed target area, write selectors that explicitly target that area.

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.

Fine-tune print styles for one template​

Leave Target Selector empty or set it to the printable region, then add rules in Print CSS such as:

.site-header,
.site-footer,
.breadcrumbs,
.share-links {
  display: none !important;
}

main {
  padding: 0;
  font-size: 12pt;
}

This is useful when one page or template needs print overrides without changing global theme print styles.

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.

The block's Print CSS field is the fastest way to add page-specific print adjustments.

My Print CSS did not work​

Check that:

  • the CSS is valid
  • your selectors match the frontend markup
  • your rules are written for print output, not screen-only behavior
  • you are not expecting the CSS to auto-scope to the target selector

The block renders custom CSS as page-wide print CSS.

For safety, dangerous CSS patterns such as @import, javascript: URLs, data: URLs, and similar risky constructs are stripped before output.

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().
  • Custom Print CSS is sanitized on render before being output in a style[media="print"] tag.
  • If WP_HTML_Tag_Processor is available, it is used to inject the print data attributes into the nested button markup.