Skip to content

Commit

Permalink
Feat: Add full-page patterns for example Home, About, and Topic pages (…
Browse files Browse the repository at this point in the history 
…#364)

* Register "Page Examples" pattern category #350
* Add About Page Example
* Add Home Page Example
* Add Topic Page Example
  • Loading branch information
@Herm71
Herm71 authored Dec 11, 2024
1 parent 6f90139 commit 531e69b
Show file tree
Hide file tree
Showing 4 changed files with 684 additions and 0 deletions.
5 changes: 5 additions & 0 deletions lib/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@
array('label' => __('Banner', 'ucsc'))
);

register_block_pattern_category(
'examples',
array('label' => __('Page Examples', 'ucsc'))
);

register_block_pattern_category(
'grid',
array('label' => __('Grid', 'ucsc'))
Expand Down
145 changes: 145 additions & 0 deletions patterns/example-page-about.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<?php
/**
* Title: About Page
* Slug: ucsc-2022/about-page
* Categories: examples
*/
?>

<!-- wp:group {"align":"full","className":"ucsc-page-header","layout":{"type":"default"},"fontSize":"base"} -->
<div class="wp-block-group alignfull ucsc-page-header has-base-font-size"><!-- wp:cover {"url":"https://sandbox.wordpress.ucsc.edu/files/2023/10/9-13-21-Hummingbird-CL-007-3-1.jpg","id":1373,"alt":"Hummingbird","dimRatio":0,"minHeight":570,"minHeightUnit":"px","contentPosition":"center center","isDark":false,"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}},"className":"ucsc-page-header__content"} -->
<div class="wp-block-cover is-light ucsc-page-header__content" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:0;padding-bottom:0;min-height:570px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1373" alt="Hummingbird" src="https://sandbox.wordpress.ucsc.edu/files/2023/10/9-13-21-Hummingbird-CL-007-3-1.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:post-title {"level":1,"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"backgroundColor":"ucsc-primary-yellow","textColor":"ucsc-primary-blue","className":"ucsc-page-header__title primary-post-title","fontSize":"seven"} /--></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"var:preset|spacing|40"}},"border":{"width":"0px","style":"none","radius":"0px"}}} -->
<div class="wp-block-columns alignfull" style="border-style:none;border-width:0px;border-radius:0px;margin-top:0;margin-bottom:var(--wp--preset--spacing--40);padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0"}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph {"align":"center","backgroundColor":"ucsc-primary-blue","textColor":"white","className":"is-style-ucsc-intro-text"} -->
<p class="has-text-align-center is-style-ucsc-intro-text has-white-color has-ucsc-primary-blue-background-color has-text-color has-background">Use this block to write copy that will set the tone and give a high-level introduction to the page content/topic.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%","style":{"spacing":{"padding":{"right":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column" style="padding-right:var(--wp--preset--spacing--30);flex-basis:66.66%"><!-- wp:paragraph {"align":"center","backgroundColor":"ucsc-violator-yellow","className":"is-style-success"} -->
<p class="has-text-align-center is-style-success has-ucsc-violator-yellow-background-color has-background"><strong>Web editor! Looking for web writing best practices to match this page? </strong><a href="https://websites.ucsc.edu/guides/showcase/pattern-about-page/" data-type="page" data-id="2066">You can find them here.</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">H2 Subhead</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"is-style-ucsc-intro-text"} -->
<p class="is-style-ucsc-intro-text">This text starts to get more specific to the content of the page. It is an intro and should not be more than five sentences.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This level copy gets more granular and can be much longer. You can break it up with a video or photo and make it as long as needed to communicate your message. Remember, when you're promoting something on the web, it's best to use as few words as possible.</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtu.be/2NsDyg3A42o?si=aUXkPSV4fDxlyxw8","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio","style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio" style="margin-top:var(--wp--preset--spacing--30)"><div class="wp-block-embed__wrapper">
https://youtu.be/2NsDyg3A42o?si=aUXkPSV4fDxlyxw8
</div></figure>
<!-- /wp:embed -->

<!-- wp:separator {"backgroundColor":"lightest-gray"} -->
<hr class="wp-block-separator has-text-color has-lightest-gray-color has-alpha-channel-opacity has-lightest-gray-background-color has-background"/>
<!-- /wp:separator -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">Meet the team</h2>
<!-- /wp:heading -->

<!-- wp:ucscblocks/campusdirectory {"pageLayout":"tiled","automatedFeeds":false,"cruzidList":"lmnielse, gwenj, milpowel, raknight, jchafin, clagattu","strFacultyTypes":"{\u0022All\u0022:false,\u0022Regular Faculty\u0022:false,\u0022Lecturer\u0022:false,\u0022Emeriti\u0022:false,\u0022Research Professor\u0022:false,\u0022Researcher\u0022:false,\u0022Adjunct Faculty\u0022:false,\u0022Visiting Scholar\u0022:false,\u0022Graduate Student Instructor\u0022:false,\u0022Retired\u0022:false}","strStaffTypes":"{\u0022Regular Staff\u0022:true,\u0022Researcher\u0022:false,\u0022Postdoctoral Scholar\u0022:false}","strGradTypes":"{\u0022Grad Students\u0022:false}","manualAdd":true,"addCruzids":"","excludeCruzids":"","displayDeptartmentAffiliates":false,"linkToProfile":true,"linkOutToCampusDirectory":false,"strInformationTypes":"{\u0022Pronouns\u0022:false,\u0022Photo\u0022:true,\u0022Title\u0022:true,\u0022Department\u0022:false,\u0022Phone\u0022:true,\u0022Campus Email\u0022:true,\u0022Other Email\u0022:false,\u0022Fax\u0022:false,\u0022Website\u0022:false,\u0022Office Location\u0022:false,\u0022Office Hours\u0022:false,\u0022Mailstop\u0022:false,\u0022Mailing Address\u0022:false,\u0022Faculty Areas of Expertise\u0022:false,\u0022Summary of Expertise\u0022:false}","strInformationTypesTable":"{\u0022Pronouns\u0022:false,\u0022Title\u0022:true,\u0022Department\u0022:false,\u0022Phone\u0022:true,\u0022Campus Email\u0022:true,\u0022Other Email\u0022:false,\u0022Fax\u0022:false,\u0022Website\u0022:false,\u0022Office Location\u0022:false,\u0022Office Hours\u0022:false,\u0022Mailstop\u0022:false,\u0022Mailing Address\u0022:false,\u0022Faculty Areas of Expertise\u0022:false,\u0022Summary of Expertise\u0022:false}","department":"Communications \u0026 Marketing","division":"\u002d\u002d-","deptOrDiv":"dept"} /-->

<!-- wp:separator {"backgroundColor":"lightest-gray"} -->
<hr class="wp-block-separator has-text-color has-lightest-gray-color has-alpha-channel-opacity has-lightest-gray-background-color has-background"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Directions</h2>
<!-- /wp:heading -->

<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"0","left":"0"}}},"className":"ucsc-map-contact"} -->
<div class="wp-block-columns ucsc-map-contact" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"className":"ucsc-map-contact__map"} -->
<div class="wp-block-column ucsc-map-contact__map"><!-- wp:html -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12746.83386746128!2d-122.0694595657337!3d36.992891465250615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808e41a2ff8cbf4f%3A0x3a8e3b7c928320d5!2sUniversity%20of%20California%20Santa%20Cruz!5e0!3m2!1sen!2sus!4v1689093782636!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<!-- /wp:html --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"ucsc-primary-yellow","className":"ucsc-map-contact__connect"} -->
<div class="wp-block-column ucsc-map-contact__connect has-ucsc-primary-yellow-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Main location</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Main office<br>1165 High Street<br>Santa Cruz CA, 95062</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Additional Info</strong><br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

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

<!-- wp:paragraph -->
<p>Contact Info: placeholder</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30"}}},"backgroundColor":"lightest-gray"} -->
<div class="wp-block-columns has-lightest-gray-background-color has-background" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"two"} -->
<h3 class="wp-block-heading has-two-font-size">Subhead to give context to bulleted copy below</h3>
<!-- /wp:heading -->

<!-- wp:separator {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"light-gray"} -->
<hr class="wp-block-separator has-text-color has-light-gray-color has-alpha-channel-opacity has-light-gray-background-color has-background" style="margin-top:0;margin-bottom:0"/>
<!-- /wp:separator -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Short blurbs that are easy to read and remember</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Consider copy with facts or stats or benefits</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>These are usual memorable facts about your organization</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Your site visitors are most likely to remember items placed here</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Loading

0 comments on commit 531e69b

Please sign in to comment.