diff --git a/README.md b/README.md index 45c09d3d..087872e5 100644 --- a/README.md +++ b/README.md @@ -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 | diff --git a/photo-blocks/README.md b/photo-blocks/README.md new file mode 100644 index 00000000..34a98bb4 --- /dev/null +++ b/photo-blocks/README.md @@ -0,0 +1,3 @@ +# Photo Blocks + +A simple photoblogging theme. diff --git a/photo-blocks/assets/alignments-front.css b/photo-blocks/assets/alignments-front.css new file mode 100644 index 00000000..2f1c63c6 --- /dev/null +++ b/photo-blocks/assets/alignments-front.css @@ -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%; + max-width: 100%; + } +} \ No newline at end of file diff --git a/photo-blocks/block-template-parts/footer.html b/photo-blocks/block-template-parts/footer.html new file mode 100644 index 00000000..11e4fa7a --- /dev/null +++ b/photo-blocks/block-template-parts/footer.html @@ -0,0 +1,11 @@ + + + + + +

Proudly Powered by WordPress

+ + + + + \ No newline at end of file diff --git a/photo-blocks/block-template-parts/header.html b/photo-blocks/block-template-parts/header.html new file mode 100644 index 00000000..52129dc3 --- /dev/null +++ b/photo-blocks/block-template-parts/header.html @@ -0,0 +1,25 @@ + + + + + +
+
+
+
+ + + +
+
+
+ + + +
+ + + +
+
+ diff --git a/photo-blocks/block-template-parts/post-grid.html b/photo-blocks/block-template-parts/post-grid.html new file mode 100644 index 00000000..35ca9ed4 --- /dev/null +++ b/photo-blocks/block-template-parts/post-grid.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/photo-blocks/block-templates/index.html b/photo-blocks/block-templates/index.html new file mode 100644 index 00000000..c5625110 --- /dev/null +++ b/photo-blocks/block-templates/index.html @@ -0,0 +1,11 @@ + + + +
+ + + +
+ + + diff --git a/photo-blocks/block-templates/singular.html b/photo-blocks/block-templates/singular.html new file mode 100644 index 00000000..1a1464a9 --- /dev/null +++ b/photo-blocks/block-templates/singular.html @@ -0,0 +1,21 @@ + + + + + +
+
+ + + +
+
+ + + + + + + + + diff --git a/photo-blocks/experimental-theme.json b/photo-blocks/experimental-theme.json new file mode 100644 index 00000000..a0a960ec --- /dev/null +++ b/photo-blocks/experimental-theme.json @@ -0,0 +1,118 @@ +{ + "global": { + "settings": { + "color": { + "gradients": [ ], + "link": true, + "palette": [ + { + "color": "#000", + "slug": "black", + "name": "Black" + }, + { + "color": "#FFF", + "slug": "white", + "name": "White" + } + ] + }, + "spacing": { + "customPadding": true + }, + "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" + } + ] + }, + "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)" + } + } + } +} diff --git a/photo-blocks/functions.php b/photo-blocks/functions.php new file mode 100644 index 00000000..fb21a0d5 --- /dev/null +++ b/photo-blocks/functions.php @@ -0,0 +1,38 @@ +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' ); diff --git a/photo-blocks/index.php b/photo-blocks/index.php new file mode 100644 index 00000000..e69de29b diff --git a/photo-blocks/screenshot.png b/photo-blocks/screenshot.png new file mode 100644 index 00000000..47d71040 Binary files /dev/null and b/photo-blocks/screenshot.png differ diff --git a/photo-blocks/style.css b/photo-blocks/style.css new file mode 100644 index 00000000..c78cb4c0 --- /dev/null +++ b/photo-blocks/style.css @@ -0,0 +1,79 @@ +/* +Theme Name: Photo Blocks +Theme URI: https://github.com/wordpress/theme-experiments +Author: kjellr +Description: A block-based photo-blogging theme. +Requires at least: 5.3 +Tested up to: 5.5 +Requires PHP: 5.6 +Version: 1.0 +License: GNU General Public License v2 or later +License URI: LICENSE +Text Domain: photo-blocks + +Photo Blocks is distributed under the terms of the GNU GPL. + +Screenshot Images from stocksnap.io. CC0 License. +- https://stocksnap.io/photo/photographer-street-48WN8Q7JZS +- https://stocksnap.io/photo/fog-mountain-RVVDOZMEKW +- https://stocksnap.io/photo/winter-mountain-7NF9TVWNPY +- https://stocksnap.io/photo/fog-mountain-OLGRLKRE4Z +- https://stocksnap.io/photo/fog-mountain-ZKN6UKFKEO +- https://stocksnap.io/photo/fog-trees-F0Q7LBX1VP +- https://stocksnap.io/photo/iceland-beach-ABGWJNSGKR +*/ + +/* These should be handled by Gutenberg eventually. */ + +.wp-block-post-featured-image { + margin: 0; +} + +.wp-block-column .wp-block-columns { + margin-bottom: 0; +} + +.single .wp-block-post-featured-image { + text-align: center; +} + +.wp-block-post-featured-image img { + width: 100%; + height: auto; +} + +.wp-block-image img { + height: auto; +} + +/* These will move into Global Styles when it's possible to do so. */ + +.wp-block-site-title a { + font-weight: 500; + text-decoration: none; + color: #000; +} + +.wp-block-post-title { + margin-top: 0; + margin-bottom: 0; +} + +/* These styles may end up staying part of the theme in the longrun. */ + +.wp-block-site-logo a, +body:not(.single) .wp-block-post-featured-image { + transition: opacity 0.2s ease-in-out; +} + +.wp-block-site-logo a:hover, +body:not(.single) .wp-block-post-featured-image:hover { + opacity: 0.8; +} + +/* Hack for now, to only show the featured image. */ + +.single .entry-content > img:only-child, +.single .entry-content > .wp-block-image:only-child { + display: none; +}