diff --git a/apsc-blocks.php b/apsc-blocks.php new file mode 100644 index 0000000..61ef433 --- /dev/null +++ b/apsc-blocks.php @@ -0,0 +1,52 @@ +.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"); + } +} diff --git a/assets/apsc-extra-pattern-style.css b/assets/apsc-extra-pattern-style.css new file mode 100644 index 0000000..a263a45 --- /dev/null +++ b/assets/apsc-extra-pattern-style.css @@ -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; +} diff --git a/inc/blocks/cards/horizontal-image-right/horizontal-image-right.php b/inc/blocks/cards/horizontal-image-right/horizontal-image-right.php new file mode 100644 index 0000000..68ff8b5 --- /dev/null +++ b/inc/blocks/cards/horizontal-image-right/horizontal-image-right.php @@ -0,0 +1,18 @@ + +
+
+ +

Engineering

+ + + +

This card has some paragraph text description

+ +
+
+ + Engineering graphic device over gradient + +
+
+ diff --git a/inc/blocks/cards/horizontal-image-right/pattern.json b/inc/blocks/cards/horizontal-image-right/pattern.json new file mode 100644 index 0000000..7f1b1cd --- /dev/null +++ b/inc/blocks/cards/horizontal-image-right/pattern.json @@ -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." +} diff --git a/inc/blocks/cards/horizontal-img-left/horizontal-image-left.php b/inc/blocks/cards/horizontal-img-left/horizontal-image-left.php new file mode 100644 index 0000000..c7fabcd --- /dev/null +++ b/inc/blocks/cards/horizontal-img-left/horizontal-image-left.php @@ -0,0 +1,18 @@ + +
+
+ + APSC graphic device over gradient + +
+
+ +

Faculty

+ + + +

+ +
+
+ diff --git a/inc/blocks/cards/horizontal-img-left/pattern.json b/inc/blocks/cards/horizontal-img-left/pattern.json new file mode 100644 index 0000000..22e2044 --- /dev/null +++ b/inc/blocks/cards/horizontal-img-left/pattern.json @@ -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." +} diff --git a/inc/blocks/cards/large/large.php b/inc/blocks/cards/large/large.php new file mode 100644 index 0000000..f1797a4 --- /dev/null +++ b/inc/blocks/cards/large/large.php @@ -0,0 +1,18 @@ + +
+
+ + Nursing graphic device over gradient background + +
+
+ +

Nursing Large

+ + + +

This card has some paragraph text description

+ +
+
+ diff --git a/inc/blocks/cards/large/pattern.json b/inc/blocks/cards/large/pattern.json new file mode 100644 index 0000000..0789de2 --- /dev/null +++ b/inc/blocks/cards/large/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Large Card", + "slug": "apsc-block-patterns/card-large", + "categories": ["apsc-block-patterns"], + "description": "A single large card." +} diff --git a/inc/blocks/cards/light-grey/light-grey.php b/inc/blocks/cards/light-grey/light-grey.php new file mode 100644 index 0000000..b9e1d05 --- /dev/null +++ b/inc/blocks/cards/light-grey/light-grey.php @@ -0,0 +1,18 @@ + +
+
+ + Engineering graphic device over gradient + +
+
+ +

Engineering Light Grey

+ + + +

This card has some paragraph text description

+ +
+
+ diff --git a/inc/blocks/cards/light-grey/pattern.json b/inc/blocks/cards/light-grey/pattern.json new file mode 100644 index 0000000..10c058b --- /dev/null +++ b/inc/blocks/cards/light-grey/pattern.json @@ -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" +} diff --git a/inc/blocks/cards/medium/medium.php b/inc/blocks/cards/medium/medium.php new file mode 100644 index 0000000..9a0b165 --- /dev/null +++ b/inc/blocks/cards/medium/medium.php @@ -0,0 +1,18 @@ + +
+
+ + APSC graphic device over gradient + +
+
+ +

Faculty Medium

+ + + +

This card has some paragraph text description

+ +
+
+ diff --git a/inc/blocks/cards/medium/pattern.json b/inc/blocks/cards/medium/pattern.json new file mode 100644 index 0000000..b4ccae0 --- /dev/null +++ b/inc/blocks/cards/medium/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Medium Card", + "slug": "apsc-block-patterns/card-medium", + "categories": ["apsc-block-patterns"], + "description": "A single medium card." +} diff --git a/inc/blocks/cards/text-only-large/pattern.json b/inc/blocks/cards/text-only-large/pattern.json new file mode 100644 index 0000000..161574f --- /dev/null +++ b/inc/blocks/cards/text-only-large/pattern.json @@ -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" +} diff --git a/inc/blocks/cards/text-only-large/text-only-large.php b/inc/blocks/cards/text-only-large/text-only-large.php new file mode 100644 index 0000000..28b3e61 --- /dev/null +++ b/inc/blocks/cards/text-only-large/text-only-large.php @@ -0,0 +1,15 @@ + +
+ +

Large content card

+ + + +

This is an example of a large content card.

+ + + +

The link

+ +
+ diff --git a/inc/blocks/cards/text-only-light-grey/pattern.json b/inc/blocks/cards/text-only-light-grey/pattern.json new file mode 100644 index 0000000..84a60c1 --- /dev/null +++ b/inc/blocks/cards/text-only-light-grey/pattern.json @@ -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" +} diff --git a/inc/blocks/cards/text-only-light-grey/text-only-light-grey.php b/inc/blocks/cards/text-only-light-grey/text-only-light-grey.php new file mode 100644 index 0000000..2953ce3 --- /dev/null +++ b/inc/blocks/cards/text-only-light-grey/text-only-light-grey.php @@ -0,0 +1,13 @@ + +
+

Light Gret Text Only Content card

+ + + +

This is a H2 heading. The optional paragraph accompanying the heading.

+ + + +

this is the link

+
+ diff --git a/inc/blocks/cards/text-only-medium/pattern.json b/inc/blocks/cards/text-only-medium/pattern.json new file mode 100644 index 0000000..3d06a3b --- /dev/null +++ b/inc/blocks/cards/text-only-medium/pattern.json @@ -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" +} diff --git a/inc/blocks/cards/text-only-medium/text-only-medium.php b/inc/blocks/cards/text-only-medium/text-only-medium.php new file mode 100644 index 0000000..a20b5fe --- /dev/null +++ b/inc/blocks/cards/text-only-medium/text-only-medium.php @@ -0,0 +1,13 @@ + +
+

Text Onnly Light Grey Content card

+ + + +

This is a H2 heading. The optional paragraph accompanying the heading.

+ + + +

this is the link

+
+ diff --git a/inc/blocks/cards/v3-with-subtitle-and-date/pattern.json b/inc/blocks/cards/v3-with-subtitle-and-date/pattern.json new file mode 100644 index 0000000..513e207 --- /dev/null +++ b/inc/blocks/cards/v3-with-subtitle-and-date/pattern.json @@ -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." +} diff --git a/inc/blocks/cards/v3-with-subtitle-and-date/v3-with-subtitle-and-date.php b/inc/blocks/cards/v3-with-subtitle-and-date/v3-with-subtitle-and-date.php new file mode 100644 index 0000000..03804f9 --- /dev/null +++ b/inc/blocks/cards/v3-with-subtitle-and-date/v3-with-subtitle-and-date.php @@ -0,0 +1,26 @@ + +
+ +
+ Two people look at maps on the coast with the Vancouver skyline in the background. +
+ +
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities

+ + + +

For the first time in human history, the majority of the world's population lives in cities. 

+ + + +

December 20, 2023

+ +
+
+ diff --git a/inc/blocks/cards/v3-with-subtitle-date-and-tags/pattern.json b/inc/blocks/cards/v3-with-subtitle-date-and-tags/pattern.json new file mode 100644 index 0000000..4472310 --- /dev/null +++ b/inc/blocks/cards/v3-with-subtitle-date-and-tags/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "v3 With Subtitle, Date, and Tags", + "slug": "apsc-block-patterns/card-with-subtitle-date-and-tags", + "categories": ["apsc-block-patterns"], + "description": "A single card with subtitle, date, and tags." +} diff --git a/inc/blocks/cards/v3-with-subtitle-date-and-tags/v3-with-subtitle-date-and-tags.php b/inc/blocks/cards/v3-with-subtitle-date-and-tags/v3-with-subtitle-date-and-tags.php new file mode 100644 index 0000000..7bdfbda --- /dev/null +++ b/inc/blocks/cards/v3-with-subtitle-date-and-tags/v3-with-subtitle-date-and-tags.php @@ -0,0 +1,50 @@ + +
+
+ + + +
+
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions and nearly every aspect of economic, social, political, technological and environmental change is now urbanized. Now, more than ever, we need people who are trained to understand and shape urbanization from the public, private and civic sectors.  

+ + + +
+ +

Alumni

+ + + +

Engineering

+ + + +

Rising Stars

+ + + +

Student Experience

+ + + +

Women in Engineering

+ +
+ + + +

December 20, 2023

+ +
+
+ diff --git a/inc/class-apsc-blocks.php b/inc/class-apsc-blocks.php new file mode 100644 index 0000000..0859511 --- /dev/null +++ b/inc/class-apsc-blocks.php @@ -0,0 +1,427 @@ +get_design_system_url(); + + // Now register the CSS and then enqueue it. + wp_register_style( + 'apsc-style-guide', + $design_system_url, + array(), + UBC_APSCBLOCKS_DESIGN_SYSTEM_VERSION, + 'all' + ); + + wp_enqueue_style( 'apsc-style-guide' ); + }//end wp_enqueue_scripts__enqueue_apsc_style_guide_css() + + /** + * Enqueue the APSC Style Guide CSS from the remote repo to be available in the editor. + * + * @return void + */ + public function enqueue_multiple__enqueue_apsc_style_guide_css() { + + // Fetch it from the define. Default to the min version. + $design_system_url = $this->get_design_system_url(); + + // Now register the CSS and then enqueue it. + wp_register_style( + 'apsc-style-guide', + $design_system_url, + array(), + UBC_APSCBLOCKS_DESIGN_SYSTEM_VERSION, + 'all' + ); + + wp_enqueue_style( 'apsc-style-guide' ); + }//end enqueue_multiple__enqueue_apsc_style_guide_css() + + /** + * Get the URL of the APSC Design System. Uses the define set in the plugin's main file, or defaults + * to the minified version from the repo if that isn't set. + * + * @return string The URL of the APSC Design System. + */ + private function get_design_system_url() { + + // The design system URL has an order of preference. If a URL is set in the theme options, that will always win. + // If no URL is set there, then the define will be used. If that isn't set, then the default URL will be used. + if ( '' !== \UBC_Collab_Theme_Options::get( 'apsc-design-system-url' ) ) { + $design_system_url = \UBC_Collab_Theme_Options::get( 'apsc-design-system-url' ); + return esc_url_raw( $design_system_url ); + } + + // Fetch it from the define. Default to the min version. + $design_system_url = defined( 'UBC_APSCBLOCKS_DESIGN_SYSTEM_URL' ) ? UBC_APSCBLOCKS_DESIGN_SYSTEM_URL : 'https://apsc-design-system.netlify.app/design-system.min.css'; + + // Sanitize. + $design_system_url = esc_url_raw( $design_system_url ); + + return $design_system_url; + }//end get_design_system_url() + + /** + * Register the APSC block pattern categories. + * apsc-block-patterns is needed to register each individual block + * apsc-patterns is the collection of those blocks. + * + * @return void + * @since 1.0.0 + */ + public function init__register_apsc_block_pattern_category() { + + register_block_pattern_category( + 'apsc-block-patterns', + array( + 'label' => esc_html__( 'APSC Blocks', 'apsc-blocks' ), + ) + ); + + register_block_pattern_category( + 'apsc-patterns', + array( + 'label' => esc_html__( 'APSC Patterns', 'apsc-blocks' ), + ) + ); + + register_block_pattern_category( + 'apsc-cards', + array( + 'label' => esc_html__( 'APSC Cards', 'apsc-blocks' ), + ) + ); + + register_block_pattern_category( + 'apsc-buttons', + array( + 'label' => esc_html__( 'APSC Buttons', 'apsc-blocks' ), + ) + ); + + register_block_pattern_category( + 'apsc-heroes', + array( + 'label' => esc_html__( 'APSC Heroes', 'apsc-blocks' ), + ) + ); + + register_block_pattern_category( + 'apsc-ctas', + array( + 'label' => esc_html__( 'APSC Call to Actions', 'apsc-blocks' ), + ) + ); + + register_block_pattern_category( + 'apsc-footers', + array( + 'label' => esc_html__( 'APSC Footers', 'apsc-blocks' ), + ) + ); + }//end init__register_apsc_block_pattern_category() + + /** + * Register our card patterns. + * + * @return void + * @since 1.0.0 + */ + public function init__register_apsc_block_patterns() { + + // Get the cached patterns if available, otherwise generate and cache them. + // We cache so that we don't have to scan the filesystem every time. Cached for 8 hours. + $cached_patterns = $this->get_cached_patterns(); + + foreach ( $cached_patterns as $pattern ) { + register_block_pattern( + $pattern['slug'], + array( + 'title' => esc_html( $pattern['title'] ), + 'categories' => $pattern['categories'], + 'description' => esc_html( $pattern['description'] ), + 'content' => $pattern['content'], + ) + ); + } + }//end init__register_apsc_block_patterns() + + /** + * Get the cached patterns if available, otherwise generate and cache them. + * + * @return mixed The cached or generated patterns data. + */ + private function get_cached_patterns() { + + $cache_key = 'apsc_block_patterns_cache'; + $cached_patterns = get_transient( $cache_key ); + + if ( false === $cached_patterns ) { + $cached_patterns = $this->generate_patterns_data(); + // Cache for 8 hours. Adjust the duration according to your needs. + set_transient( $cache_key, $cached_patterns, 8 * HOUR_IN_SECONDS ); + } + + return $cached_patterns; + }//end get_cached_patterns() + + /** + * Generate patterns data from JSON files and PHP files. + * + * @return array Patterns data array containing slug, title, categories, description, and content. + */ + private function generate_patterns_data() { + $patterns_data = array(); + + // Array of directories to search for patterns. + $pattern_directories = array( + UBC_APSCBLOCKS_PLUGIN_DIR . 'inc/patterns/', + UBC_APSCBLOCKS_PLUGIN_DIR . 'inc/blocks/', + // Add more directories here as needed. + ); + + foreach ( $pattern_directories as $pattern_root ) { + if ( ! is_dir( $pattern_root ) ) { + continue; // Skip if the directory does not exist. + } + + $directories = new \RecursiveDirectoryIterator( $pattern_root ); + $iterators = new \RecursiveIteratorIterator( $directories ); + $pattern_files = new \RegexIterator( $iterators, '/^.+pattern\.json$/i', \RecursiveRegexIterator::GET_MATCH ); + + foreach ( $pattern_files as $file_info ) { + $pattern_data = json_decode( file_get_contents( $file_info[0] ), true ); + if ( is_array( $pattern_data ) ) { + $directory_path = dirname( $file_info[0] ); + $php_file_name = basename( $directory_path ) . '.php'; + $php_file_path = $directory_path . '/' . $php_file_name; + + if ( file_exists( $php_file_path ) ) { + $patterns_data[] = array( + 'slug' => $pattern_data['slug'], + 'title' => $pattern_data['title'], + 'categories' => $pattern_data['categories'], + 'description' => $pattern_data['description'], + 'content' => file_get_contents( $php_file_path ), + ); + } + } + } + } + + return $patterns_data; + } + + + /** + * Clear the block pattern cache when apsc-clear-block-patterns-cache=1 is in the URL and the + * user is an administrator. This is only doable from the dashboard (because it's on admin_init) + * + * @return void + */ + public function admin_init__maybe_clear_block_patterns_cache() { + + // Some guards to ensure we're in the right place, at the right time. + if ( ! isset( $_GET['apsc-clear-block-patterns-cache'] ) ) { + return; + } + + if ( 1 !== absint( $_GET['apsc-clear-block-patterns-cache'] ) ) { + return; + } + + if ( ! current_user_can( 'manage_options' ) ) { + return; + } + + $cache_key = 'apsc_block_patterns_cache'; + + // OK, admin user, in the dashboard, and specifically asking to rebuild the cache. Do it. + // Clear the cache. + delete_transient( $cache_key ); + + // Rebuild the cache by calling the method that generates the patterns data. + $cached_patterns = $this->generate_patterns_data(); + + // Cache for 8 hours. Adjust the duration according to your needs. + set_transient( $cache_key, $cached_patterns, 8 * HOUR_IN_SECONDS ); + + // Redirect to the same page without the query parameter to avoid repeated cache clearing. + wp_redirect( remove_query_arg( 'apsc-clear-block-patterns-cache' ) ); + exit; + }//end admin_init__maybe_clear_block_patterns_cache() + + /** + * Enqueue the block editor styles overrides which help the APSC style guide look the same + * in the editor as it does on the front-end. + * + * @return void + */ + public function enqueue_block_editor_assets__apsc_register_block_editor_styles() { + + // Path for the extra editor styles. + $css_file_path = 'assets/apsc-extra-editor-styles.css'; + + // Use plugins_url to get the full URL to the CSS file. + $css_file_url = UBC_APSCBLOCKS_PLUGIN_URL . $css_file_path; + + // Register the style sheet. + wp_register_style( 'apsc-extra-editor-styles', $css_file_url ); + + // Enqueue the style sheet. + wp_enqueue_style( 'apsc-extra-editor-styles' ); + }//end enqueue_block_editor_assets__apsc_register_block_editor_styles() + + + /** + * On the front-end, and in the editor, we need to make some adjustments for our patterns until the + * style guide can catch up. + * + * @return void + */ + public function enqueue_multiple__apsc_extra_pattern_styles() { + + $css_file_path = 'assets/apsc-extra-pattern-style.css'; + + // Use plugins_url to get the full URL to the CSS file. + $css_file_url = UBC_APSCBLOCKS_PLUGIN_URL . $css_file_path; + + // Register the style sheet. + wp_register_style( 'apsc-extra-pattern-styles', $css_file_url ); + + // Enqueue the style sheet. + wp_enqueue_style( 'apsc-extra-pattern-styles' ); + }//end enqueue_multiple__apsc_extra_pattern_styles() + + /** + * Register block styles for the different blocks which are part of the APSC Style Guide. + * They are in the inc/styles/{block-name} directories. Each block has its own JS and CSS file. + * In the future, ideally, just the JS to register the style would be great if we can change the + * APSC style Guide to include the relevant classes. + * + * - Buttons + * - Accordions + * - Tabs + * + * @return void + */ + public function init__register_block_styles() { + + $styles_root_path = UBC_APSCBLOCKS_PLUGIN_DIR . 'inc/styles/'; + + if ( ! is_dir( $styles_root_path ) ) { + return; // Exit if styles directory doesn't exist. + } + + $directories = new \RecursiveDirectoryIterator( $styles_root_path, \FilesystemIterator::SKIP_DOTS ); + $iterators = new \RecursiveIteratorIterator( $directories, \RecursiveIteratorIterator::SELF_FIRST ); + $iterators->setMaxDepth( 1 ); // Only need to go one level deep. + + foreach ( $iterators as $file ) { + if ( $file->isDir() ) { + $block_name = $file->getFilename(); + $relative_js_path = "inc/styles/{$block_name}/{$block_name}.js"; + $relative_css_path = "inc/styles/{$block_name}/{$block_name}.css"; + $js_file_url = UBC_APSCBLOCKS_PLUGIN_URL . $relative_js_path; + $css_file_url = UBC_APSCBLOCKS_PLUGIN_URL . $relative_css_path; + $js_file_path = UBC_APSCBLOCKS_PLUGIN_DIR . $relative_js_path; + $css_file_path = UBC_APSCBLOCKS_PLUGIN_DIR . $relative_css_path; + + // Enqueue JS for the block editor. + if ( file_exists( $js_file_path ) ) { + add_action( + 'enqueue_block_editor_assets', + function () use ( $js_file_url, $block_name, $js_file_path ) { + wp_enqueue_script( + "apsc-{$block_name}-editor-script", + $js_file_url, + array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ), + filemtime( $js_file_path ), + true + ); + } + ); + } + + // Enqueue CSS for both front and editor. + if ( file_exists( $css_file_path ) ) { + add_action( + 'enqueue_block_assets', + function () use ( $css_file_url, $block_name, $css_file_path ) { + wp_enqueue_style( + "apsc-{$block_name}-style", + $css_file_url, + array(), + filemtime( $css_file_path ) + ); + } + ); + } + } + } + }//end init__register_block_styles() +}//end class diff --git a/inc/patterns/buttons/apsc-default-all-modifiers/apsc-default-all-modifiers.php b/inc/patterns/buttons/apsc-default-all-modifiers/apsc-default-all-modifiers.php new file mode 100644 index 0000000..9797e5f --- /dev/null +++ b/inc/patterns/buttons/apsc-default-all-modifiers/apsc-default-all-modifiers.php @@ -0,0 +1,5 @@ + +
+
All modifiers
+
+ diff --git a/inc/patterns/buttons/apsc-default-all-modifiers/pattern.json b/inc/patterns/buttons/apsc-default-all-modifiers/pattern.json new file mode 100644 index 0000000..5cd0611 --- /dev/null +++ b/inc/patterns/buttons/apsc-default-all-modifiers/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Default Button that is full-width, has an external link, and is normal-case.", + "slug": "apsc-patterns/default-button-all-modifiers", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "An example of a button with all of the possible modifiers." +} diff --git a/inc/patterns/buttons/apsc-default-external/apsc-default-external.php b/inc/patterns/buttons/apsc-default-external/apsc-default-external.php new file mode 100644 index 0000000..f495e92 --- /dev/null +++ b/inc/patterns/buttons/apsc-default-external/apsc-default-external.php @@ -0,0 +1,5 @@ + +
+
External
+
+ diff --git a/inc/patterns/buttons/apsc-default-external/pattern.json b/inc/patterns/buttons/apsc-default-external/pattern.json new file mode 100644 index 0000000..a2a2947 --- /dev/null +++ b/inc/patterns/buttons/apsc-default-external/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Default Button with an External Link Indicator", + "slug": "apsc-patterns/default-button-external", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use when redirecting user to external webpage." +} diff --git a/inc/patterns/buttons/apsc-default-full-width/apsc-default-full-width.php b/inc/patterns/buttons/apsc-default-full-width/apsc-default-full-width.php new file mode 100644 index 0000000..d70260d --- /dev/null +++ b/inc/patterns/buttons/apsc-default-full-width/apsc-default-full-width.php @@ -0,0 +1,5 @@ + +
+
Full Width
+
+ diff --git a/inc/patterns/buttons/apsc-default-full-width/pattern.json b/inc/patterns/buttons/apsc-default-full-width/pattern.json new file mode 100644 index 0000000..b9892eb --- /dev/null +++ b/inc/patterns/buttons/apsc-default-full-width/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Default Button that is full-width.", + "slug": "apsc-patterns/default-button-full-width", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use so button takes all available width." +} diff --git a/inc/patterns/buttons/apsc-default-normal-case-external/apsc-default-normal-case-external.php b/inc/patterns/buttons/apsc-default-normal-case-external/apsc-default-normal-case-external.php new file mode 100644 index 0000000..e568088 --- /dev/null +++ b/inc/patterns/buttons/apsc-default-normal-case-external/apsc-default-normal-case-external.php @@ -0,0 +1,5 @@ + +
+
Combined
+
+ diff --git a/inc/patterns/buttons/apsc-default-normal-case-external/pattern.json b/inc/patterns/buttons/apsc-default-normal-case-external/pattern.json new file mode 100644 index 0000000..44dfc5b --- /dev/null +++ b/inc/patterns/buttons/apsc-default-normal-case-external/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Default Button with normal case text and an external link indicator.", + "slug": "apsc-patterns/default-button-normal-case-external", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Both an external link and a normal-case text button." +} diff --git a/inc/patterns/buttons/apsc-default-normal-case/apsc-default-normal-case.php b/inc/patterns/buttons/apsc-default-normal-case/apsc-default-normal-case.php new file mode 100644 index 0000000..65ffeb3 --- /dev/null +++ b/inc/patterns/buttons/apsc-default-normal-case/apsc-default-normal-case.php @@ -0,0 +1,5 @@ + +
+
Normal Case
+
+ diff --git a/inc/patterns/buttons/apsc-default-normal-case/pattern.json b/inc/patterns/buttons/apsc-default-normal-case/pattern.json new file mode 100644 index 0000000..205fa77 --- /dev/null +++ b/inc/patterns/buttons/apsc-default-normal-case/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Default Button with normal case text.", + "slug": "apsc-patterns/default-button-normal-case", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use when do not want to use default upper-case." +} diff --git a/inc/patterns/buttons/apsc-default/apsc-default.php b/inc/patterns/buttons/apsc-default/apsc-default.php new file mode 100644 index 0000000..bc84e03 --- /dev/null +++ b/inc/patterns/buttons/apsc-default/apsc-default.php @@ -0,0 +1,5 @@ + +
+
Default
+
+ diff --git a/inc/patterns/buttons/apsc-default/pattern.json b/inc/patterns/buttons/apsc-default/pattern.json new file mode 100644 index 0000000..769aff3 --- /dev/null +++ b/inc/patterns/buttons/apsc-default/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Default Button", + "slug": "apsc-patterns/default-button", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "The default button style should be used in most cases. UBC Dark Blue border with white background and blue text. Inverses on hover." +} diff --git a/inc/patterns/buttons/apsc-inverse/apsc-inverse.php b/inc/patterns/buttons/apsc-inverse/apsc-inverse.php new file mode 100644 index 0000000..3ea2c2b --- /dev/null +++ b/inc/patterns/buttons/apsc-inverse/apsc-inverse.php @@ -0,0 +1,5 @@ + +
+
Inverse
+
+ diff --git a/inc/patterns/buttons/apsc-inverse/pattern.json b/inc/patterns/buttons/apsc-inverse/pattern.json new file mode 100644 index 0000000..eb39335 --- /dev/null +++ b/inc/patterns/buttons/apsc-inverse/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Inverse Button", + "slug": "apsc-patterns/inverse-button", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use on a coloured background (consider WCAG 2.0 contrast requirements)." +} diff --git a/inc/patterns/buttons/apsc-primary/apsc-primary.php b/inc/patterns/buttons/apsc-primary/apsc-primary.php new file mode 100644 index 0000000..70ce8e5 --- /dev/null +++ b/inc/patterns/buttons/apsc-primary/apsc-primary.php @@ -0,0 +1,5 @@ + +
+
Primary
+
+ diff --git a/inc/patterns/buttons/apsc-primary/pattern.json b/inc/patterns/buttons/apsc-primary/pattern.json new file mode 100644 index 0000000..b7e3f43 --- /dev/null +++ b/inc/patterns/buttons/apsc-primary/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Primary Button", + "slug": "apsc-patterns/primary-button", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use for the most important call to action on a page." +} diff --git a/inc/patterns/buttons/apsc-secondary/apsc-secondary.php b/inc/patterns/buttons/apsc-secondary/apsc-secondary.php new file mode 100644 index 0000000..c58b275 --- /dev/null +++ b/inc/patterns/buttons/apsc-secondary/apsc-secondary.php @@ -0,0 +1,5 @@ + +
+
Secondary
+
+ diff --git a/inc/patterns/buttons/apsc-secondary/pattern.json b/inc/patterns/buttons/apsc-secondary/pattern.json new file mode 100644 index 0000000..18801b9 --- /dev/null +++ b/inc/patterns/buttons/apsc-secondary/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Secondary Button", + "slug": "apsc-patterns/secondary-button", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use to draw attention to a button within a page of dark text." +} diff --git a/inc/patterns/buttons/apsc-tertiary/apsc-tertiary.php b/inc/patterns/buttons/apsc-tertiary/apsc-tertiary.php new file mode 100644 index 0000000..1745dd6 --- /dev/null +++ b/inc/patterns/buttons/apsc-tertiary/apsc-tertiary.php @@ -0,0 +1,5 @@ + +
+
Tertiary
+
+ diff --git a/inc/patterns/buttons/apsc-tertiary/pattern.json b/inc/patterns/buttons/apsc-tertiary/pattern.json new file mode 100644 index 0000000..85cf24c --- /dev/null +++ b/inc/patterns/buttons/apsc-tertiary/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Tertiary Button", + "slug": "apsc-patterns/tertiary-button", + "categories": ["apsc-patterns","apsc-buttons"], + "description": "Use to draw attention to a button within a page of dark text." +} diff --git a/inc/patterns/cards/horizontal-media-and-text/horizontal-media-and-text.php b/inc/patterns/cards/horizontal-media-and-text/horizontal-media-and-text.php new file mode 100644 index 0000000..761928f --- /dev/null +++ b/inc/patterns/cards/horizontal-media-and-text/horizontal-media-and-text.php @@ -0,0 +1,87 @@ + +
+ + +
+
+ + APSC graphic device over gradient + +
+
+ +

Faculty

+ + + +

+ +
+
+ + + +
+
+ +

Engineering

+ + + +

This card has some paragraph text description

+ +
+
+ + Engineering graphic device over gradient + +
+
+ + + +
+
+ + Nursing graphic device over gradient background + +
+
+ +

Nursing

+ +
+
+ + + +
+
+ +

SALA

+ +
+
+ + SALA graphic device over gradient + +
+
+ + + +
+
+ + SCARP graphic device over gradient + +
+
+ +

SCARP

+ +
+
+ +
+ diff --git a/inc/patterns/cards/horizontal-media-and-text/pattern.json b/inc/patterns/cards/horizontal-media-and-text/pattern.json new file mode 100644 index 0000000..79f6161 --- /dev/null +++ b/inc/patterns/cards/horizontal-media-and-text/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Horizontal Cards", + "slug": "apsc-patterns/horizontal-card", + "categories": ["apsc-patterns","apsc-cards"], + "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." +} diff --git a/inc/patterns/cards/media-and-text-large/media-and-text-large.php b/inc/patterns/cards/media-and-text-large/media-and-text-large.php new file mode 100644 index 0000000..21bf46f --- /dev/null +++ b/inc/patterns/cards/media-and-text-large/media-and-text-large.php @@ -0,0 +1,83 @@ + +
+ + +
+
+ + APSC graphic device over gradient + +
+
+ +

Faculty

+ +
+
+ + + +
+
+ + Engineering graphic device over gradient + +
+
+ +

Engineering

+ + + +

This card has some paragraph text description. Is it something to do with the extra text?

+ +
+
+ + + +
+
+ + Nursing graphic device over gradient background + +
+
+ +

Nursing

+ +
+
+ + + +
+
+ + SALA graphic device over gradient + +
+
+ +

SALA

+ +
+
+ + + +
+
+ + SCARP graphic device over gradient + +
+
+ +

SCARP

+ +
+
+ +
+ diff --git a/inc/patterns/cards/media-and-text-large/pattern.json b/inc/patterns/cards/media-and-text-large/pattern.json new file mode 100644 index 0000000..9c649a0 --- /dev/null +++ b/inc/patterns/cards/media-and-text-large/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Media + Text (Large) Cards", + "slug": "apsc-patterns/media-and-text-large-cards", + "categories": ["apsc-patterns","apsc-cards"], + "description": "A group of Media & Text blocks. The class card-columns__large is applied to the group, links are applied on the image. Two large cards side by side on tablets (based on full width template, viewports wider than 570px). The minimum card width fits the word 'Mechatronics' in the heading." +} diff --git a/inc/patterns/cards/media-and-text-medium/media-and-text-medium.php b/inc/patterns/cards/media-and-text-medium/media-and-text-medium.php new file mode 100644 index 0000000..9ab4230 --- /dev/null +++ b/inc/patterns/cards/media-and-text-medium/media-and-text-medium.php @@ -0,0 +1,84 @@ + +
+ + +
+
+ + APSC graphic device over gradient + +
+
+ +

Faculty

+ +
+
+ + + +
+
+ + Engineering graphic device over gradient + +
+
+ +

Engineering

+ + + +

This card has some paragraph text description

+ +
+
+ + + +
+
+ + Nursing graphic device over gradient background + +
+
+ +

Nursing

+ +
+
+ + + +
+
+ + SALA graphic device over gradient + +
+
+ +

SALA

+ +
+
+ + + +
+
+ + SCARP graphic device over gradient + +
+
+ +

SCARP

+ +
+
+ + +
+ diff --git a/inc/patterns/cards/media-and-text-medium/pattern.json b/inc/patterns/cards/media-and-text-medium/pattern.json new file mode 100644 index 0000000..9051cb0 --- /dev/null +++ b/inc/patterns/cards/media-and-text-medium/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Media + Text (Medium) Cards", + "slug": "apsc-patterns/media-and-text-medium-cards", + "categories": ["apsc-patterns","apsc-cards"], + "description": "A group of Media & Text blocks. The class card-columns__medium is applied to the group, links are applied on the image. Three medium cards side by side (based on full width template, viewports wider than 691px). On smaller screens, the minimum card width-fits the word 'Engineering' in the heading." +} diff --git a/inc/patterns/cards/query-loop-card/pattern.json b/inc/patterns/cards/query-loop-card/pattern.json new file mode 100644 index 0000000..d1bf7c2 --- /dev/null +++ b/inc/patterns/cards/query-loop-card/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Vertical Card Specifically for Query Loop", + "slug": "apsc-patterns/query-loop-card", + "categories": ["apsc-patterns","apsc-cards"], + "description": "A single card specifically for the Query Loop." +} diff --git a/inc/patterns/cards/query-loop-card/query-loop-card.php b/inc/patterns/cards/query-loop-card/query-loop-card.php new file mode 100644 index 0000000..f41c0b7 --- /dev/null +++ b/inc/patterns/cards/query-loop-card/query-loop-card.php @@ -0,0 +1,17 @@ + +
+ + + + + + + + + + + + + +
+ diff --git a/inc/patterns/cards/v3-horizontal-w-sub-and-date-grey/pattern.json b/inc/patterns/cards/v3-horizontal-w-sub-and-date-grey/pattern.json new file mode 100644 index 0000000..d78b5e5 --- /dev/null +++ b/inc/patterns/cards/v3-horizontal-w-sub-and-date-grey/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Horizontal Card with subtitle and date Grey Background", + "slug": "apsc-patterns/v3-horizontal-w-sub-and-date-grey", + "categories": ["apsc-patterns","apsc-cards"], + "description": "A single horizontal card with subtitle and date with grey background." +} diff --git a/inc/patterns/cards/v3-horizontal-w-sub-and-date-grey/v3-horizontal-w-sub-and-date-grey.php b/inc/patterns/cards/v3-horizontal-w-sub-and-date-grey/v3-horizontal-w-sub-and-date-grey.php new file mode 100644 index 0000000..122948b --- /dev/null +++ b/inc/patterns/cards/v3-horizontal-w-sub-and-date-grey/v3-horizontal-w-sub-and-date-grey.php @@ -0,0 +1,26 @@ + +
+
+ + + +
+
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions.  

+ + + +

December 20, 2023

+ +
+
+ diff --git a/inc/patterns/cards/v3-horizontal-w-sub-and-date/pattern.json b/inc/patterns/cards/v3-horizontal-w-sub-and-date/pattern.json new file mode 100644 index 0000000..7cc9881 --- /dev/null +++ b/inc/patterns/cards/v3-horizontal-w-sub-and-date/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Horizontal Card with subtitle and date", + "slug": "apsc-patterns/v3-horizontal-w-sub-and-date", + "categories": ["apsc-patterns","apsc-cards"], + "description": "A single horizontal card with subtitle and date." +} diff --git a/inc/patterns/cards/v3-horizontal-w-sub-and-date/v3-horizontal-w-sub-and-date.php b/inc/patterns/cards/v3-horizontal-w-sub-and-date/v3-horizontal-w-sub-and-date.php new file mode 100644 index 0000000..5e2e222 --- /dev/null +++ b/inc/patterns/cards/v3-horizontal-w-sub-and-date/v3-horizontal-w-sub-and-date.php @@ -0,0 +1,26 @@ + +
+
+ + + +
+
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions.  

+ + + +

December 20, 2023

+ +
+
+ diff --git a/inc/patterns/cards/v3-with-subtitle-date-and-tags-large/pattern.json b/inc/patterns/cards/v3-with-subtitle-date-and-tags-large/pattern.json new file mode 100644 index 0000000..f33fe34 --- /dev/null +++ b/inc/patterns/cards/v3-with-subtitle-date-and-tags-large/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Media + Text (Large) Cards with Subtitle, Date, and Tags", + "slug": "apsc-patterns/v3-with-subtitle-date-and-tags-large", + "categories": ["apsc-patterns","apsc-cards"], + "description": "Large vertical cards with subtitle, date, and tags." +} diff --git a/inc/patterns/cards/v3-with-subtitle-date-and-tags-large/v3-with-subtitle-date-and-tags-large.php b/inc/patterns/cards/v3-with-subtitle-date-and-tags-large/v3-with-subtitle-date-and-tags-large.php new file mode 100644 index 0000000..58df7c7 --- /dev/null +++ b/inc/patterns/cards/v3-with-subtitle-date-and-tags-large/v3-with-subtitle-date-and-tags-large.php @@ -0,0 +1,83 @@ + +
+ + +
+ +
+ +
+ +
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions and nearly every aspect of economic, social, political, technological and environmental change is now urbanized. Now, more than ever, we need people who are trained to understand and shape urbanization from the public, private and civic sectors.  

+ + + +
+ +

tag1

+ + + +

tag 2

+ +
+ + + +

December 20, 2023

+ +
+
+ + + +
+ +
+ +
+ +
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions and nearly every aspect of economic, social, political, technological and environmental change is now urbanized. Now, more than ever, we need people who are trained to understand and shape urbanization from the public, private and civic sectors.  

+ + + +
+ +

tag1

+ + + +

tag 2

+ +
+ + + +

December 20, 2023

+ +
+
+ + +
+ diff --git a/inc/patterns/cards/v3-with-subtitle-date-and-tags-med/pattern.json b/inc/patterns/cards/v3-with-subtitle-date-and-tags-med/pattern.json new file mode 100644 index 0000000..2053752 --- /dev/null +++ b/inc/patterns/cards/v3-with-subtitle-date-and-tags-med/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Media + Text (Medium) Cards with Subtitle, Date, and Tags", + "slug": "apsc-patterns/v3-with-subtitle-date-and-tags-med", + "categories": ["apsc-patterns","apsc-cards"], + "description": "Medium vertical cards with subtitle, date, and tags." +} diff --git a/inc/patterns/cards/v3-with-subtitle-date-and-tags-med/v3-with-subtitle-date-and-tags-med.php b/inc/patterns/cards/v3-with-subtitle-date-and-tags-med/v3-with-subtitle-date-and-tags-med.php new file mode 100644 index 0000000..7ca1c98 --- /dev/null +++ b/inc/patterns/cards/v3-with-subtitle-date-and-tags-med/v3-with-subtitle-date-and-tags-med.php @@ -0,0 +1,133 @@ + +
+ + +
+ +
+ +
+ +
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions and nearly every aspect of economic, social, political, technological and environmental change is now urbanized. Now, more than ever, we need people who are trained to understand and shape urbanization from the public, private and civic sectors.  

+ + + +
+ +

link to apsc

+ + + +

link to google

+ +
+ + + +

December 20, 2023

+ +
+
+ + + +
+
+ + + +
+
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions and nearly every aspect of economic, social, political, technological and environmental change is now urbanized. Now, more than ever, we need people who are trained to understand and shape urbanization from the public, private and civic sectors.  

+ + + +
+ +

Alumni

+ + + +

Engineering

+ + + +

Rising Stars

+ + + +

Student Experience

+ + + +

Women in Engineering

+ +
+ + + +

December 20, 2023

+ +
+
+ + + +
+
+ +
+ +
+ +

UBC APPLIED SCIENCE

+ + + +

Shaping tomorrow's cities: SCARP and Geography introduce an innovative Major in Urban Studies

+ + + +

For the first time in human history, the majority of the world's population lives in cities. And over the next century, the world’s net population growth will take place in urban regions and nearly every aspect of economic, social, political, technological and environmental change is now urbanized. Now, more than ever, we need people who are trained to understand and shape urbanization from the public, private and civic sectors.  

+ + + +
+ +

tag1

+ + + +

tag 2

+ +
+ + + +

December 20, 2023

+ +
+
+ + +
+ diff --git a/inc/patterns/ctas/cta-standalone/cta-standalone.php b/inc/patterns/ctas/cta-standalone/cta-standalone.php new file mode 100644 index 0000000..c33757f --- /dev/null +++ b/inc/patterns/ctas/cta-standalone/cta-standalone.php @@ -0,0 +1,39 @@ + +
+
+
+ +
+ + + +
+ +
+ + + +
+ +

UBC Engineering Takes Top Place Ranking In Canada

+ + + +

Some text here for this CTA. The example is a couple of lines long so lets go with that for now.

+ + + +
+ +
+ Read More - UBC Engineering Ranking +
+ +
+ +
+ +
+ +
+ diff --git a/inc/patterns/ctas/cta-standalone/pattern.json b/inc/patterns/ctas/cta-standalone/pattern.json new file mode 100644 index 0000000..4da4c57 --- /dev/null +++ b/inc/patterns/ctas/cta-standalone/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Call To Action (Standalone - no background)", + "slug": "apsc-patterns/cta-standalone", + "categories": ["apsc-patterns","apsc-ctas"], + "description": "Call To Action with image alongside a heading, text, and button." +} diff --git a/inc/patterns/footers/text-cta-with-graphic/pattern.json b/inc/patterns/footers/text-cta-with-graphic/pattern.json new file mode 100644 index 0000000..325372b --- /dev/null +++ b/inc/patterns/footers/text-cta-with-graphic/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "A footer with a heading, text, a call to action, with a background graphic.", + "slug": "apsc-patterns/footer-text-cta-with-graphic", + "categories": ["apsc-patterns","apsc-footers"], + "description": "The default footer with a dark blue background." +} diff --git a/inc/patterns/footers/text-cta-with-graphic/text-cta-with-graphic.php b/inc/patterns/footers/text-cta-with-graphic/text-cta-with-graphic.php new file mode 100644 index 0000000..0631a27 --- /dev/null +++ b/inc/patterns/footers/text-cta-with-graphic/text-cta-with-graphic.php @@ -0,0 +1,23 @@ + +
+
+
+
+

Work With Us

+ + + +

We actively seek collaboration with industry, non-profit and government partners to accelerate sustainable solutions.

+
+ + + +
+
+
Contact us
+
+
+
+
+
+ diff --git a/inc/patterns/heros/image-title-subtitle-gradient/image-title-subtitle-gradient.php b/inc/patterns/heros/image-title-subtitle-gradient/image-title-subtitle-gradient.php new file mode 100644 index 0000000..166e4e4 --- /dev/null +++ b/inc/patterns/heros/image-title-subtitle-gradient/image-title-subtitle-gradient.php @@ -0,0 +1,29 @@ + +
+ + +
+ + + 2 students walk away from the camera along main mall at UBC. One is wearing a black jacket and blue pants, the other wears an orange jacket, with a backpack, and black pants. In the background is a UBC Salf Walk Blue telephone. + +
+ + +
+ + + + +

Your connection to a world of opportunity

+ +
+ + +
+ +
+ + +
+ diff --git a/inc/patterns/heros/image-title-subtitle-gradient/pattern.json b/inc/patterns/heros/image-title-subtitle-gradient/pattern.json new file mode 100644 index 0000000..ffb6ffc --- /dev/null +++ b/inc/patterns/heros/image-title-subtitle-gradient/pattern.json @@ -0,0 +1,6 @@ +{ + "title": "Hero with an image, title, subtitle and gradient", + "slug": "apsc-patterns/horizontal-card", + "categories": ["apsc-patterns","apsc-heroes"], + "description": "The default hero which contains all items that can be included." +} diff --git a/inc/styles/accordion/accordion.css b/inc/styles/accordion/accordion.css new file mode 100644 index 0000000..94ff35e --- /dev/null +++ b/inc/styles/accordion/accordion.css @@ -0,0 +1,19 @@ +/** + * APSC Light Grey Accordions + */ +.wp-block-pb-accordion-item.is-style-apsc-light-grey .c-accordion__title { + background: #e6e6e6; + color: #002145; + text-decoration: none; + font-size: 1rem; + font-weight: 400; + line-height: 1.75; +} + +.wp-block-pb-accordion-item.is-style-apsc-light-grey .c-accordion__content { + border-top: 1px solid #e6e6e6; + border-color: transparent #e6e6e6 #e6e6e6; + border-style: solid; + border-width: 1px 1px 0; + padding: 1rem; +} diff --git a/inc/styles/accordion/accordion.js b/inc/styles/accordion/accordion.js new file mode 100644 index 0000000..fb40f72 --- /dev/null +++ b/inc/styles/accordion/accordion.js @@ -0,0 +1,5 @@ +// APSC Light Grey Accordions +wp.blocks.registerBlockStyle( 'pb/accordion-item', { + name: 'apsc-light-grey', + label: 'APSC Light Grey' +} ); diff --git a/inc/styles/button/button.css b/inc/styles/button/button.css new file mode 100644 index 0000000..3885a0b --- /dev/null +++ b/inc/styles/button/button.css @@ -0,0 +1,169 @@ +/** + * Ideally, all of this CSS goes away. It will require some adjustments to the style guide down the road. + */ + +/* The APSC Default Button ======================================================================= */ +.wp-block-button.is-style-apsc-default, +.wp-block-button.is-style-apsc-primary, +.wp-block-button.is-style-apsc-secondary, +.wp-block-button.is-style-apsc-tertiary, +.wp-block-button.is-style-apsc-inverse { + background-color: transparent; + border: 1px solid #002145; + box-shadow: none; + box-sizing: border-box; + color: #002145 !important; + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: 600; + letter-spacing: 1px; + line-height: 1.75; + padding: 1rem 2rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: background-color .2s ease-out; + vertical-align: middle; + border-radius: 0; + font-family: sans-serif; +} + +.wp-block-button.is-style-apsc-default:hover, +.wp-block-button.is-style-apsc-default:active, +.wp-block-button.is-style-apsc-default:focus { + box-shadow: none; + border-color: #002145; + background-color: #002145; + color: #fff !important; +} + +.wp-block-button.is-style-apsc-default .wp-block-button__link, +.wp-block-button.is-style-apsc-primary .wp-block-button__link, +.wp-block-button.is-style-apsc-default:hover .wp-block-button__link, +.wp-block-button.is-style-apsc-default:active .wp-block-button__link, +.wp-block-button.is-style-apsc-default:focus .wp-block-button__link, +.wp-block-button.is-style-apsc-primary:hover .wp-block-button__link, +.wp-block-button.is-style-apsc-primary:active .wp-block-button__link, +.wp-block-button.is-style-apsc-primary:focus .wp-block-button__link, +.wp-block-button.is-style-apsc-secondary .wp-block-button__link, +.wp-block-button.is-style-apsc-secondary:hover .wp-block-button__link, +.wp-block-button.is-style-apsc-secondary:active .wp-block-button__link, +.wp-block-button.is-style-apsc-secondary:focus .wp-block-button__link, +.wp-block-button.is-style-apsc-tertiary .wp-block-button__link, +.wp-block-button.is-style-apsc-tertiary:hover .wp-block-button__link, +.wp-block-button.is-style-apsc-tertiary:active .wp-block-button__link, +.wp-block-button.is-style-apsc-tertiary:focus .wp-block-button__link, +.wp-block-button.is-style-apsc-inverse .wp-block-button__link, +.wp-block-button.is-style-apsc-inverse:hover .wp-block-button__link, +.wp-block-button.is-style-apsc-inverse:active .wp-block-button__link, +.wp-block-button.is-style-apsc-inverse:focus .wp-block-button__link { + background-color: transparent; + border-width: 0; + color: inherit !important; + font-family: inherit; + font-size: inherit; + line-height: inherit; + padding: 0; + text-decoration: none; + text-transform: inherit; +} + +/* The APSC Primary Button ======================================================================= */ +body .wp-block-button.is-style-apsc-primary { + background-color: #002145; + border-color: #002145; + box-shadow: none; + color: #fff !important; +} + +body .wp-block-button.is-style-apsc-primary:hover, +body .wp-block-button.is-style-apsc-primary:active, +body .wp-block-button.is-style-apsc-primary:focus { + background-color: #fff; + border-color: #002145; + box-shadow: none; + color: #002145 !important; +} + +/* The APSC Secondary Button ======================================================================= */ +.wp-block-button.is-style-apsc-secondary { + border-color: #0055b7; + color: #0055b7; +} + +.wp-block-button.is-style-apsc-secondary:hover, +.wp-block-button.is-style-apsc-secondary:active, +.wp-block-button.is-style-apsc-secondary:focus { + background-color: #0055b7; + box-shadow: none; + color: #fff !important; +} + +.wp-block-button.is-style-apsc-secondary .wp-block-button__link { + color: #0055b7 !important; +} + +/* The APSC Tertiary Button ======================================================================= */ +.wp-block-button.is-style-apsc-tertiary { + background-color: #40b4e5; + border-color: #002145; + box-shadow: none; + color: #002145 !important; +} + +.wp-block-button.is-style-apsc-tertiary:hover, +.wp-block-button.is-style-apsc-tertiary:active, +.wp-block-button.is-style-apsc-tertiary:focus { + background-color: rgba(64, 180, 229, .5); + box-shadow: none; + color: #fff !important; +} + +/* The APSC Inverse Button ======================================================================= */ +.wp-block-button.is-style-apsc-inverse { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff !important; +} + +.wp-block-button.is-style-apsc-inverse:hover, +.wp-block-button.is-style-apsc-inverse:active, +.wp-block-button.is-style-apsc-inverse:focus { + border-color: #fff; + box-shadow: none; + background-color: hsla(0, 0%, 100%, .15); + color: #fff !important; +} + +/* The external link modifier ======================================================================= */ +.wp-block-button.is-style-apsc-default.external-link::after, +.wp-block-button.is-style-apsc-primary.external-link::after, +.wp-block-button.is-style-apsc-secondary.external-link::after, +.wp-block-button.is-style-apsc-tertiary.external-link::after, +.wp-block-button.is-style-apsc-inverse.external-link::after { + content: "\f08e"; + float: right; + font-family: FontAwesome; + margin-left: 1rem !important; +} + +/* The normal case modifier ======================================================================= */ +.wp-block-button.is-style-apsc-default.normal-case, +.wp-block-button.is-style-apsc-primary.normal-case, +.wp-block-button.is-style-apsc-secondary.normal-case, +.wp-block-button.is-style-apsc-tertiary.normal-case, +.wp-block-button.is-style-apsc-inverse.normal-case { + text-transform: none; +} + +/* The full-width modifier ======================================================================= */ +.wp-block-button.is-style-apsc-default.full-width, +.wp-block-button.is-style-apsc-primary.full-width, +.wp-block-button.is-style-apsc-secondary.full-width, +.wp-block-button.is-style-apsc-tertiary.full-width, +.wp-block-button.is-style-apsc-inverse.full-width { + text-align: start; + width: 100%; +} diff --git a/inc/styles/button/button.js b/inc/styles/button/button.js new file mode 100644 index 0000000..2930299 --- /dev/null +++ b/inc/styles/button/button.js @@ -0,0 +1,35 @@ +// APSC Default +wp.blocks.registerBlockStyle( 'core/button', { + name: 'apsc-default', + label: 'APSC Default' +} ); + +// APSC Primary +wp.blocks.registerBlockStyle( 'core/button', { + name: 'apsc-primary', + label: 'APSC Primary' +} ); + +// APSC Secondary +wp.blocks.registerBlockStyle( 'core/button', { + name: 'apsc-secondary', + label: 'APSC Secondary' +} ); + +// APSC Tertiary +wp.blocks.registerBlockStyle( 'core/button', { + name: 'apsc-tertiary', + label: 'APSC Tertiary' +} ); + +// APSC Inverse +wp.blocks.registerBlockStyle( 'core/button', { + name: 'apsc-inverse', + label: 'APSC Inverse' +} ); + +// Remove the fill and outline styles, to make things a little neater for people. +wp.domReady(() => { + wp.blocks.unregisterBlockStyle('core/button', 'fill'); + wp.blocks.unregisterBlockStyle('core/button', 'outline'); +} ); diff --git a/inc/styles/pagination/pagination.css b/inc/styles/pagination/pagination.css new file mode 100644 index 0000000..bd91734 --- /dev/null +++ b/inc/styles/pagination/pagination.css @@ -0,0 +1,47 @@ +/** + * The Pagination styles in the APSC Style guide rely on markup that the + * Query Loop Block doesn't output. So we'll adjust that here, with the intention +* that this file can be removed in the future. + */ +.wp-block-query-pagination:has(.wp-block-query-pagination-numbers.is-style-apsc-page-numbers) { + gap: 0; +} + +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers { + margin: 1em 0 0 0 !important; +} + +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers span, +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers a { + padding: 12px; + color: #002145; + font-size: 1rem; + font-weight: 400; + line-height: 1.75; + margin: 0; +} + +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers a { + text-decoration: none; +} + +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers span.current { + background: #C5C5C5; +} + +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers a:hover, +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers a:focus, +.is-style-apsc-page-numbers.wp-block-query-pagination-numbers a:active { + background-color: #002145; + color: #fff; +} + +/** + * With the margin top we give the pagination numbers, the arrows look weird, so we + * need to adjust them downwards. + */ +.wp-block-query-pagination:has(.wp-block-query-pagination-numbers.is-style-apsc-page-numbers) .wp-block-query-pagination-next-arrow, +.wp-block-query-pagination:has(.wp-block-query-pagination-numbers.is-style-apsc-page-numbers) .wp-block-query-pagination-previous-arrow { + position: relative; + top: 7px; +} diff --git a/inc/styles/pagination/pagination.js b/inc/styles/pagination/pagination.js new file mode 100644 index 0000000..d168d48 --- /dev/null +++ b/inc/styles/pagination/pagination.js @@ -0,0 +1,5 @@ +// APSC Default Pagination +wp.blocks.registerBlockStyle( 'core/query-pagination-numbers', { + name: 'apsc-page-numbers', + label: 'APSC Pagination' +} ); diff --git a/inc/styles/paragraph/paragraph.css b/inc/styles/paragraph/paragraph.css new file mode 100644 index 0000000..6428658 --- /dev/null +++ b/inc/styles/paragraph/paragraph.css @@ -0,0 +1,17 @@ +/* A lead paragraph ======================================================================= */ +.wp-block-paragraph.is-style-apsc-lead, +p.is-style-apsc-lead { + line-height: 1.25; + font-size: 1.5rem; + font-weight: 400; +} + +/** + * The APSC css only adds margins to paragraph tags that are DIRECTLY descendants of the entry-content div. + * If they’re within a group, for example, none of them get margins. + */ +.entry-content > * > p, +.entry-content > * > * > p, +.entry-content > * > * > * > p { + margin-bottom: 1.5rem; +} diff --git a/inc/styles/paragraph/paragraph.js b/inc/styles/paragraph/paragraph.js new file mode 100644 index 0000000..ae5a7bf --- /dev/null +++ b/inc/styles/paragraph/paragraph.js @@ -0,0 +1,5 @@ +// APSC Lead +wp.blocks.registerBlockStyle( 'core/paragraph', { + name: 'apsc-lead', + label: 'Lead' +} ); diff --git a/inc/styles/tabs/tabs.css b/inc/styles/tabs/tabs.css new file mode 100644 index 0000000..5fb81c9 --- /dev/null +++ b/inc/styles/tabs/tabs.css @@ -0,0 +1,64 @@ +/** + * APSC Tabs Styles. + * Ideally, this might be able to go away in the future, if the APSC + * style guide can be adjusted to be consistent with the tab block. + */ + +/* The APSC Tabs ======================================================================= */ +.wp-block-ubc-tabs.is-style-apsc-tabs, +.ubc-accordion-tabs.is-style-apsc-tabs { + --ubc-tabs-block-tab-nav-top-border-background: transparent; + --ubc-tabs-block-tab-nav-background: transparent; + --ubc-tabs-block-tab-nav-selected-background: transparent; + --ubc-tabs-block-tab-nav-selected-text-color: #012145; + --ubc-tabs-block-tab-nav-text-color: #012145; + --ubc-tabs-block-tab-nav-border-color: transparent; + --ubc-tabs-block-content-border-color: transparent; + --ubc-tabs-block-accordion-trigger-background: transparent; + --ubc-tabs-block-accordion-trigger-selected-background: transparent; +} + +/** + * The main tab controls have a border bottom across the full width, always. Override the APSE + * style guide which gives all lists a style type by default. + */ +.wp-block-ubc-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list, +.ubc-accordion-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list { + list-style-type: none; + border-bottom: 1px solid #d7e0e7; + position: relative; +} + +.wp-block-ubc-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list li, +.ubc-accordion-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list li { + padding: 0 40px; +} + +.wp-block-ubc-tabs.is-style-apsc-tabs a:hover, +.ubc-accordion-tabs.is-style-apsc-tabs button:hover { + border-bottom: 3.5px solid #00a7e1; +} + +.wp-block-ubc-tabs.is-style-apsc-tabs a.is-selected, +.wp-block-ubc-tabs.is-style-apsc-tabs a.is-selected:hover, +.ubc-accordion-tabs.is-style-apsc-tabs button.is-selected, +.ubc-accordion-tabs.is-style-apsc-tabs button.is-selected:hover { + font-weight: 600; + border-bottom: 3.5px solid #00a7e1; +} + +.ubc-accordion-tabs.is-style-apsc-tabs button, +.ubc-accordion-tabs.is-style-apsc-tabs button:hover { + width: 100%; +} + +/** + * If there's 2 tabs, they each span half the width. + */ +.wp-block-ubc-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list li:first-child:nth-last-child(2), +.wp-block-ubc-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list li:first-child:nth-last-child(2)~li, +.ubc-accordion-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list li:first-child:nth-last-child(2), +.ubc-accordion-tabs.is-style-apsc-tabs ul.ubc-accordion-tabs__tab-list li:first-child:nth-last-child(2)~li { + padding: 0; + width: 50%; +} diff --git a/inc/styles/tabs/tabs.js b/inc/styles/tabs/tabs.js new file mode 100644 index 0000000..4764bc3 --- /dev/null +++ b/inc/styles/tabs/tabs.js @@ -0,0 +1,4 @@ +wp.blocks.registerBlockStyle('ubc/tabs', { + name: 'apsc-tabs', + label: 'APSC Tabs' +}); diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..24d2ae8 --- /dev/null +++ b/readme.md @@ -0,0 +1,64 @@ +# APSC Blocks + +This plugin registers block patterns and block styles for UBC's Faculty of Applied Science and its units such as Engineering, Nursing, SALA, and SCARP. + +The block patterns are available when editing a post or page using the Block Editor (Gutenberg) by clicking the blue button towards the top left of the editor with a Plus (+) symbol on it which toggles the block inserter, and then selecting 'Pattenrs'. All APSC Patterns are available in one of several pattern categories such as Buttons, Cards, Heroes, and CTAs. + +The block styles are registered for individual blocks which contains various styles within the Applied Science Design System and can be accessed by selecting an already-inserted a block (such as a button), selecting the 'Styles' tab, and then selecting one of the registered styles such as 'APSC Primary'. + +This plugin is developed to go hand-in-hand with the APSC Site Settings plugin which adds additional theme options to the UBC CLF (2023) theme including automatically adjusting the colour palettes and gradients based on the chosen unit. + +## Developer Documentation + +The below docs are primarily for the APSC Brand/Communications team and are intended to help them understand how to register new patterns or styles. + +### Registering a New Pattern + +Each block pattern consists of 2 files + +1. A PHP file named after the pattern i.e. `media-and-text-large.php` which contains the actual HTML of the pattern +2. A `pattern.json` file + +To register a new pattern, create a new directory within `inc/patterns/` with the type of pattern this is, for example, if you're registering a new card pattern called "Media and Text Small" (for example) then you'd create the `inc/patterns/cards/media-and-text-small` directory, and within there you'd place two files, `media-and-text-small.php` and `pattern.json`. + +The `pattern.json` file must contain 4 keys: + +title - the title shown when someone is viewing the different pattern names. Spaces and Special characters are allowed. +slug - a unique string for this pattern. Only lowecase letters, numbers, and a hyphen symbol are allowed. +categories - an array of pattern categories this pattern should be visble from (see 'registered pattern categories' below). Must be one of the registered pattern categories (either registered by this plugin, or WordPress core) +description - A full description of this pattern. Not directly shown to users, but useful for developers to know precisely what the pattern is. Spaces and special characters are allowed. + +So, for our example 'Media and Text Small' pattern, we might add a `pattern.json` which looked like this: + +```json +{ + "title": "Media + Text (Small) Cards", + "slug": "apsc-patterns/media-and-text-small-cards", + "categories": ["apsc-patterns", "apsc-cards"], + "description": "A detailed description of this pattern would go here..." +} +``` + +And the `media-and-text-small.php` file would contain the block-ready markup for this pattern. You may find it easier to create the pattern in the block editor itself first, and then copy and paste the block directly into this file. + +Save these 2 files, and commit them to this repo. (Submit a pull request to this repo from your own clone, and we will code review and deploy) + +Once the plugin has been deployed, the last thing you will need to do is clear the pattern cache. + +### Clearing the Pattern Cache + +Once a new pattern or style is registered, you will likely need to clear the pattern cache on the site you want this to be available from. This is something that doesn't have an 'interface' as it's designed to only be done once, and not something that might happen accidentally as it can be a fairly intensive process. + +From the dashboard of your site, as an administrator, append ?apsc-clear-block-patterns-cache=1 to the URL. i.e. https://some-site.sites.olt.ubc.ca/wp-admin/?apsc-clear-block-patterns-cache=1 and you will be redirected back to the same page, but without the apsc-clear-block-patterns-cache=1 part. This will have cleared the cache and your new pattern(s) will be available on that site. + +### Registered Pattern Categories + +There are several registered pattern categories, see `init__register_apsc_block_pattern_category()` : + +`APSC Cards` - Card Patterns +`APSC Buttons` - Button Patterns +`APSC Heroes` - Hero Patterns +`APSC Call to Actions` - Call to Action patterns +`APSC Footers` - Patterns specifically for the footer of a page or site +`APSC Blocks` - Designed for individual items that might be used as part of a pattern +`APSC Patterns` - Designed almost as a 'catch all' for most of the registered patterns