Synced Patterns in WordPress with Overrides and Unsupported Blocks


Streamline WordPress Synced Patterns with SCSS Styling Workarounds

One of the exciting features of WordPress is the ability to create synced patterns, allowing you to reuse design blocks across your site while maintaining consistency. However, not all blocks in the Gutenberg editor work smoothly with synced patterns—one notable example is the Cover block.

The Cover block is excellent for hero sections and other large visual elements, but when you attempt to make it a synced pattern, you might notice a limitation: the cover block doesn’t support overrides. This can be frustrating if you’re using the Cover block in multiple places, like for hero sections with custom images on different pages and want to keep the overall look and feel consistent. If your site has dozens or hundreds of pages keeping these in sync would be hard. Although you could build your own block to achieve this I am always trying to do as much as I can with native blocks.

The Challenge

Take this scenario: you have several hero sections across your site, each using a Cover block with a nested structure of rows, columns, and other blocks. You want to sync the structure and styles across all of them but still have the flexibility to change the background image. Unfortunately, with the current Gutenberg functionality, the Cover block’s can be made a synced pattern; but all the text in every instance across your pages would be the same, meaning any changes to it will apply across all instances of that pattern.

This limitation can lead to a lot of manual updates, especially if your site has dozens or even hundreds of Cover blocks. And if you’re like me, you may have added a lot of custom Bootstrap classes (like pt-5, pb-3, etc.) to get everything looking perfect, which can become tedious to manage across multiple pages.

A Workaround

Here’s a solution I’ve found: instead of syncing the entire Cover block, you can create a synced pattern for the inner content (text, buttons, etc.), and then use an unsynced Cover block around it. This allows you to reuse the pattern for the content while keeping the Cover block and its background image unique to each instance.

But what about all those custom classes for padding, margins, and spacing? Manually adding and updating those classes for each block instance can be time-consuming and error-prone, especially for non-developers.

Simplifying with SCSS

A great way to streamline this process is by creating a custom class in SCSS that bundles all your common spacing and layout styles. For example, instead of applying individual classes like pt-3, pb-4, ps-2, etc., you can define a single class that encapsulates all these styles.

So the equivalent to doing this:

<div class=”pt-3 pt-md-6 pb-4 pb-md-5 ps-2 ps-lg-0 pe-2 ps-md-0”>My Cool Cover Hero</div>

Can now be done using a single class

<div class=”my_cool_cover”>My Cool Cover Hero</div>

If you create this using scss:

// Define the custom class
.hp-cover-block-half-right {
  padding-top: map-get($spacers, 3); // pt-3 equivalent
  padding-bottom: map-get($spacers, 4); // pb-4 equivalent
  padding-left: map-get($spacers, 2); // ps-2 equivalent
  padding-right: map-get($spacers, 2); // pe-2 equivalent

  @media (min-width: map-get($grid-breakpoints, md)) {
    padding-top: map-get($spacers, 6); // pt-md-6 equivalent
    padding-bottom: map-get($spacers, 5); // pb-md-5 equivalent
    padding-left: 0; // ps-md-0 equivalent
    padding-right: 0; // pe-md-0 equivalent
  }

  @media (min-width: map-get($grid-breakpoints, lg)) {
    padding-left: 0; // ps-lg-0 equivalent
  }
}

Tagged Skills

CMS HTML / CSS Open Source WordPress

WordPress SVG Object Plugin


Unlock the power of SVG and animations in Wordpress

A gutenberg block that allows you to add an SVG in an object element. This is a wordpress plugin that adds a gutenberg block in which you can add an SVG to your page.

Why?

  • You don’t need to add support to the core image block for svgs in the functions.php
  • Instead of adding the SVG into the image () element (like what it would do if you add SVG support
    to the core image block for SVGs), SVGs are placed in an object block instead. This allows
    you to manipulate the SVG in javascript and do all sorts of cool stuff with it.
    SVGs added just in the block cannot be altered or interacted with in the DOM.
    However if they are in an.

The reason I created this was so that I could use the SnapSVG library to manipulated an interactive map SVG. This allows the svg to be visible right in the block editor, but still embedded as an object instead of an image like it normally would by default

Photo Gallery

Tagged Skills

Open Source React WordPress

iSchool Projects Capstone Repository


Promoting iSchool @RIT and sharing students accomplishments online

I designed and developed a web-based repository for graduate capstone projects at the School of Information (iSchool) at Rochester Institute of Technology (RIT). Built on the central Drupal CMS, this repository serves as both a promotional tool for the iSchool and a valuable resource for current students. It allows students to explore past capstone projects digitally, replacing the previous system that required borrowing paper copies from the office. I collaborated with a student employee on the project, and together, we ensured the repository is user-friendly and efficiently organized for both students and staff.

Check it out at https://www.rit.edu/ischoolprojects/

Photo Gallery

Tagged Skills

Drupal Open Source PHP

FeedMasher Project Finally Moving to Opensource


The process of moving a project that helped power the RIT homepage for several years to open source.

I am in the process of moving FeedMasher a web aggregation framework I have worked on for several years to open source. Details here: http://www.feedmasher.org/ Feedmasher is a system that is capable of gathering digital content from a wide array of sources such as traditional RSS feeds (ex: newsfeeds from cnn, bbc etc.)  Twitter tweets, Youtube Videos, Instagram and more. It was originally developed as part of my masters capstone, and continued on through work. It then powered the RIT homepage channel system; front and center for millions of users to see (well millions over the course of a few years – RIT does get a lot of traffic). However all good things come to a close and the university moved to a much more robust platform Drupal and had a major rebrand initiative.

Fortunately, RIT was understanding and allowed me to make my contributions open source. Thanks a lot to Ryne Raffaelle & Ed Lincoln at RIT for assisting with this.

“Feedmasher is a system that is capable of gathering digital content from a wide array of sources such as traditional RSS feeds (ex: newsfeeds from cnn, bbc etc.), Twitter tweets, Youtube Videos, Instagram and more. Once data is fetched from an outside source it is pulled into the Feedmasher component and standardized. It can than be displayed in various ways and arrangements. For example: a channel on Arts in Rochester NY could display stories from multiple sources such as a local artists Youtube channel, the latest news from the MAG art gallery, tweets from prominent local artists and more. As opposed to having to visit dozens of individual sites it can be fetched and curated in one single spot!”

Tagged Skills

API HTML / CSS JavaScript MySQL Open Source PHP

Rapid Online Presence ISTE 305


Syllabus: Download

Times Taught: 3

Class Reviews

  • He provides flexibility with deadlines.
  • Was very knowledgeable on the subjects at hand

Official Course Description

Although large-scale web sites still require considerable development effort, there are today several options for establishing a web presence using tools designed for non-programmers. This course gives students understanding of and experience with installing and customizing websites using tools such as Blogs, Wikis,and content management systems.

Curriculum Development

Javascript Validation Video:

https://www.youtube.com/watch?v=FjV13Z-hYZM

Tagged Skills

CMS HTML / CSS JavaScript Open Source PHP

The Loop Social Network


A social network for prospective RIT students and the RIT community.

NOTE: The loop was discontinued around 2018. However it was a great project and wanted to provided an overview of this project below!

1. What is the Loop?

The Loop is a private authenticated social network tailored for stimulating conversation among prospective students who have applied for admission. It also is built to encourage informative discussions between prospective students, RIT students and RIT faculty. The main goal is to introduce, inform and engage prospective students who are considering RIT as their college of choice.

   Figure a –  View of the homepage navigation and status posting area.

a. Popular Uses

  • Finding a roommate
  • Meeting new people (the matchmaking component)
  • Finding people with common interests (ex: golf, computer gaming, etc.)
  • Asking questions to a specific cohort.
    • Cohort Examples: Alumni, Current Students (Ambassadors), Faculty

b. Why not Facebook?

The Loop is not meant to compete with Facebook; in fact, we still maintain an Accepted Student Facebook Group for each fall accepted class.  There are several differentiators that have justified the need for such a network. Many of these features will be broken down further in the documentation.

  • Scope of audience – all applicants versus just accepts in the Facebook group
  • Matchmaking component
  • Authenticated access – more private
  • Ability to deliver customized RIT content, news, YouTube: social channels
  • Sub-Groups (not currently possible in Facebook)
  • A place for non-Facebook users

Facebook by nature will likely always be easier for certain communications given its cross platform availability and fact that many students are already on it. However, its inability to offer some of the functions described help justify the need for The Loop.

However, none of this can be achieved without the participation and support from the RIT community.  As we add new members, we believe these advantages will become more apparent and applicants will gradually find it easier to connect with others and get individualized resources from their respective college and peers.

Photo Gallery

Tagged Skills

Joomla Open Source Project Management

Moving my site to Drupal?


2024 UPDATE: My site has since been moved away from Drupal! I still really like Drupal and will continue to work with especially for clients. I felt for a single use non enterprise site though it had just become a bit overbearing to maintain. I had launched the site on Drupal 8, then Drupal got up to version 10, and it just became nearly impossible to upgrade. One issue was the Drupal 8 site ran php 7, so whenever i tried to upgrade it would break because drupal 10 required PHP 8+. So it became kind of an endless loop trying to upgrade it. I did everything I thought right before, used the package manager, drush etc, and any attempts to upgrade it would lead to dozens of errors. The funny thing is is that I described it as dependency hell I was after spending two or three days trying to upgrade… only to find out that was a real term that I didn’t coin!

Overall my experience with Drupal remains positive, I just think to effectively use it as it was (and maybe still is) as a one man shop was really difficult. If you have a dev ops team to help maintain it however it really is the bees knees in terms of robustness! So i’m still consulting and looking for Drupal work, but for my own personal site I have went other directions!


As you may have noticed I am launching a new website.   After years of using Joomla, WordPress, and just hand-written scripts I have decided to start setting up Drupal for my homepage. Although I have used Drupal periodically in the past, I wanted to get more up to speed with it as it is now used as RIT’s main CMS.  Also I think it could be something I set up for future clients.

It is a great tool, especially for tech-saavy developers, but at the same time I would be nervous about setting it up for clients as there seems to be a lot of set up time to get certain functionality that may be quicker to do with other systems that may have a component already built to solve a problem.

For example; if I wanted to create an event registration type website with integrated payment funcitonality I have used “Event Booking” by OsCommerce for Joomla. Literally with a one-click installation it comes with all the functionality you would need to list events, charge various prices, and have registration deadlines built right in.  Out of the box it would work for probably most people events, and might take some adaptations if you are converting from a custom built solution.

On the other hand, I was trying to investigate how I would set up a similar system in Drupal.  Sure, Drupal is really robust and I could create a content type called “event” I feel like I would need to invest a great deal of time building it out.  And then on top of that integrating in payment would be another challenge on top of that.  I suppose once you do build it you get a system that is built exactly for your needs, as opposed to adapting from a pre-built system, but the amount of time it takes to re-create the wheel here would probably be a turn off for most clients.

Tagged Skills

CMS Drupal HTML / CSS JavaScript Open Source

RIT Interactive Streetview Tour


Rethinking the Virtual Tour: An Immersive Experience that's More Than A Map

The traditional college virtual tour tends to be an overhead clickable map; a far different experience from a real world tour experience. After the Google Streetview Trike visited RIT, the Undergraduate Admissions office set out to create an immersive and interactive tour experience.

The panoramic imagry from Streetview will allow users to explore the campus from a unique perspective. Student tour guides provide narration, describing the area of campus a user is viewing. Social media streams, photos, videos, and foursquare information that is related to the geographical area is overlayed throughout the tour. Viewers have the option to just sit back and let the tour run through, or interact by panning and zooming the streetview window, viewing the related media, and jumping to different areas of campus to explore.


An open source Mozilla project called popcorn.js was used as a foundation; and thru HTML 5 the tour is compatible with mobile devices such as the iPad. Future iterations of the tour will incorporate more related media and include more tour nodes. A choose your own adventure type option will be included to allow people to make a customized tour such as an RIT Engineering Tour, or art on Campus tour.

Photo Gallery

Tagged Skills

API HTML / CSS JavaScript Open Source

Jabode Horoscope Component


An Free Open Source Horoscope Extension for the Joomla CMS

This was my first foray into building an open source extension for the Joomla Content Management System way back in 2008! The project was pretty successful, I believe the component was installed on 100 or more websites! I did stop maintaining it around 2010, but for the purposes of the archives here is its original description:

Want to provide visitors with their horoscope or create your very own horoscope?

Guests can Choose from over 18 different horoscope types (singles, flirt, cat and dogscope are just a few of the types) that are provided via RSS feeds and updated automatically.

For an unbranded version (Jabode links removed and access to future commercial releases) please email me the via contact page

Requirements: Joomla CMS. Joomla Resources
Get it: Downloads Page See it in action: Demo (frontend only)

Multiple Horoscopes: Choose from over 18 Different Horoscopes (not including your own custom Horoscope) from various providers. Publish or unpublish certain horoscope feeds.

Appearance: Elegantly designed button interface to choose your sign from. Colors can be modified in the administrator control panel.

Caching: Horoscopes will automatically cache for the entire day to improve performance. No Need to set up a ‘cron’ job and limit your sites bandwidth.

Language Support: Display frontend in English and German. More languages and improvements to come soon.

Version 1.0 beta has just been completed. However it will not be officially released until the time is right so the date has been set:

Visit Downloads Page to get a copy for yourself (on release date)

Official Release Date will be: 8/1/2007

Last Updated ( Tuesday, 15 July 2008 )

Tagged Skills

API CMS Joomla Open Source PHP