Development Workflow

This guide explains the daily development workflow and best practices in LamaPress.

Table of Contents

• Overview
• Daily Workflow
  • Starting Development
  • Creating Components
  • Testing Changes
  • Committing Changes
• Component Development
  • Creating a Section
  • Creating a Block
  • Adding JavaScript
• Styling Workflow
  • Using Tailwind
  • Custom SCSS
• Best Practices
  • 1. Start Dev Server
  • 2. Test in Browser
  • 3. Build Before Commit
• Related Documentation

---

Overview

This guide covers the typical development workflow when working with LamaPress, from starting the dev server to committing changes.

Daily Workflow

Starting Development

1. Start dev server:

   npm run dev

2. Open site in browser:

   • Visit your local site URL
   • Dev server runs on Vite's default port

3. Enable WordPress debug:

   define('WP_DEBUG', true);
   define('WP_DEBUG_LOG', true);

Creating Components

1. Create component directory:

   mkdir -p components/sections/my_section

2. Create files:

   • index.php - Template
   • acf.php - ACF fields
   • index.js - JavaScript (optional)
   • style.scss - Styles (optional)

3. Register in template:

   llSection('my_section', 'unique_key');

Testing Changes

1. Check browser console for errors
2. Test responsive at different breakpoints
3. Verify ACF fields in WordPress admin
4. Test page transitions (if applicable)

Committing Changes

1. Build assets:

   npm run build

2. Test production build:

   • Verify assets load correctly
   • Check for console errors

3. Commit changes:

   git add .
   git commit -m "Add new section component"

Component Development

Creating a Section

1. Create directory:

   mkdir -p components/sections/hero_custom

2. Create index.php:

   <?php
   $section ??= false;
   $key ??= false;
   
   $title = llField('title', $key, $section);
   ?>
   
   <section class="ll-section ll-section--hero-custom">
     <?php if ($title): ?>
       <h1><?= esc_html($title) ?></h1>
     <?php endif; ?>
   </section>

3. Create acf.php:

   <?php
   $key = 'hero_custom_key';
   $name = 'hero_custom';
   $title = 'Hero Custom';
   
   $groupFields = [
       [
           'key' => 'title',
           'label' => 'Title',
           'name' => 'title',
           'type' => 'text',
       ],
   ];

4. Use in template:

   llSection('hero_custom', 'page_hero');

Creating a Block

1. Create directory:

   mkdir -p components/blocks/card

2. Create index.php:

   <?php
   $title = $title ?? false;
   $content = $content ?? false;
   ?>
   
   <div class="ll-block--card">
     <?php if ($title): ?>
       <h3><?= esc_html($title) ?></h3>
     <?php endif; ?>
     <?php if ($content): ?>
       <div><?= wp_kses_post($content) ?></div>
     <?php endif; ?>
   </div>

3. Use in section:

   llBlock('card', [
       'title' => 'Card Title',
       'content' => 'Card content',
   ]);

Adding JavaScript

1. Create index.js:

   import { app } from '@src/js/core/app'
   
   export default class Card {
     constructor(element) {
       this.element = element
       this.init()
     }
     
     init = () => {
       this.bindEvents()
     }
     
     bindEvents = () => {
       this.element.addEventListener('click', this.handleClick)
     }
     
     handleClick = () => {
       // Handle click
     }
     
     destroy = () => {
       this.element.removeEventListener('click', this.handleClick)
     }
   }

2. Add data-component to HTML:

   <div class="ll-block--card" data-component="blocks/card">

Styling Workflow

Using Tailwind

Use Tailwind utilities directly in templates:

<div class="ll-heading-1 mb-md text-primary">
  Title
</div>

Custom SCSS

Add custom styles in style.scss:

.ll-section--hero-custom {
  .hero-content {
    @apply ll-heading-1 mb-md;
  }
}

Best Practices

1. Start Dev Server

Always start dev server for development:

npm run dev

2. Test in Browser

Test changes in browser:

• Check console for errors
• Test responsive design
• Verify animations

3. Build Before Commit

Always build before committing:

npm run build
git add .
git commit -m "Description"

Related Documentation

• Component System - Component structure
• Build Process - Build system
• Component Guidelines - Component patterns

---

Next Steps:

• Review Component System for component structure
• Check Build Process for build details
• See Component Guidelines for patterns