Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: A simple photoblogging theme #120

Merged
merged 14 commits into from
Dec 15, 2020
Merged

Try: A simple photoblogging theme #120

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9a25f59
Initial commit.
kjellr Dec 9, 2020
c2554a1
Add colors.
kjellr Dec 9, 2020
050c83c
Update README.md
kjellr Dec 9, 2020
33a62fe
Add screenshot.
kjellr Dec 9, 2020
e97cf6b
Merge branch 'try/photo-block-theme' of https://github.com/WordPress/…
kjellr Dec 9, 2020
b36b0f6
Add to main readme.
kjellr Dec 9, 2020
e0657bc
Zero out the line height for the site logo.
kjellr Dec 9, 2020
5fb4238
Remove empty paragraph.
kjellr Dec 10, 2020
6e1251b
Fix alignfull item width.
kjellr Dec 10, 2020
c63ffff
Merge branch 'try/photo-block-theme' of https://github.com/WordPress/…
kjellr Dec 10, 2020
b1113d2
Remove line height rule from site-logo
kjellr Dec 10, 2020
29178b4
Fix custom spacing declaration.
kjellr Dec 10, 2020
612b1d0
Merge branch 'try/photo-block-theme' of https://github.com/WordPress/…
kjellr Dec 10, 2020
795a21c
Use rounded block style for the site logo.
kjellr Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ This repository is dedicated to exploring how WordPress themes can best leverage
| [Ambitious](https://github.com/WordPress/theme-experiments/tree/master/ambitious) | Gutenberg 7.6 |
| [Empty Theme](https://github.com/WordPress/theme-experiments/tree/master/emptytheme) | Gutenberg 9.5 |
| [Gutenberg Starter Theme Blocks](https://github.com/WordPress/theme-experiments/tree/master/gutenberg-starter-theme-blocks) | Gutenberg 8.6 |
| [Photo Blocks](https://github.com/WordPress/theme-experiments/tree/master/photo-blocks) | Gutenberg 9.5 |
| [Twenty Nineteen Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentynineteen-blocks) | Gutenberg 8.6 |
| [Twenty Twenty Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentytwenty-blocks) | Gutenberg 8.6 |
| [Twenty Twenty-One Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentytwentyone-blocks) | Gutenberg 9.4 |
Expand Down
3 changes: 3 additions & 0 deletions photo-blocks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Photo Blocks

A simple photoblogging theme.
79 changes: 79 additions & 0 deletions photo-blocks/assets/alignments-front.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* Alignments, loaded in the front-end only.
*/

body {
margin: 0;
}

* {
box-sizing: border-box;
}

.wp-site-blocks,
.wp-block-template-part.alignfull {
padding: 0 var(--wp--custom--margin--horizontal);
}

.wp-site-blocks > *:not(.wp-block-post-content),
.wp-site-blocks .wp-block-post-content > * {
max-width: var(--wp--custom--width--default);
margin-left: auto;
margin-right: auto;
}

.wp-site-blocks .alignwide {
width: var(--wp--custom--width--wide);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

.wp-site-blocks .alignfull {
transform: translateX(calc(0px - var(--wp--custom--margin--horizontal)));
width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
max-width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
margin-left: 0;
margin-right: 0;
box-sizing: content-box;
}

.wp-site-blocks .wp-block-template-part.alignfull {
width: 100%;
max-width: 100%;
}

.wp-site-blocks .wp-block-columns.alignfull {
width: 100%;
max-width: 100%;
}

.aligncenter {
text-align: center;
}

.wp-site-blocks .alignleft {
float: left;
margin-right: 2em;
max-width: 360px;
}

.wp-site-blocks .alignright {
float: right;
margin-left: 2em;
max-width: 360px;
}

@media screen and (min-width: 1290px) {

.wp-site-blocks,
.wp-block-template-part.alignfull {
padding: 0;
}

.wp-site-blocks .alignfull {
transform: translateX(0px);
width: 100% + var(--wp--custom--margin--horizontal));
kjellr marked this conversation as resolved.
Show resolved Hide resolved
max-width: calc(100% + var(--wp--custom--margin--horizontal));
}
}
11 changes: 11 additions & 0 deletions photo-blocks/block-template-parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!-- wp:spacer {"height":38} -->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of blocks with this exact setting - could we make it a reusable block, or a block style?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm that's a good point! A block style might get confusing if the user were to edit it... and themes can't bundle reusable blocks today... I think the right way to do this would be to have a global styles setting for the default spacer block height. I'll open a Gutenberg issue for it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue here: WordPress/gutenberg#27614

<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly Powered by WordPress</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":38} -->
<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
29 changes: 29 additions & 0 deletions photo-blocks/block-template-parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!-- wp:spacer {"height":38} -->
<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"48px"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:48px"><!-- wp:site-logo {"width":48} /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:site-title /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"About","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
kjellr marked this conversation as resolved.
Show resolved Hide resolved
5 changes: 5 additions & 0 deletions photo-blocks/block-template-parts/post-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":12,"exclude":[223]},"layout":{"type":"flex","columns":3},"className":"alignfull"} -->
<!-- wp:query-loop -->
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- /wp:query-loop -->
<!-- /wp:query -->
11 changes: 11 additions & 0 deletions photo-blocks/block-templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!-- wp:template-part {"slug":"header","theme":"photo-blocks","tagName":"header","align":"wide"} /-->

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container"><!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":12,"exclude":[223]},"layout":{"type":"flex","columns":3},"className":"alignfull"} -->
<!-- wp:query-loop -->
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- /wp:query-loop -->
<!-- /wp:query --></div></div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"photo-blocks","tagName":"footer","align":"wide"} /-->
21 changes: 21 additions & 0 deletions photo-blocks/block-templates/singular.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!-- wp:template-part {"slug":"header","theme":"photo-blocks","tagName":"header","align":"wide"} /-->

<!-- wp:post-featured-image {"align":"wide"} /-->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-title /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-date {"textAlign":"right"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":38} -->
<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:post-content /-->

<!-- wp:template-part {"slug":"footer","theme":"photo-blocks","tagName":"footer","align":"wide"} /-->
118 changes: 118 additions & 0 deletions photo-blocks/experimental-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
{
"global": {
"settings": {
"color": {
"gradients": [ ],
"link": true,
"palette": [
{
"color": "#000",
"slug": "black",
"name": "Black"
},
{
"color": "#FFF",
"slug": "white",
"name": "White"
}
]
},
"typography": {
"customLineHeight": true,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
}
],
"fontSizes": [
{
"slug": "normal",
"size": "18px",
"name": "Normal"
},
{
"slug": "large",
"size": "20px",
"name": "Large"
},
{
"slug": "extra-large",
"size": "24px",
"name": "Extra Large"
}
],
"spacing": {
"customPadding": true
}
},
"custom": {
"font-weight": {
"light": 300
},
"line-height": {
"normal": 1.7,
"heading": 1.4
},
"margin": {
"horizontal": "1.25em"
},
"width": {
"default": "720px",
"wide": "1296px"
}
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--white)",
"text": "var(--wp--preset--color--black)",
"link": "var(--wp--preset--color--black)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--system-font)",
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "var(--wp--custom--line-height--normal)",
"fontWeight": "var(--wp--custom--font-weight--light)"
}
}
},
"core/heading/h1": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--extra-large)",
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
},
"core/heading/h2": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)"
}
}
},
"core/post-title": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "var(--wp--custom--line-height--normal)"
}
}
},
"core/site-title": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)"
}
}
},
"core/navigation": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)"
}
}
}
}
38 changes: 38 additions & 0 deletions photo-blocks/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?php

if ( ! function_exists( 'photo_blocks_support' ) ) :
function photo_blocks_support() {

// Adding support for featured images.
add_theme_support( 'post-thumbnails' );

// Adding support for alignwide and alignfull classes in the block editor.
add_theme_support( 'align-wide' );

// Adding support for core block visual styles.
add_theme_support( 'wp-block-styles' );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume we need these here rather than putting them in theme.json?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, yes.


// Adding support for responsive embedded content.
add_theme_support( 'responsive-embeds' );

// Add support for editor styles.
add_theme_support( 'editor-styles' );

// Enqueue editor styles.
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'photo_blocks_support' );
endif;

/**
* Enqueue scripts and styles.
*/
function photo_blocks_scripts() {

// Enqueue theme stylesheet.
wp_enqueue_style( 'photo_blocks-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

// Enqueue alignments stylesheet.
wp_enqueue_style( 'photo_blocks-alignments-style', get_template_directory_uri() . '/assets/alignments-front.css', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'photo_blocks_scripts' );
Empty file added photo-blocks/index.php
View file
Open in desktop
Empty file.
Binary file added photo-blocks/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading