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 block-based magazine-style theme #54

Closed
wants to merge 5 commits into from
Closed

Try a block-based magazine-style theme #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ae01218
Initial commit
kjellr Sep 17, 2020
c0c15b2
Use correct editor stylesheet name.
kjellr Sep 17, 2020
00fdfe5
Fix editor styles
kjellr Sep 18, 2020
5aa2958
Refactor global styles theme.json
yahilmadakiya Oct 6, 2020
8e5570d
Merge pull request #55 from yahilmadakiya/patch-1
kjellr Oct 6, 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
674 changes: 674 additions & 0 deletions magazine-example/LICENSE
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added magazine-example/assets/fonts/Inter-italic-var.woff2
View file
Open in desktop
Binary file not shown.
Binary file added magazine-example/assets/fonts/Inter-upright-var.woff2
View file
Open in desktop
Binary file not shown.
Binary file added magazine-example/assets/images/don-quixote-01.jpg
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.
Binary file added magazine-example/assets/images/don-quixote-02.jpg
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.
Binary file added magazine-example/assets/images/don-quixote-03.jpg
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.
Binary file added magazine-example/assets/images/don-quixote-04.jpg
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.
Binary file added magazine-example/assets/images/don-quixote-05.jpg
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.
7 changes: 7 additions & 0 deletions magazine-example/block-template-parts/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center","fontSize":"small","style":{"color":{"text":"#6c7781"}}} -->
<p class="has-text-align-center has-small-font-size" style="color:#6c7781">Proudly powered by <a href="https://wordpress.org">WordPress</a> | <a href="https://www.github.com/WordPress/gutenberg-starter-theme">The Gutenberg Starter Theme</a></p>
<!-- /wp:paragraph -->
23 changes: 23 additions & 0 deletions magazine-example/block-template-parts/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","type":"page","url":"/","title":"Home"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"/blog","title":"Blog"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
87 changes: 87 additions & 0 deletions magazine-example/block-templates/front-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!-- wp:template-part {"slug":"header","theme":"magazine-example","align":"full"} /-->

<!-- 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:latest-posts {"postsToShow":1,"displayPostContent":true,"excerptLength":30,"displayFeaturedImage":true,"featuredImageSizeSlug":"large","addLinkToFeaturedImage":true} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"level":3} -->
<h3>Latest Stories</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true,"postLayout":"grid","columns":2,"displayFeaturedImage":true,"featuredImageSizeSlug":"medium","addLinkToFeaturedImage":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

<!-- wp:cover {"minHeight":575,"minHeightUnit":"px","customGradient":"linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%)","contentPosition":"center center","align":"wide"} -->
<div class="wp-block-cover alignwide has-background-dim has-background-gradient is-position-center-center" style="background:linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%);min-height:575px"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":12} -->
<div class="wp-block-column" style="flex-basis:12%"><!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

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

<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"fontSize":68,"lineHeight":"1.2"},"color":{"text":"#fffffa"}}} -->
<p class="has-text-align-left has-text-color" style="color:#fffffa;font-size:68px;line-height:1.2"><strong>Thou hast seen</strong><br><strong>nothing yet</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":3,"style":{"color":{"background":"#fffffa","text":"#00000a"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="border-radius:3px;background-color:#fffffa;color:#00000a">Read now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

<!-- wp:column {"width":12} -->
<div class="wp-block-column" style="flex-basis:12%"><!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

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

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Don Quixote</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":4,"displayAuthor":true,"displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Don Quixote</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":4,"displayAuthor":true,"orderBy":"title","displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>Don Quixote</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":4,"displayAuthor":true,"order":"asc","orderBy":"title","displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":75,"featuredImageSizeHeight":75} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:template-part {"slug":"footer","theme":"magazine-example"} /-->
8 changes: 8 additions & 0 deletions magazine-example/block-templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!-- wp:template-part {"slug":"header","theme":"magazine-example","align":"full"} /-->

<!-- wp:query-loop -->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- /wp:query-loop -->

<!-- wp:template-part {"slug":"footer","theme":"magazine-example"} /-->
61 changes: 61 additions & 0 deletions magazine-example/block-templates/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!-- wp:template-part {"slug":"header","theme":"magazine-example","align":"full"} /-->

<!-- 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 /-->

<!-- wp:post-featured-image /-->

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

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

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

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

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

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

<!-- wp:heading {"level":3} -->
<h3>Latest Posts</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":38,"featuredImageSizeHeight":38} /-->

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

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

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

<!-- wp:group {"className":"has-background-gradient has-background","style":{"color":{"gradient":"linear-gradient(135deg,rgb(249,72,72) 0%,rgb(179,22,22) 100%)"}}} -->
<div class="wp-block-group has-background-gradient has-background has-background" style="background:linear-gradient(135deg,rgb(249,72,72) 0%,rgb(179,22,22) 100%)"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":3,"style":{"color":{"text":"#ffffff"}}} -->
<h3 class="has-text-color" style="color:#ffffff">Subscribe to receive regular updates</h3>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#ffffff","text":"#000000"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background-color:#ffffff;color:#000000">Sign up</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:template-part {"slug":"footer","theme":"magazine-example"} /-->
57 changes: 57 additions & 0 deletions magazine-example/experimental-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{
"global": {
"settings": {
"color": {
"gradients": [ ],
"palette": [
{
"slug": "background",
"color": "#f5efe0"
},
{
"slug": "foreground",
"color": "#000"
},
{
"slug": "primary",
"color": "#cd2653"
},
{
"slug": "secondary",
"color": "#6d6d6d"
}
]
},
"typography": {
"customFontSize": true,
"customLineHeight": true,
"fontSizes": [
{
"slug": "small",
"size": "13px"
},
{
"slug": "normal",
"size": "16px"
},
{
"slug": "medium",
"size": "20px"
},
{
"slug": "large",
"size": "36px"
},
{
"slug": "huge",
"size": "48px"
}
],
"spacing": {
"customPadding": true,
"units": [ "px", "em", "rem", "vh", "vw" ]
}
}
}
}
}
137 changes: 137 additions & 0 deletions magazine-example/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<?php

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

// Add featured image support.
add_theme_support( 'post-thumbnails' );

// Make theme available for translation.
load_theme_textdomain( 'magazine-example', get_template_directory() . '/languages' );

// Let WordPress manage the document title.
add_theme_support( 'title-tag' );

// 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' );

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

// Add support for custom line height controls.
add_theme_support( 'custom-line-height' );

// Add support for experimental link color control.
add_theme_support( 'experimental-link-color' );

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

// Enqueue editor styles.
add_editor_style(
array(
'style-shared.css',
'style-editor.css'
) );

// Support a custom color palette.
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Background', 'magazine-example' ),
'slug' => 'background',
'color' => '#f5efe0',
),
array(
'name' => __( 'Foreground', 'magazine-example' ),
'slug' => 'foreground',
'color' => '#000',
),
array(
'name' => __( 'Primary', 'magazine-example' ),
'slug' => 'primary',
'color' => '#cd2653',
),
array(
'name' => __( 'Secondary', 'magazine-example' ),
'slug' => 'secondary',
'color' => '#6d6d6d',
)
) );
}
add_action( 'after_setup_theme', 'magazine_example_support' );

// Starter content
if ( is_customize_preview() ) {
add_theme_support('starter-content', [

// Create the custom image attachments used as post thumbnails for pages.
'attachments' => array(
'don-quixote-01' => array(
'post_title' => _x( 'Thou Hast Seen Nothing Yet', 'Theme starter content', 'magazine-example' ),
'file' => 'assets/images/don-quixote-01.jpg',
),
'don-quixote-02' => array(
'post_title' => _x( 'Such Ardour and Avidity', 'Theme starter content', 'magazine-example' ),
'file' => 'assets/images/don-quixote-02.jpg',
),
'don-quixote-03' => array(
'post_title' => _x( 'Pearls in his Sight', 'Theme starter content', 'magazine-example' ),
'file' => 'assets/images/don-quixote-03.jpg',
),
'don-quixote-04' => array(
'post_title' => _x( 'The Above-Named Gentleman', 'Theme starter content', 'magazine-example' ),
'file' => 'assets/images/don-quixote-04.jpg',
),
'don-quixote-05' => array(
'post_title' => _x( 'Feliciano de Silva', 'Theme starter content', 'magazine-example' ),
'file' => 'assets/images/don-quixote-05.jpg',
),
),

// Starter pages to include
'posts' => [
'post-01' => array(
'post_type' => 'post',
'post_title' => __( 'Thou Hast Seen Nothing Yet', 'magazine-example' ),
'thumbnail' => '{{don-quixote-01}}',
'post_content' => 'They must know, then, that the above-named gentleman whenever he was at leisure (which was mostly all the year round) gave himself up to reading books of chivalry with such ardour and avidity that he almost entirely neglected the pursuit of his field-sports, and even the management of his property; and to such a pitch did his eagerness and infatuation go that he sold many an acre of tillageland to buy books of chivalry to read, and brought home as many of them as he could get.'
),
'post-02' => array(
'post_type' => 'post',
'post_title' => __( 'Such Ardour and Avidity', 'magazine-example' ),
'thumbnail' => '{{don-quixote-02}}',
'post_content' => 'They must know, then, that the above-named gentleman whenever he was at leisure (which was mostly all the year round) gave himself up to reading books of chivalry with such ardour and avidity that he almost entirely neglected the pursuit of his field-sports, and even the management of his property; and to such a pitch did his eagerness and infatuation go that he sold many an acre of tillageland to buy books of chivalry to read, and brought home as many of them as he could get.'
),
'post-03' => array(
'post_type' => 'post',
'post_title' => __( 'Pearls in his Sight', 'magazine-example' ),
'thumbnail' => '{{don-quixote-03}}',
'post_content' => 'They must know, then, that the above-named gentleman whenever he was at leisure (which was mostly all the year round) gave himself up to reading books of chivalry with such ardour and avidity that he almost entirely neglected the pursuit of his field-sports, and even the management of his property; and to such a pitch did his eagerness and infatuation go that he sold many an acre of tillageland to buy books of chivalry to read, and brought home as many of them as he could get.'
),
'post-04' => array(
'post_type' => 'post',
'post_title' => __( 'The Above-Named Gentleman', 'magazine-example' ),
'thumbnail' => '{{don-quixote-04}}',
'post_content' => 'They must know, then, that the above-named gentleman whenever he was at leisure (which was mostly all the year round) gave himself up to reading books of chivalry with such ardour and avidity that he almost entirely neglected the pursuit of his field-sports, and even the management of his property; and to such a pitch did his eagerness and infatuation go that he sold many an acre of tillageland to buy books of chivalry to read, and brought home as many of them as he could get.'
),
'post-05' => array(
'post_type' => 'post',
'post_title' => __( 'Feliciano de Silva', 'magazine-example' ),
'thumbnail' => '{{don-quixote-05}}',
'post_content' => 'They must know, then, that the above-named gentleman whenever he was at leisure (which was mostly all the year round) gave himself up to reading books of chivalry with such ardour and avidity that he almost entirely neglected the pursuit of his field-sports, and even the management of his property; and to such a pitch did his eagerness and infatuation go that he sold many an acre of tillageland to buy books of chivalry to read, and brought home as many of them as he could get.'
),
]
]);
}
endif;

/**
* Enqueue scripts and styles.
*/
function magazine_example_scripts() {
wp_enqueue_style( 'magazine-example-styles', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'magazine_example_scripts' );
1 change: 1 addition & 0 deletions magazine-example/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// Nothing to see here. :)
Binary file added magazine-example/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