• Printing wordpress pages with gutenberg blocks

    After adding my CV to this website I wanted to add a print button so visitors could PDF print it with the same multi-column layout as on a PC screen. Having made multiple printing buttons on Magento webshops in the past for printing orders and invoices, I expected this to be a peace of cake. The caveat is that printing pages made with WordPress 5.x Gutenberg blocks is straightforward, if you want the content printed in a one-column layout. The Flexbox layout model reverts to one-column layout print. This is because the Flexbox layout model, used by the WordPress Gutenberg blocks, is not suited for multi-column printing. You have to change it to block formatting. Chrome, Firefox and Edge listen to your print.css differently, this generates an extra hurdle to take. I have used information from a lot of forums and blogs and compiled an A-Z summary for other WordPress nerds and newbies.

    1. Default print preview

    The first time I looked at a WordPress print preview of the CV in this website I was looking at long document with all my content in a one-colum layout as if the print-preview was using the responsive styles for a 600px screen width, and this is actually tru:

    width: 21cm; /* 7in -> 72dpi is screen resolution = 595 pixels */
    height: 29.7mm; /* 9.25in -> 72dpi is screen resolution = 842 pixels */

    So for printing you need “responsive” styles for a width of 595px? Yes! The WordPress styles are under these media queries @media (max-width: 600px) and @media (max-width: 599px). To overrule these styles you have to add the same media queries and use !important; for every style!

    2. Add print styles to your wordpress website

    There are two methods to add your print styles to WordPress:

    1. You can add print styles to your style.css
    2. You can add a separate stylesheet, usually called print.css

    2.1 Add print styles to style.css

    You can add print css to your style.css by adding media query @media print at the bottom of your stylesheet so it overrides the normal styles

    /* override styles when printing */
    @media print {
       your cs here
    }

    2.2 Add print.css via functions.php

    A separate print.css stylesheet overrides your style.css automatically when the printing dialogue is called

    // Register and enqueu print.css in wordpress
    // Add print.css in the (child)theme folder next to styles.css
    // The 'print' will add media="print"
    function add_print_styles() {
       wp_register_style('print-css', get_template_directory_uri() . '/print.css', array(), '1.0', 'print');
       wp_enqueue_style('print-css');
    }
    add_action('wp_enqueue_scripts', 'add_print_styles'); 

    The result in the header of the website:

    <link rel="stylesheet" id="print-css-css" href="https://terencetengker.nl/wp-content/themes/theme/print.css?ver=1.0" media="print">

    You could also add this line to the header.php of your theme but I prefer not to touch the theme files. A separate print.css gives you the opportunity to turn the print styles on and off for testing.

    3. CSS for two colum print of standard WordPress Gutenberg blocks

    In the CV example I have used a few standard WordPress blocks:

    1. Media & text block
    2. Columns block
    3. To get 4 column layout I have used nested Columns blocks

    3.1 Media & Text block

    To make the Media & text block two-column you have to change the block styles

    @media print {
        @media (max-width: 600px) {
    	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media, 
    	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    	   -ms-grid-column: 2 !important;
    	   grid-column: 2 !important;
    	   -ms-grid-row: 2 !important;
    	   -ms-grid-row: 1 !important;
        	   grid-row: 1 !important;
    	}
    	.wp-block-media-text.is-stacked-on-mobile {
    	  -ms-grid-template-columns: 50% 1fr !important;
    	  grid-template-columns: 50% 1fr !important;
    	}
        }
    }

    3.2 Columns block

    @media print {
       media (min-width: 600px)
       .wp-block-column {
           flex-basis: calc(50% - 16px);
           flex-grow: 0;
       }
    }

    3.3 Nested Columns block

    Since the default WordPress columns block does’t provide a 4 columns option, I generally use a 2 columns block and add an additional 2 columns block inside each column. These nested columns blocks need additional styling. I have added the class .nested-colums to the first columns block.

    @media print {
       @media (max-width: 599px) {
       .wp-block-columns.nested-columns .wp-block-column {
            flex-basis: 100% !important;
       }
    }

    And I have added one custom ACF block called Skills to show the skills percentage graphically in the CV. I often use ACF to generate custom blocks for clients so I will discuss the css for this block also.

    5. Testing print styles in browser

    You can test the print css by opening the print preview on a Windows PC. And you can also force your browser to use the @media print {} styles by emulating this in the browser.

    5.1 Chrome

    1. Go to Settings -> More Tools -> Developer tools or press F12 to inspect the page.
    2. Click on the three dots in the top right corner.
    3. Choose More Tools in the dropdown.
    4. Choose Rendering in the dropdown.
    5. In the Rendering pane scroll down and set “Emulate CSS Media” type to “print”.

    5.2 Firefox

    • Pres 12 to open Inspector.
    • In the second top row of icons you will find a button which will “Toggle print media simulation for the page”

    6. Epilogue

    I have the feeling that printing web pages is not a focus anymore for Google, Mozilla and Microsoft. Understandably. We live in a mobile age. But somehow I don’t understand why it has to be so difficult, why there is not a possibility to print a page as we see it and give the visitor the option choose which sections to print.

    If “Margins” are set to “None” (or other non-“Default” option) the¬†@page¬†settings will be ignored. source https://stackoverflow.com/questions/37033766/css-print-a-custom-sized-page-margin-when-the-content-is-on-multiple-pages?answertab=active#tab-top

    https://plnkr.co/edit/lWk6Yd?preview
  • Geef een reactie