zgordon
/ custom-post-with-block-template.php
Last active
February 15, 2018 13:45
This shows how to create a custom post type and assign it a block template. This would likely go in your functions.php file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function mytheme_create_post_type() { | |
| register_post_type( 'mytheme_event', | |
| [ | |
| 'labels' => [ | |
| 'name' => __( 'Events' ), | |
| 'singular_name' => __( 'Event' ) | |
| ], | |
| 'public' => true, |
zgordon
/ example-frontend.block.js
Created
February 15, 2018 11:10
This is an example of how you could use fitvid and swipebox to add additional functionality to default video and gallery blocks in WordPress.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(document).ready(function(){ | |
| // Make YouTube video blocks responsive | |
| jQuery(".wp-block-embed-youtube").fitVids(); | |
| // Add lightboxes to gallery blocks linking to media file | |
| jQuery(".blocks-gallery-item a").swipebox(); | |
| }); |
zgordon
/ custom-block-js-functions.php
Created
February 15, 2018 10:58
An example of enqueuing custom JavaScript (and JavaScript libraries) to add frontend functionality to blocks. The code would go into your functions.php file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Enqueue custom block JavaScript on the frontend only | |
| */ | |
| function mytheme_frontend_block_scripts() { | |
| // Enqueue fitvids JS library from CDN for responsive video embeds | |
| wp_enqueue_script( 'fitvids', 'https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js', array('jquery') ); |
zgordon
/ enqueue-block-css.php
Last active
October 11, 2023 13:50
This example shows how to use enqueue_block_assets to enqueue custom block CSS on the frontend of a theme and in the Gutenberg editor.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Enqueue block styles on frontend and in editor | |
| * | |
| */ | |
| function mytheme_block_styles() { | |
| wp_enqueue_style( 'mytheme-blocks', get_stylesheet_directory_uri() . '/css/blocks.css' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Style all header blocks that appear within the main content area */ | |
| .entry-content h1, | |
| .entry-content h2, | |
| .entry-content h3, | |
| .entry-content h4, | |
| .entry-content h5, | |
| .entry-content h6 { | |
| font-family: futura, san-serif; | |
| text-transform: uppercase; | |
| } |
zgordon
/ change-default-cover-image-block.css
Created
February 13, 2018 06:58
In this simple example we apply a 1rem margin to the bottom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Add bottom margin to cover images */ | |
| .wp-block-cover-image { | |
| margin-bottom: 1rem; | |
| } |
zgordon
/ twentyseventeen-media-queries.css
Last active
February 13, 2018 04:13
In this example we see how to add media queries to wide width and normal width blocks.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen | |
| and (max-width: 480px) { | |
| body.page-two-column:not(.archive) #primary .entry-header, | |
| .entry-content > *:not( .alignwide ):not( .alignfull ) { | |
| max-width: 75%; | |
| width: 75%; | |
| } | |
| .alignwide { | |
| max-width: 90%; | |
| width: 90%; |
zgordon
/ twentyseventeen-align-wide.css
Created
February 12, 2018 11:26
This snippet shows styling you can add to make wide width blocks appear at 75% width
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .alignwide { | |
| max-width: 75%; | |
| width: 75%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
zgordon
/ twentyseventeen-normal-width-columns.css
Last active
February 12, 2018 10:23
This example shows how to select all blocks in the twentyseventeen theme and give them a fixed width and centered layout.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body.page-two-column:not(.archive) #primary .entry-header, | |
| .entry-content > *:not( .alignwide ):not( .alignfull ) { | |
| max-width: 50%; | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
zgordon
/ twentyseventeen-full-width-columns.css
Last active
February 12, 2018 09:57
This example shows how you can convert all two column styles to 100% width single column styles.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .site-content .wrap, | |
| .has-sidebar:not(.error404) #primary, | |
| .has-sidebar #secondary, | |
| body:not(.has-sidebar):not(.page-one-column) .page-header, | |
| body.has-sidebar.error404 #primary .page-header, | |
| body.page-two-column:not(.archive) #primary .entry-header, | |
| body.page-two-column.archive:not(.has-sidebar) #primary .page-header, | |
| .blog:not(.has-sidebar) #primary article, | |
| .archive:not(.page-one-column):not(.has-sidebar) #primary article, | |
| .search:not(.has-sidebar) #primary article, |