Skip to content

Commit

Permalink
Added initial commit with working version
Browse files Browse the repository at this point in the history
  • Loading branch information
richardtape committed Apr 16, 2024
0 parents commit 4bed4e9
Show file tree
Hide file tree
Showing 77 changed files with 2,101 additions and 0 deletions.
52 changes: 52 additions & 0 deletions apsc-blocks.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<?php
/**
* APSC Blocks.
*
* A plugin for Applied Science which adds additional blocks to the Gutenberg editor based
* on the APSC Style Guide.
*
* @package APSCBlocks
* @author Rich Tape
* @license GPL-2.0-or-later
*
* @wordpress-plugin
* Plugin Name: APSC Blocks
* Plugin URI: https://github.com/ubc/apsc-blocks
* Description: A plugin for Applied Science which adds additional blocks to the Gutenberg editor based on the APSC Style Guide.
* Version: 1.0.0
* Requires at least: 5.2
* Requires PHP: 7.2
* Author: Rich Tape
* Author URI: https://richardtape.com
* Text Domain: apsc-blocks
* License: GPL v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/

namespace UBC\APSC\Blocks;

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
die;
}

define( 'UBC_APSCBLOCKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'UBC_APSCBLOCKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

define( 'UBC_APSCBLOCKS_DESIGN_SYSTEM_URL', 'https://release-design-system-3-0--apsc-design-system.netlify.app/apsc-base.min.css' );
define( 'UBC_APSCBLOCKS_DESIGN_SYSTEM_VERSION', '1.0.0' );

require_once UBC_APSCBLOCKS_PLUGIN_DIR . 'inc/class-apsc-blocks.php';

// Instantiate early on plugins_loaded.
add_action( 'plugins_loaded', __NAMESPACE__ . '\\initialize_apsc_blocks' );

/**
* Initializes the plugin.
*
* @since 1.0.0
* @return void
*/
function initialize_apsc_blocks() {
$apsc_blocks = new APSC_Blocks();
}//end initialize_apsc_blocks()
67 changes: 67 additions & 0 deletions assets/apsc-extra-editor-styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* This file is specifically for Block Editor overrides. There are some misalignments between
* WordPress core styles, the CLF styles, the Block Editor styles, and the APSC Style Guide. This
* file tweaks the editor styles to match the front-end as closely as possible.
*/

/**
* Card Block overrides. ========================================================================
*
* The card blocks in the editor all have a margin-top except the first card. On the front-end
* none of the cards have a margin top so we remove the margin-top from the editor.
*/
.editor-styles-wrapper :where(body .is-layout-flow) .card-columns__two .wp-block-media-text.card,
.editor-styles-wrapper :where(body .is-layout-flow) .card-columns__three .wp-block-media-text.card,
.editor-styles-wrapper :where(body .is-layout-flow) .card-columns__two .wp-block-group.card,
.editor-styles-wrapper :where(body .is-layout-flow) .card-columns__three .wp-block-group.card {
margin-top: 0;
}

/**
* FontAwesome Include. =======================================================================
*
* FontAwesome isn't available by default in the editor as it's part of the CLF stylesheet only
* loaded in the editor.
*/
@font-face {
font-family: 'FontAwesome';
src: url('https://cdn.ubc.ca/clf/7.0.4/font/font-v4/fontawesome-webfont-ubc-v4.eot');
src: url('https://cdn.ubc.ca/clf/7.0.4/font/font-v4/fontawesome-webfont-ubc-v4.eot?#iefix') format('embedded-opentype'), url('https://cdn.ubc.ca/clf/7.0.4/font/font-v4/fontawesome-webfont-ubc-v4.ttf') format('truetype'), url('https://cdn.ubc.ca/clf/7.0.4/font/font-v4/fontawesome-webfont-ubc-v4.woff') format('woff');
font-weight: 400;
font-style: normal;
}

/**
* Gutenberg overrides. ==============================================================================
*
* The gutenberg plugin does some super interesting things. Primarily it decides to use a serif font
* by default in the editor. Which is great. We don't want that.
*/
:where(.editor-styles-wrapper) {
font-family: "Whitney SSm A","Whitney SSm B",Arial,sans-serif;
}

/**
* Just a little nicety. When we're using the hero, it already has a pull-up of 3em to counteract the
* padding that is applied by the APSC Styleguide. This means, in the editor, it sits on top of the actual
* page title. This is fine, as we use the title block anyway, but it kinda leaves a weird gap at the top
* of the screen. It'll be a nicer experience if we but the hero block up to the top. Won't impact front-end.
*/
.is-root-container.is-desktop-preview>.ubc-clf-full.apsc-hero {
margin-top: 0 !important;
}

.is-root-container.is-desktop-preview > .ubc-clf-full.apsc-hero:first-child {
margin-top: -7.1em !important;
}

/**
* The Footer Graphic
*/
@media (min-width: 640px) {
.background--svg-feature {
background-repeat: no-repeat;
background-position: 100% 0%;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' fill='none' style='&%2310;'%3e%3cg clip-path='url(%23clip0)'%3e%3cpath d='M134.438 398.059L227.179 299.55' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M74.5 228.5L206.211 81.587' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M227.078 299.65L206.11 81.6871' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M344.409 82.3232L206.211 81.5872' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M211 257.5L150.611 214.875' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M75 228.5L150.511 214.874' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M227.078 299.65L150.51 214.974' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M344.409 82.322L150.511 214.874' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.587L150.611 214.875' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M344.409 82.3218L128.764 -99.2982' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.5869L128.864 -99.2971' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M344.409 82.3218L46.5 -28.5' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.5869L85.98 -21.5161' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M150.511 214.874L47.5 -27' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M344.409 82.3218L124.489 -62.6292' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.5869L124.59 -62.7281' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M150.511 214.874L124.489 -62.629' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.5869L440.581 6.34091' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.5869L449.449 -15.9931' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M150.511 214.874L322.776 447.171' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M227.078 299.65L160.059 435.451' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M150.511 214.874L207.5 233' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M74.5 228.5L208 298.5' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M227.078 299.65L181.717 361.112' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M206.211 81.5872L177 232.5' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3cpath d='M150.511 214.874L205.5 298.5' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0'%3e%3crect width='207' height='354' fill='white' transform='translate(0 -25)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
}
48 changes: 48 additions & 0 deletions assets/apsc-extra-pattern-style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* Adjustments for the Query Loop Card Pattern.
*/
.wp-block-query.apsc-card-as-query-loop-template .card.wp-block-group a {
color: inherit;
display: inherit;
font-size: inherit;
opacity: inherit;
}

.wp-block-query.apsc-card-as-query-loop-template ul {
list-style-type: none;
}

.wp-block-query.apsc-card-as-query-loop-template .card__subhead.wp-block-post-terms a,
.wp-block-query.apsc-card-as-query-loop-template .wp-block-post-title a {
text-decoration: none;
}

.wp-block-query.apsc-card-as-query-loop-template .card__tags a {
background: #e6e6e6;
font-size: .875rem;
line-height: 1.25;
margin: 0 !important;
padding: .5rem 1rem;
text-decoration: none;
}

.wp-block-query.apsc-card-as-query-loop-template .card__tags .wp-block-post-terms__separator {
display: none;
}

/**
* This is...weird. The Block editor itself does this.
*/
body .is-layout-constrained.card > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
margin-left: 0 !important;
margin-right: 0 !important;
}

/**
* When the theme option is set to hide the address bar, a body class of 'apsc-hide-address-bar' is added.
* We use that to hide the address bar and the 'to top' container.
*/
body.apsc-hide-address-bar #ubc7-unit-footer,
body.apsc-hide-address-bar #ubc7-footer .ubc7-back-to-top {
display: none;
}
18 changes: 18 additions & 0 deletions inc/blocks/cards/horizontal-image-right/horizontal-image-right.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaId":1542,"mediaLink":"https://apsc-brand.sites.olt.ubc.ca/guidelines/graphic-devices/engineering-graphic-device-gradient/","mediaType":"image","className":"card card\u002d\u002dhoriz"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile card card--horiz">
<div class="wp-block-media-text__content">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Engineering</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This card has some paragraph text description</p>
<!-- /wp:paragraph -->
</div>
<figure class="wp-block-media-text__media">
<a href="https://apsc.share.ubc.ca/servicesresources/communications/BrandDownloads/Forms/Engineering.aspx">
<img src="https://apsc-brand.sites.olt.ubc.ca/files/2020/09/ENGINEERING-graphic-device-gradient.png" alt="Engineering graphic device over gradient" class="wp-image-1542 size-full"/>
</a>
</figure>
</div>
<!-- /wp:media-text -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/horizontal-image-right/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Horizontal Image Right Card",
"slug": "apsc-block-patterns/card-horizontal-image-right",
"categories": ["apsc-block-patterns"],
"description": "Set up as a group of Media & Text blocks. The class card-rows is applied to the group, both the classes card card--horiz are applied to each Media & Text block, the card links are applied on the image. Cards are displayed horizontally with the image on the right. On smaller screens (<640px), cards revert to a vertical display with the image on top."
}
18 changes: 18 additions & 0 deletions inc/blocks/cards/horizontal-img-left/horizontal-image-left.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!-- wp:media-text {"align":"wide","mediaId":1531,"mediaLink":"https://apsc-brand.sites.olt.ubc.ca/downloads-redev/apsc-graphic-device-gradient/","mediaType":"image","className":"card card\u002d\u002dhoriz"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile card card--horiz">
<figure class="wp-block-media-text__media">
<a href="https://apsc.share.ubc.ca/servicesresources/communications/BrandDownloads/Forms/PersonalViews.aspx?PageView=Personal&amp;ShowWebPart={96F6C637-2EA2-4554-AABF-CFBC6A2ABF5B}">
<img src="https://apsc-brand.sites.olt.ubc.ca/files/2020/09/APSC-graphic-device-gradient.png" alt="APSC graphic device over gradient" class="wp-image-1531 size-full"/>
</a>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Faculty</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/horizontal-img-left/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Horizontal Image Left Card",
"slug": "apsc-block-patterns/card-horizontal-image-left",
"categories": ["apsc-block-patterns"],
"description": "Set up as a group of Media & Text blocks. The class card-rows is applied to the group, both the classes card card--horiz are applied to each Media & Text block, the card links are applied on the image. Cards are displayed horizontally with the image on the left. On smaller screens (<640px), cards revert to a vertical display with the image on top."
}
18 changes: 18 additions & 0 deletions inc/blocks/cards/large/large.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!-- wp:media-text {"align":"wide","mediaId":1546,"mediaLink":"https://apsc-brand.sites.olt.ubc.ca/guidelines/graphic-devices/nursing-graphic-device-gradient/","mediaType":"image","className":"card"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile card">
<figure class="wp-block-media-text__media">
<a href="https://apsc.share.ubc.ca/servicesresources/communications/BrandDownloads/Forms/Nursing.aspx">
<img src="https://apsc-brand.sites.olt.ubc.ca/files/2020/09/NURSING-graphic-device-gradient.png" alt="Nursing graphic device over gradient background" class="wp-image-1546 size-full"/>
</a>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Nursing Large</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This card has some paragraph text description</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/large/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Large Card",
"slug": "apsc-block-patterns/card-large",
"categories": ["apsc-block-patterns"],
"description": "A single large card."
}
18 changes: 18 additions & 0 deletions inc/blocks/cards/light-grey/light-grey.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!-- wp:media-text {"align":"wide","mediaId":1542,"mediaLink":"https://apsc-brand.sites.olt.ubc.ca/guidelines/graphic-devices/engineering-graphic-device-gradient/","mediaType":"image","className":"card card\u002d\u002dgray"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile card card--gray">
<figure class="wp-block-media-text__media">
<a href="https://apsc.share.ubc.ca/servicesresources/communications/BrandDownloads/Forms/Engineering.aspx">
<img src="https://apsc-brand.sites.olt.ubc.ca/files/2020/09/ENGINEERING-graphic-device-gradient.png" alt="Engineering graphic device over gradient" class="wp-image-1542 size-full"/>
</a>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Engineering Light Grey</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This card has some paragraph text description</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/light-grey/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Light Grey Card",
"slug": "apsc-block-patterns/card-light-grey",
"categories": ["apsc-block-patterns"],
"description": "A single Light Grey Card"
}
18 changes: 18 additions & 0 deletions inc/blocks/cards/medium/medium.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!-- wp:media-text {"align":"wide","mediaId":1531,"mediaLink":"https://apsc-brand.sites.olt.ubc.ca/downloads-redev/apsc-graphic-device-gradient/","mediaType":"image","className":"card"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile card">
<figure class="wp-block-media-text__media">
<a href="https://apsc.share.ubc.ca/servicesresources/communications/BrandDownloads/Forms/PersonalViews.aspx?PageView=Personal&amp;ShowWebPart={96F6C637-2EA2-4554-AABF-CFBC6A2ABF5B}">
<img src="https://apsc-brand.sites.olt.ubc.ca/files/2020/09/APSC-graphic-device-gradient.png" alt="APSC graphic device over gradient" class="wp-image-1531 size-full"/>
</a>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Faculty Medium</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This card has some paragraph text description</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/medium/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Medium Card",
"slug": "apsc-block-patterns/card-medium",
"categories": ["apsc-block-patterns"],
"description": "A single medium card."
}
6 changes: 6 additions & 0 deletions inc/blocks/cards/text-only-large/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Text-Only Large Card",
"slug": "apsc-block-patterns/text-only-card-large",
"categories": ["apsc-block-patterns"],
"description": "Text-Only Large Card"
}
15 changes: 15 additions & 0 deletions inc/blocks/cards/text-only-large/text-only-large.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!-- wp:group {"className":"card "} -->
<div class="wp-block-group card">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Large content card</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is an example of a large content card.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">The link</a></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/text-only-light-grey/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Text-Only Light Grey Card",
"slug": "apsc-block-patterns/text-only-light-grey-medium",
"categories": ["apsc-block-patterns"],
"description": "Text-Only Light Grey Card"
}
13 changes: 13 additions & 0 deletions inc/blocks/cards/text-only-light-grey/text-only-light-grey.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!-- wp:group {"className":"card card\u002d\u002dgray "} -->
<div class="wp-block-group card card--gray"><!-- wp:heading -->
<h2 class="wp-block-heading">Light Gret Text Only Content card</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a H2 heading. The optional paragraph accompanying the heading.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">this is the link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/text-only-medium/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Text-Only Medium Card",
"slug": "apsc-block-patterns/text-only-card-medium",
"categories": ["apsc-block-patterns"],
"description": "Text-Only Medium Card"
}
13 changes: 13 additions & 0 deletions inc/blocks/cards/text-only-medium/text-only-medium.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!-- wp:group {"className":"card "} -->
<div class="wp-block-group card"><!-- wp:heading -->
<h2 class="wp-block-heading">Text Onnly Light Grey Content card</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a H2 heading. The optional paragraph accompanying the heading.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">this is the link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
6 changes: 6 additions & 0 deletions inc/blocks/cards/v3-with-subtitle-and-date/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "v3 With Subtitle and Date",
"slug": "apsc-block-patterns/card-with-subtitle-and-date",
"categories": ["apsc-block-patterns"],
"description": "A single card with subtitle and date."
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!-- wp:media-text {"mediaId":18866,"mediaLink":"https://apsc-collab-dev.sites.olt.ubc.ca/enve-1/","mediaType":"image","className":"card"} -->
<div class="wp-block-media-text is-stacked-on-mobile card">

<figure class="wp-block-media-text__media">
<img src="https://apsc-collab-dev.sites.olt.ubc.ca/files/2023/05/ENVE-1-940x628.jpg" alt="Two people look at maps on the coast with the Vancouver skyline in the background." class="wp-image-18866 size-full"/>
</figure>
<div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Content…","className":"card__subhead"} -->
<p class="card__subhead">UBC APPLIED SCIENCE</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Shaping tomorrow's cities</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"card__body"} -->
<p class="card__body">For the first time in human history, the majority of the world's population lives in cities.&nbsp;</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"card__footer"} -->
<p class="card__footer">December 20, 2023</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:media-text -->
Loading

0 comments on commit 4bed4e9

Please sign in to comment.