General

spx is deprecated and will not receive further updates.

Existing users are eligible for a free Blockstudio lifetime license. It is the spiritual successor to spx. Send an E-Mail to hi@blockstudio.dev with "Free Blockstudio license" as the subject, and we will set up your account.

Motivation

Spx was made to create a coherent element library for busy WordPress developers. With new major page builders being released almost yearly, there are hardly any constants when adapting to the ecosystem of a new builder, leaving countless add-ons and plugins useless when switching tools. As you might have already guessed, spx is here to combat that churn by delivering a single element library using Web Components that is able to work within current and future page builders.

Web Components

Introduced by Alex Rusell at the Fronteers Conference in 2011, Web Components have since gained traction among web developers to create encapsulated and reusable elements for the web.

They look like that:

            <my-component name="Dennis" />
Copy

As you can see, it's not much different than your standard HTML elements like a div or li. Since web components are built with Javascript, they are executed on the client-side, so when visited in a browser. A custom component could be programmed in any way, depending on its purpose.

For example, the goal could be to create a card component that displays the 'name' attribute in an h1 tag wrapped in a div once executed:

              
        <my-card name="Dennis">
            <div class="card-wrap">
                <h1 class="card-title">Dennis</h1>
            </div>
        </my-card>
Copy

Components behave like standard HTML elements, so you can target them by using CSS:

              
        my-card {
            background: white;
            padding: 1em;
            border-radius: 0.125em;
        }

        

        
Copy

That's it, for the most part. Let's dive deeper into how spx is utilizing the power of web components.