From 531e69bffaa6e1db6ab0aa27857381da4fd1c3e1 Mon Sep 17 00:00:00 2001 From: Jason Chafin Date: Wed, 11 Dec 2024 13:40:38 -0800 Subject: [PATCH] Feat: Add full-page patterns for example Home, About, and Topic pages (#364) * Register "Page Examples" pattern category #350 * Add About Page Example * Add Home Page Example * Add Topic Page Example --- lib/blocks.php | 5 + patterns/example-page-about.php | 145 ++++++++++++++++ patterns/example-page-home.php | 283 ++++++++++++++++++++++++++++++++ patterns/example-page-topic.php | 251 ++++++++++++++++++++++++++++ 4 files changed, 684 insertions(+) create mode 100644 patterns/example-page-about.php create mode 100644 patterns/example-page-home.php create mode 100644 patterns/example-page-topic.php diff --git a/lib/blocks.php b/lib/blocks.php index cad2cb6..c5dd9b0 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -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')) diff --git a/patterns/example-page-about.php b/patterns/example-page-about.php new file mode 100644 index 0000000..baf41fc --- /dev/null +++ b/patterns/example-page-about.php @@ -0,0 +1,145 @@ + + + +
+
Hummingbird
+
+
+ + + +
+
+

Use this block to write copy that will set the tone and give a high-level introduction to the page content/topic.

+
+
+
+ + + +
+
+

Web editor! Looking for web writing best practices to match this page? You can find them here.

+ + + +

H2 Subhead

+ + + +

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.

+ + + +

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.

+ + + +
+https://youtu.be/2NsDyg3A42o?si=aUXkPSV4fDxlyxw8 +
+ + + +
+ + + +

Meet the team

+ + + + + +
+ + + +

Directions

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

Main location

+ + + +

Main office
1165 High Street
Santa Cruz CA, 95062

+ + + +

Additional Info

+
+ + + +
+

Alternative location

+ + + +

Contact Info: placeholder

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

Subhead to give context to bulleted copy below

+ + + +
+ + + +
    +
  • Short blurbs that are easy to read and remember
    • + + + +
  • Consider copy with facts or stats or benefits
    • + + + +
  • These are usual memorable facts about your organization
    • + + + +
  • Your site visitors are most likely to remember items placed here
    • +
+
+
+
+
+ diff --git a/patterns/example-page-home.php b/patterns/example-page-home.php new file mode 100644 index 0000000..c7de19b --- /dev/null +++ b/patterns/example-page-home.php @@ -0,0 +1,283 @@ + + + +
+
+
+
+
+ + + +
+
+
+
+
+
+

#2

+ + + +

Description to pair with statistic

+
+ + + +
+

25

+ + + +

Description to pair with figure

+
+ + + +
+

8

+ + + +

Description to pair with figure

+
+ + + +
+

10

+ + + +

Description to pair with figure

+
+
+
+
+
+
+ + + +

Web editor! Looking for web writing best practices to match this page? You can find them here.

+ + + +

High-level overview text that gives your visitor a sense of your vision and goals. Should be brief!

+ + + +
+
+https://youtu.be/3cSTHIE8yfY?si=DmoOLMUOZcR3g4lS +
+ + + +
+

Compelling subhead

+ + + +

This text compliments the video story. Have a button after this text ONLY if there is a priority call to action you want your vistor to take. Otherwise you don't need a button.

+ + + +
+
Call to action
+
+
+
+ + + +
+ + + +
+

Category header

+ + + +
+
+
+
Hawk sitting on a fence.
+ + + +

Subject

+ + + +

Descriptive copy that will entice the visitor to want to learn more.

+
+
+ + + +
+
+
Hawk sitting on a fence.
+ + + +

Subject

+ + + +

Descriptive copy that will entice the visitor to want to learn more.

+
+
+ + + +
+
+
Hawk sitting on a fence.
+ + + +

Subject

+ + + +

Descriptive copy that will entice the visitor to want to learn more.

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

Topic subhead

+ + + + + + + +

Brief copy written to make people click to learn more.

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

Topic subhead

+ + + + + + + +

Brief copy written to make people click to learn more.

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

Upcoming events

+ + + +
+
+
+
turkey next to a car and looks like it is talking to a person.
+ + + +

Event title

+ + + +

Time, date
Location

Inviting description of event.

+ + + +
+
Link to info or tickets
+
+
+
+ + + +
+
+
Redwood tree
+ + + +

Event title

+ + + +

Time, date
Location

Inviting description of event.

+ + + +
+
Link to info or tickets
+
+
+
+
+
+ + + +
+ + + +
+

Subhead that is descriptive or captures attention.

+ + + +

Restate what you want the visitor to do.

+ + + +
+
Call to action
+
+
+
+ diff --git a/patterns/example-page-topic.php b/patterns/example-page-topic.php new file mode 100644 index 0000000..b482672 --- /dev/null +++ b/patterns/example-page-topic.php @@ -0,0 +1,251 @@ + + + +
+
+
+
+
+ + + +

Web editor! Looking for web writing best practices to match this page? You can find them here.

+ + + +

Describe your program here in a sentence or two, giving visitors basic information to make them feel grounded. Use simple language and be honest and genuine, while enticing visitors to want to learn more.

+ + + +
+ + + +

Research news

+ + + +
+
+
Fort Ord Natural Reserve Director Joe Miller introducing field studies to students from a nearby charter high school. (Photo by Barbara Lawrence-Emanuel, Learning for Life Charter School)
+ + + +

Short headline

+ + + +

Short, descriptive blurb of about 35–40 words that enables quick skimming.

+
+ + + +
+
UC Santa Cruz researchers used biomechanical and functional morphology to measure how hard sea otters need to bite to break open prey of various sizes. (Photo by Jessica Fujii, Monterey Bay Aquarium)
+ + + +

Short headline

+ + + +

Short, descriptive blurb of about 35–40 words that enables quick skimming.

+
+ + + +
+
Malin Pinsky (Photo by Nick Romanenko)
+ + + +

Short headline

+ + + +

Short, descriptive blurb of about 35–40 words that enables quick skimming.

+
+
+ + + +
+
+
+
+

Engaging subhead

+ + + +

Short, descriptive blurb of about 35–40 words that enables quick skimming.

+ + + +
+
Call to action
+
+
+ + + +
+
Images of Big Creek Reserve—taken by UCOP photographer, Lobsang Wangdu (lobsang.wangdu@ucop.edu)
+
+
+
+
+ + + +

Engaging subhead

+ + + +
+
+
+https://www.youtube.com/watch?v=kVDQiF9dMlE +
+
+ + + +
+
+https://www.youtube.com/watch?v=CRqmmgqMquo +
+
+ + + +
+
+https://www.youtube.com/watch?v=cI-_F2lfcwI&t=68s +
+
+
+ + + + + + + +
+
+
+
+ + + + +

Topic subhead

+ + + + + + + +

Brief copy written to make people click to learn more.

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

Topic subhead

+ + + + + + + +

Brief copy written to make people click to learn more.

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

Subhead that is descriptive or captures attention.

+ + + +

Restate what you want the visitor to do.

+ + + +
+
Call to action
+
+
+
+ + + +
+
+
+


Subhead about program or projects

+ + + +

Short, descriptive blurb of about 35–40 words that enables quick skimming.

+ + + +
+
Call to action
+
+
+
+
+ + + +

additional information:

+ + + +
+
+

Office of Research

+
+ + + +
+

Silicon Valley Campus

+
+ + + +
+

Coastal Science Campus

+
+
+