A Practical WordPress Cloud Workflow: Using Pantheon and the Block Editor

Building WordPress sites in 2026 shouldn't involve clunky local servers that crash or "only work on your machine." For developers and students in programs like WDIA, professional workflows mean Cloud-Native development.

This tutorial will take you from zero to a live, collaborative site using Pantheon, Kadence, and Native Blocks.

Section 1: The Environment (Pantheon.io)

Why skip the local install? Cloud environments provide a live URL immediately, allowing for real-time feedback and easier team collaboration.

1. Sign Up: Create a free account at Pantheon.io.

2. Create A Workspace: Click "Create New Site".

   

3. Create New Site: Click "Create New Site" and choose WordPress.

   

4. The "Dev" Tab: Pantheon uses a Dev-Test-Live pipeline. For this tutorial, we stay strictly in the Dev tab. This is your sandbox where you can build safely.

   

5. Enter the WordPress Dashboard: Click the Dev admin button. This will open a new browser tab leading to the "Famous 5-Minute Install" or your WordPress login.

Section 2: Theme & Starter Templates (Kadence)

Starting with a blank screen is inefficient. We use Kadence because it’s the gold standard for speed and flexibility in the current WP 7.0 era.

1. Navigate to Appearance > Themes > Add New.

   

2. Search for Kadence, install, and activate it.

   

3. Starter Templates: Look for the prompt to install "Starter Templates." This plugin allows you to import professional layouts (Home, About, Services) in one click.

   

Section 3: The Editor Choice (Blocks vs. Elementor)

As a modern developer, you need to choose between "Page Builders" and "Native Blocks."

• Elementor: Great for drag-and-drop, but adds heavy "bloat" (extra code) that slows down page load speeds.
• Native Blocks (Gutenberg): Built into WordPress. When combined with Kadence Blocks, it offers professional design power with significantly better performance.

The Verdict: We are using Native Blocks to keep our site fast, secure, and future-proof.

Section 4: Necessary Plugins

To keep your site lean, stick to the essentials:

1. Kadence Blocks: Adds "superpowers" to the editor (Advanced Galleries, Rows, etc.).
2. WPForms (Lite): The easiest way to create a functional contact form.
3. All-in-One WP Migration: Essential for quick backups and moving sites between environments.

Section 5: The Block Editor Workspace

The Block Editor is where the magic happens. To master it, you need to know these two specific UI tools:

1. The List View: Click the "three horizontal lines" icon in the top-left. This shows the "skeleton" of your page and is the only way to accurately select nested containers.

   

2. The Settings Sidebar: The "Sidebar" icon on the right. This is where you adjust colors, spacing, and typography for your selected block.

   

Section 6: Practical Editing — The Home Page

Let’s Edit a page using a professional two-column layout.

1. Edit a Page: Go to Pages > All Pages > Edit

   

2. Add a Row: Insert a Kadence Row Layout block and select a two-column split.

   

3. Add Content:

   • Left Column: Add an "Advanced Heading" and a "Text" block for your title.

   

• Right Column: Insert the Image block and select your image.

1. Style the Image (Rounded Corners and Border): Select the image block in the right column. In the right sidebar settings, look for the Advanced or Style options. Find the Border or Border Radius settings to create the smooth, large curves seen in the example image below. Then, locate the Border or Box Shadow section to add the soft border definition.

Custom CSS:

You can add some custom styling. Go to Appearance > Customize > Additional CSS and paste this CSS custom code for contact form:

css
/* Modernize your Contact Form */
.wpforms-form {
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.wpforms-submit {
    border-radius: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    transition: transform 0.2s ease !important;
    background-color: #222 !important;
    color: #fff !important;
}