From 8bbcb48e1c4705af138ee61d17b53674c1a47ba1 Mon Sep 17 00:00:00 2001
From: James Macon <4700339+jamacon36@users.noreply.github.com>
Date: Fri, 18 Aug 2023 10:36:31 -0400
Subject: [PATCH 001/310] adds post install theme
---
lib/class-theme.php | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/lib/class-theme.php b/lib/class-theme.php
index 43592bc5a..42f8d8369 100644
--- a/lib/class-theme.php
+++ b/lib/class-theme.php
@@ -68,7 +68,7 @@ class Theme extends Timber\Site {
/** Add timber support. */
public function __construct() {
// Theme activation and deactivation hooks!
- register_activation_hook( __FILE__, [ $this, 'thinktimber_activate' ] );
+ add_action( 'after_switch_theme', [ 'thinktimber_activate' ] );
// Actions, Filters, and Theme Setup!
add_action( 'init', [ $this, 'register_post_types' ] );
@@ -87,6 +87,7 @@ public function __construct() {
// Set scripts version to theme version set in style.css.
$this->scripts_version = wp_get_theme()->get( 'Version' );
+ // That's it, construct the parent Timber\Site object.
parent::__construct();
}
@@ -94,13 +95,19 @@ public function __construct() {
* Theme activation hook
*/
public function thinktimber_activate() {
+ // Create a style guide page if it doesn't exist.
$style_guide_page = array(
'post_title' => 'Style Guide',
'post_status' => 'private',
'post_author' => 1,
'post_type' => 'page'
);
- wp_insert_post( $style_guide_page );
+ // Check if the page exists.
+ $style_guide_page_check = get_page_by_title( $style_guide_page['post_title'] );
+ // If the page doesn't exist, create it.
+ if ( ! $style_guide_page_check ) {
+ wp_insert_post( $style_guide_page );
+ }
// Add any additional activation code here.
}
From 4c52027fc547b66e74fcc3f4313f7d36577b6355 Mon Sep 17 00:00:00 2001
From: James Macon <4700339+jamacon36@users.noreply.github.com>
Date: Fri, 18 Aug 2023 12:00:54 -0400
Subject: [PATCH 002/310] adds accordion block to theme as example
---
assets/css/components/accordion.css | 21 +++++++++++++++++++++
assets/js/components/accordion.js | 16 ++++++++++++++++
assets/js/main.js | 3 +++
views/blocks/accordion-example.twig | 8 ++++++++
views/blocks/accordion.twig | 12 ++++++++++++
views/models/block--accordion.twig | 26 ++++++++++++++++++++++++++
6 files changed, 86 insertions(+)
create mode 100644 assets/css/components/accordion.css
create mode 100644 assets/js/components/accordion.js
create mode 100644 views/blocks/accordion-example.twig
create mode 100644 views/blocks/accordion.twig
create mode 100644 views/models/block--accordion.twig
diff --git a/assets/css/components/accordion.css b/assets/css/components/accordion.css
new file mode 100644
index 000000000..d726c463d
--- /dev/null
+++ b/assets/css/components/accordion.css
@@ -0,0 +1,21 @@
+.accordion {
+ &__section {
+ &__content {
+ @apply mt-0 max-h-0 overflow-hidden pr-xl opacity-invisible;
+ transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out,
+ margin-top 0.3s ease-in-out;
+ }
+ &--open {
+ .accordion__section__content {
+ @apply mt-sm max-h-[10000px] opacity-visible;
+ }
+ .accordion__section__icon {
+ .icon-layer {
+ &:first-child {
+ @apply rotate-0;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/js/components/accordion.js b/assets/js/components/accordion.js
new file mode 100644
index 000000000..10664f75f
--- /dev/null
+++ b/assets/js/components/accordion.js
@@ -0,0 +1,16 @@
+export default function () {
+ // Find all accordion sections
+ const accordionSections = document.querySelectorAll(".accordion__section");
+ // Loop through each section and add event listener
+ accordionSections.forEach((accordionSection) => {
+ // Find the accordion header
+ const accordionHeader = accordionSection.querySelector(
+ ".accordion__section__toggle"
+ );
+ // Add event listener to the accordion header
+ accordionHeader.addEventListener("click", () => {
+ // Toggle the accordion section
+ accordionSection.classList.toggle("accordion__section--open");
+ });
+ });
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index c4d8ca8e7..fbad1d218 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,9 +1,12 @@
// IMPORTS GO HERE
import accessibleMenu from "./components/accessible-menu";
+import accordions from "./components/accordion";
+
(($) => {
$(document).ready(() => {
// BEGIN CUSTOM CODE GOES HERE
accessibleMenu($);
+ accordions();
// END CUSTOM CODE GOES HERE
});
})(jQuery);
diff --git a/views/blocks/accordion-example.twig b/views/blocks/accordion-example.twig
new file mode 100644
index 000000000..4a011c466
--- /dev/null
+++ b/views/blocks/accordion-example.twig
@@ -0,0 +1,8 @@
+
+{% include 'models/block--accordion.twig' with {
+ accordion: [
+ { title: "Discrimination", content: "In May, parliament adopted changes to the Criminal and Criminal Procedure Codes to align them with international criminal law, extending the definition of aggression, crimes against humanity and other specific war crimes, lifting their statute of limitation and providing for universal jurisdiction. The President did not sign these changes into law by year's end, however, and the Rome Statute of the International Criminal Court remained unratified.
" },
+ { title: "Crimea", content: "In May, parliament adopted changes to the Criminal and Criminal Procedure Codes to align them with international criminal law, extending the definition of aggression, crimes against humanity and other specific war crimes, lifting their statute of limitation and providing for universal jurisdiction. The President did not sign these changes into law by year's end, however, and the Rome Statute of the International Criminal Court remained unratified.
" },
+ { title: "Donbas", content: "In May, parliament adopted changes to the Criminal and Criminal Procedure Codes to align them with international criminal law, extending the definition of aggression, crimes against humanity and other specific war crimes, lifting their statute of limitation and providing for universal jurisdiction. The President did not sign these changes into law by year's end, however, and the Rome Statute of the International Criminal Court remained unratified.
" }
+ ]
+} %}
diff --git a/views/blocks/accordion.twig b/views/blocks/accordion.twig
new file mode 100644
index 000000000..aa16add23
--- /dev/null
+++ b/views/blocks/accordion.twig
@@ -0,0 +1,12 @@
+{#
+ Title: Accordion
+ Description: A block that displays a title and a set of collapsible content sections.
+ Category: text
+ Icon: editor-alignleft
+ SupportsAlign: false
+ Example: {}
+#}
+
+{% include 'models/block--accordion.twig' with {
+ accordion: fields.accordion,
+} %}
diff --git a/views/models/block--accordion.twig b/views/models/block--accordion.twig
new file mode 100644
index 000000000..cf3a8714a
--- /dev/null
+++ b/views/models/block--accordion.twig
@@ -0,0 +1,26 @@
+{#
+ Accordion Block
+ Relevant JS: /assets/js/components/accordion.js
+ Relevant CSS: /assets/css/components/accordion.css
+#}
+
+{% set accordion = accordion|default([]) %}
+
+
+
+ {% for accordion_section in accordion %}
+
+
+ {{ accordion_section.title }}
+
+
+
+
+ {{ accordion_section.content }}
+
+
+ {% endfor %}
+
+
%s
', $block_content );
+ }
+ return $block_content;
+ }
+
/** This is where you add some context
*
* @param string $context context['this'] Being the Twig's {{ this }}.
From 2450926693b9da83bfc080cfd66c14904c663ea6 Mon Sep 17 00:00:00 2001
From: James Macon <4700339+jamacon36@users.noreply.github.com>
Date: Tue, 19 Sep 2023 18:12:21 -0400
Subject: [PATCH 010/310] adds first pass at allowed blocks array
---
lib/class-theme.php | 15 +++++++++++----
lib/helpers/allowed-blocks.php | 25 +++++++++++++++++++++++++
2 files changed, 36 insertions(+), 4 deletions(-)
create mode 100644 lib/helpers/allowed-blocks.php
diff --git a/lib/class-theme.php b/lib/class-theme.php
index 8699ade33..666d78449 100644
--- a/lib/class-theme.php
+++ b/lib/class-theme.php
@@ -236,12 +236,19 @@ function block_categories_all( $categories ) {
* @return array
*/
function allowed_block_types( $allowed_block_types, $block_editor_context ) {
+ // If we're not on a post, return the default allowed block types.
+ if ( empty( $block_editor_context->post ) ) {
+ return $allowed_block_types;
+ }
+
+ require_once __DIR__ . '/helpers/allowed-blocks.php';
+
// Make sure we allow our ACF blocks.
- // $acf_block_types = acf_get_store( 'block-types' );
- // $acf_block_types = array_keys($acf_block_types->get_data());
- // $allowed_block_types = array_merge( $allowed_block_types, $acf_block_types );
+ $acf_block_types = acf_get_store( 'block-types' );
+ $acf_block_types = array_keys($acf_block_types->get_data());
+ $allowed_block_types = array_merge( $thinkwp_allowed_blocks, $acf_block_types );
- return $allowed_block_types;
+ return $thinkwp_allowed_blocks;
}
/**
diff --git a/lib/helpers/allowed-blocks.php b/lib/helpers/allowed-blocks.php
new file mode 100644
index 000000000..5dc62e8a3
--- /dev/null
+++ b/lib/helpers/allowed-blocks.php
@@ -0,0 +1,25 @@
+
Date: Tue, 19 Sep 2023 16:46:18 -0700
Subject: [PATCH 011/310] Updates /style-guide twig template and css
---
assets/css/pages/styleguide.css | 65 +-
views/pages/page-style-guide.twig | 1163 +++++++++++++++++------------
2 files changed, 700 insertions(+), 528 deletions(-)
diff --git a/assets/css/pages/styleguide.css b/assets/css/pages/styleguide.css
index dc3a166ec..58f7e97e7 100644
--- a/assets/css/pages/styleguide.css
+++ b/assets/css/pages/styleguide.css
@@ -1,40 +1,33 @@
#page-style-guide {
- @media (--bp-md) {
- .styleguide-nav {
- position: fixed;
- border-right: 1px solid var(--color-gray-lt);
- height: 100%;
- width: 280px;
- left: 0;
- top: 0;
- }
- .styleguide-menu-padding {
- padding-left: 330px;
- }
- }
-
- .styleguide-nav a {
- border-left: 3px solid transparent;
- display: block;
- width: 100%;
- }
-
- .styleguide-nav a:hover,
- .styleguide-nav a:focus {
- background-color: var(--color-gray-lt);
- border-left-color: var(--color-gray-dk);
- transition: background-color ease-in-out 300ms;
- }
-
- .bg-demo-m {
- background-color: peachpuff;
- }
+@media (--bp-md) {
+ .styleguide-nav {
+ position: fixed;
+ border-right: 1px solid var(--color-grey-400);
+ height: 100%;
+ width: 280px;
+ left: 0;
+ top: 0;
+ overflow: scroll;
+ }
+ .styleguide-menu-padding {
+ padding-left: 330px;
+ }
+}
+.bg-demo-m {
+ background-color: peachpuff;
+}
- .bg-demo-p {
- background-color: darkseagreen;
- }
+.bg-demo-p {
+ background-color: darkseagreen;
+}
- .bg-demo-element {
- background-color: lightblue;
- }
+.bg-demo-element {
+ background-color: lightblue;
}
+}
+
+/* Hides nav on /style-guide */
+.style-guide header,
+.style-guide footer {
+ @apply hidden;
+}
\ No newline at end of file
diff --git a/views/pages/page-style-guide.twig b/views/pages/page-style-guide.twig
index 60d27ea1a..07a8162c3 100644
--- a/views/pages/page-style-guide.twig
+++ b/views/pages/page-style-guide.twig
@@ -1,525 +1,704 @@
{# Global Style Guide available at /style-guide #}
-{%
- set sizes = [
- '3xs',
- '2xs',
- 'xs',
- 'sm',
- 'base',
- 'md',
- 'lg',
- 'xl',
- '2xl',
- '3xl',
- '4xl',
- ]
-%}
-
-{%
- set fontStyles = [
- 'h1',
- 'h2',
- 'h3',
- 'h4',
- 'h5',
- 'h6',
- 'body-lg',
- 'body-md',
- 'body-sm',
- 'body-xs',
- 'text-nav',
- 'text-label',
- ]
-%}
-{# Displays on lt bg #}
-{%
- set textColorsDk = [
- 'black',
- 'gray-dk',
- ]
-%}
-
-{# Displays on dk bg #}
-{%
- set textColorsLt = [
- 'white',
- 'gray-lt',
- ]
-%}
-
-{%
- set bgColorsDk = [
- 'black',
- 'gray-dk',
- ]
-%}
-
-{%
- set bgColorsLt = [
- 'white',
- 'gray-lt',
- ]
-%}
-
-{% set btnLinkStyles = [
- 'btn-read-more',
- 'link-style',
- 'btn-outline',
- 'btn-solid',
- 'btn-solid btn-wide',
- 'btn-tag',
- 'btn-read-more',
- ]
-%}
-
-{% set iconBtnLinkStyles = [
- 'link-chevron',
- 'link-back',
- 'btn-close',
- 'btn-search',
-]
-%}
{% extends "base.twig" %}
-
{% block content %}
-
- {# Menu#}
-
-
-
Styleguide
-
-
Reusable styles using classes (sass/global)
-
- Typography Buttons & links Layout Spacing
+ {# Menu#}
+
-
-
- {# Modifiers #}
-
-
-
Common Variations
-
-
-
.h1.text-white
- .h2.text-gray-dk
- .h3.text-white
- .h4.text-black
- .h4.text-gray-dk
- .h4.letter-spacing.text-white
-
-
-
Text Color
-
tokens/src/color.tokens.json
-
.text-[color]. Adds colors to base/_generated-variables
- {% for color in textColorsDk %}
-
.text-{{ color }}
- {% endfor %}
- {% for color in textColorsLt %}
-
.text-{{ color }}
- {% endfor %}
-
-
Text Weight
-
tokens/src/typography.tokens.json
-
.font-bold 700
-
.font-semibold 600
-
.font-medium 500
-
.font-regular 400
-
.font-book/.font-light 300
-
-
{# Closes .grid #}
-
{# Closes .site-container.content-side-padding #}
-
+
+{% endset %}
+
+
{% endset %}