zgordon
/ wide-align-block-support.php
Created
January 11, 2018 02:16
Example of how to include wide align support for Gutenberg blocks in your WordPress Theme.
This file contains hidden or 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 | |
| // Wrapper function for add_theme_support setup | |
| function mytheme_setup_theme_supported_features() { | |
| // Add theme support for wide align blocks | |
| add_theme_support( 'align-wide' ); | |
| } | |
| // Hook wrapper function into WP once theme is ready |
zgordon
/ add-theme-support-for-wide-and-full-width-blocks.php
Last active
February 12, 2018 03:48
This will add theme support for wide and full width blocks in the Gutenberg editor. This does not include the necessary CSS to style these blocks properly on the front end.
This file contains hidden or 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 | |
| add_theme_support( 'align-wide' ); | |
zgordon
/ twentyseventeen-setup-example.php
Last active
February 12, 2018 04:17
This example the twenty seventeen theme twentyseventeen_setup function that includes various add_theme_support options with add_theme_support( 'align-wide' ) included at the end.
This file contains hidden or 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 | |
| /** | |
| * Sets up theme defaults and registers support for various WordPress features. | |
| * | |
| * Note that this function is hooked into the after_setup_theme hook, which | |
| * runs before the init hook. The init hook is too late for some features, such | |
| * as indicating support for post thumbnails. | |
| */ | |
| function twentyseventeen_setup() { |
zgordon
/ fixed-width-to-non-wide-and-full-width-blocks.css
Created
February 12, 2018 07:25
This example shows how you can select all elements within the main .entry-content area and set them to have fixed with and centered layout.
This file contains hidden or 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
| .entry-content > *:not( .alignwide ):not( .alignfull ) { | |
| max-width: 50%; | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
zgordon
/ alignwide.css
Created
February 12, 2018 07:41
This example shows how we can apply a width (and max-width) of 75% to any blocks that are set to wide width.
This file contains hidden or 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-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 hidden or 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, |
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 hidden or 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-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 hidden or 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-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 hidden or 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
/ 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 hidden or 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; | |
| } |