Site Builder Hub

• 1: Getting Started for Site Builders
• 2: Release 11.3.1.0 for Site Builders

1 - Getting Started for Site Builders

Welcome! This guide will walk you through setting up a YMCA Website Services installation from start to finish.

What You’ll Learn

By the end of this guide, you’ll be able to:

• ✅ Choose the right installation path for your YMCA
• ✅ Install YMCA Website Services using Composer
• ✅ Configure site basics (name, logo, taxonomy)
• ✅ Create your first webform
• ✅ Set up user roles and permissions

Estimated time: 45-60 minutes

Step 1: Choose Your Installation Path

Before installing, decide which solution fits your YMCA best.

Small Y Template (Recommended for Most) ⭐

Best for:

• Small to medium YMCAs
• Limited technical resources
• Want modern design out-of-the-box
• Need simplified administration

What’s included:

• Modern Carnation design system
• Layout Builder (drag-and-drop page building)
• Essential content types only
• Streamlined configuration
• Better performance

→ Learn more about Small Y Template

Full Distribution

Best for:

• Large YMCAs with complex needs
• Multiple branches with different requirements
• Custom development resources
• Need maximum flexibility

What’s included:

• All YMCA Website Services features
• Multiple themes and colorways
• Legacy Paragraphs support
• Advanced customization options

Step 2: Install YMCA Website Services

Prerequisites

Before starting, ensure your server meets these requirements:

• Drupal: 11.3.x or higher
• PHP: 8.3 or higher
• Database: MySQL 8.0+ or MariaDB 10.6+
• Web Server: Apache 2.4+ or Nginx 1.18+
• Composer: 2.0 or higher

For detailed requirements, see Server Requirements.

Installation Steps

For Small Y Template:

# 1. Create a new project
composer create-project ycloudyusa/yusaopeny-project MY_YMCA_SITE --no-interaction

# 2. Navigate to the directory
cd MY_YMCA_SITE

# 3. Install Drupal
drush site:install openy_lily \
  --db-url='mysql://USER:PASS@localhost/DATABASE' \
  --account-name=admin \
  --account-pass=admin \
  --site-name='My YMCA'

For Full Distribution:

# 1. Create a new project
composer create-project ycloudyusa/yusaopeny-project MY_YMCA_SITE --no-interaction

# 2. Navigate to the directory
cd MY_YMCA_SITE

# 3. Install Drupal
drush site:install openy \
  --db-url='mysql://USER:PASS@localhost/DATABASE' \
  --account-name=admin \
  --account-pass=admin \
  --site-name='My YMCA'

Replace:

• USER - Your database username
• PASS - Your database password
• DATABASE - Your database name
• admin - Choose a secure admin password

First Login

1. Navigate to your site URL
2. Log in with username: admin
3. Use the password you set during installation

🎉 Congratulations! Your YMCA website is installed.

Step 3: Configure Site Basics

Now let’s configure your site’s essential settings.

Set Site Name and Logo

1. Navigate to Configuration > System > Site information
2. Update:
   • Site name: “My YMCA Name”
   • Slogan: Optional tagline
   • Email address: Your admin email
3. Click Save configuration

Upload Your Logo

1. Go to Appearance > Your active theme > Settings
2. Uncheck “Use the logo supplied by the theme”
3. Upload your YMCA logo (recommended: PNG, 200px wide)
4. Click Save configuration

Configure Taxonomy Vocabularies

Taxonomy helps organize your content. Set up these essential vocabularies:

Categories (for Articles/News)

1. Go to Structure > Taxonomy > News Categories
2. Click Add term
3. Add categories like:
   • Youth Programs
   • Aquatics
   • Wellness
   • Community Events
4. Click Save

Amenities (for Branches)

1. Go to Structure > Taxonomy > Amenities
2. Add amenities your branches offer:
   • Indoor Pool
   • Gymnasium
   • Childcare
   • Group Exercise Studio

Pro Tip: Set up your taxonomies before creating content - it makes categorization easier!

Step 4: Create Your First Webform

Webforms collect information from members and visitors. Let’s create a simple contact form.

Enable Webform Module (if not enabled)

drush en webform webform_ui -y

Create Contact Form

1. Go to Structure > Webforms
2. Click Add webform
3. Fill in:
   • Title: “Contact Us”
   • Description: “Get in touch with our team”
4. Click Save

Add Form Fields

1. Click Build tab
2. Add these fields:

Name Field:

• Click Add element > Text field
• Title: “Your Name”
• Check Required
• Click Save

Email Field:

• Click Add element > Email
• Title: “Email Address”
• Check Required
• Click Save

Message Field:

• Click Add element > Textarea
• Title: “Message”
• Check Required
• Rows: 5
• Click Save

Configure Email Handler

1. Click Emails/Handlers tab
2. Click Add handler > Email
3. Configure:
   • To email: your-team@ymca.org
   • From email: [webform_submission:values:email]
   • Subject: New Contact Form Submission
4. Click Save

Test Your Form

1. Click View tab
2. Fill out the form
3. Submit and check your email!

🎉 Success! You’ve created your first webform.

Step 5: Set Up User Roles and Permissions

Control what different users can do on your site.

Common Roles

YMCA Website Services includes these default roles:

Create a Content Editor User

1. Go to People > Add user
2. Fill in:
   • Email: editor@yourymca.org
   • Username: editor
   • Password: Create secure password
   • Roles: Check “Content Editor”
   • Status: Check “Active”
3. Click Create new account

Customize Permissions

1. Go to People > Permissions > Roles
2. Click Edit permissions next to “Content Editor”
3. Grant permissions like:
   • Create Landing Page (Layout Builder)
   • Edit own Landing Page (Layout Builder)
   • Use Layout Builder
   • Access media library
4. Click Save permissions

Security Tip: Follow the principle of least privilege - only grant permissions users actually need!

Next Steps

Now that you’ve set up the basics, explore these advanced topics:

Continue Configuring

Essential How-To Guides

• Use Two-Factor Authentication - Secure admin accounts
• Customize Location Maps - Google Maps integration
• Track & Analyze Users - Set up analytics
• Avoid Outdated Config - Prevent update issues

Deployment & Updates

• Configuration Management - Export/import config
• Drupal 10 → 11 Upgrade - Update your site
• Security Updates - Keep your site secure

Quick Reference

Common Drush Commands

# Clear cache
drush cr

# Enable a module
drush en module_name -y

# Export configuration
drush config:export -y

# Import configuration
drush config:import -y

# Update database
drush updb -y

# Check for security updates
drush pm:security

# Create admin login link
drush uli

Essential URLs

File Structure

MY_YMCA_SITE/
├── web/                    # Drupal root
│   ├── modules/           # Contrib & custom modules
│   ├── themes/            # Themes
│   └── sites/default/     # Site-specific files
├── config/                # Configuration files
├── vendor/                # Composer dependencies
└── composer.json          # Project dependencies

Need Help?

Troubleshooting

• Installation fails? Check System Requirements
• Permissions errors? See Troubleshooting Common Errors
• Composer issues? Review Composer Dependency Conflicts

Get Support

• Community Forum - Ask questions, share tips
• Monthly Community Calls - Live Q&A sessions
• GitHub Issues - Report bugs
• Troubleshooting Guide - Solutions by category

Best Practices

Security

• ✅ Change default admin password immediately
• ✅ Enable Two-Factor Authentication
• ✅ Keep modules updated
• ✅ Regular security audits
• ✅ Limit admin access

Performance

• ✅ Enable caching (Production)
• ✅ Aggregate CSS/JS files
• ✅ Use Redis or Memcache
• ✅ Optimize images
• ✅ Monitor database size

Maintenance

• ✅ Regular backups (daily database, weekly files)
• ✅ Test updates on staging first
• ✅ Export configuration regularly
• ✅ Monitor error logs
• ✅ Document customizations

Workflow

• ✅ Use configuration management
• ✅ Version control your config
• ✅ Staging → Production deployment
• ✅ Never edit production directly
• ✅ Keep deployment notes

Ready to build? Start creating content with the Content Editor Guide or configure advanced features! 🚀

2 - Release 11.3.1.0 for Site Builders

YUSA Open Y 11.3.1.0: Layout Builder Updates & Configuration Changes

What You Need to Know for Site Building:

🧱 Layout Builder & Blocks

All blocks updated for Drupal 11.3 compatibility:

• Every Layout Builder block received major version updates
• All 71 PRs tested across GitHub and drupal.org repositories
• Themes updated for compatibility
• Custom block configurations should be reviewed post-upgrade

CKEditor 5 improvements in Layout Builder:

• Fixed balloon toolbar positioning in Layout Builder dialogs
• No more tooltips disappearing behind modal windows
• Smoother editing experience when building complex layouts

🎨 Theme & Styling Updates

Y Styles expansion:

• Now available across Landing Pages, Events, and Articles
• Global table styling configured via editor.settings.yml
• Consistent design system across all content types
• More style options for content formatting

What works out of the box:

• All existing themes compatible with 11.3.3
• Color schemes preserved
• Custom theme modifications need testing

📦 Media Management for Site Builders

Entity Browser → Media Library migration:

What changed:

Old: entity_browser for media selection
New: Core media_library_widget for all media fields

Impact on your work:

• All media reference fields now use Drupal’s built-in Media Library
• Cleaner, more intuitive media selection UI
• Better performance and maintenance
• 34 modules updated automatically

Media Tags replace Media Directories:

• Configure taxonomy-based tagging at /admin/structure/taxonomy/manage/media_tags
• Set up hierarchical tag structures
• Configure autocomplete behavior
• Migration from folders happens automatically

Site Configuration Tasks

Required after upgrade:

1. Review media field widgets - Ensure forms using media work correctly

2. Test Layout Builder blocks - Verify all blocks render properly

3. Check user permissions:

   • Remove old entity_browser permissions
   • Configure media_library permissions

4. Configure Google Tag at /admin/config/services/google_tag

   • Replace Google Analytics with GA4 measurement IDs
   • Test tracking is firing correctly

🗑️ Trash Module Configuration

New soft-delete system:

• Enabled by default for all content types
• Configure at /admin/config/content/trash (path may vary)
• Set retention periods for different content types
• Configure which roles can permanently delete vs. soft delete

Typical settings:

Articles: 30 days in trash
Events: 90 days (for annual recurring events)
Landing Pages: 60 days
News: 30 days

⚙️ Modules Removed (Check Your Dependencies)

Uninstalled automatically:

• entity_browser (5 related modules)
• media_directories
• google_analytics
• history
• GroupEx Pro modules

Before upgrade:

• Export configurations that reference these modules
• Document any custom entity_browser view modes
• Note any custom permissions referencing removed modules

After upgrade:

• Update documentation
• Train content editors on new media workflow
• Update any custom forms/views

🔧 Configuration Management

If using config sync:

Pre-upgrade export:

drush config:export -y

Post-upgrade verification:

drush config:status
# Review any configuration changes
# Update configs that reference removed modules

Key config files to review:

• core.entity_form_display.*.*.yml (media field widgets)
• field.field.*.*.field_*_media.yml (media reference fields)
• user.role.*.yml (permissions for removed modules)
• google_tag.settings.yml (new GA4 configuration)

🎯 Site Building Best Practices Post-Upgrade

Test these workflows:

1. Create new Landing Page with Layout Builder
2. Add media to content (images, videos, documents)
3. Edit existing pages with complex layouts
4. Test media selection in different contexts
5. Verify table styling in CKEditor
6. Check Y Styles rendering on frontend
7. Test content deletion and recovery from Trash

Performance benefits you’ll notice:

• Faster admin pages (50% fewer database queries for menus)
• Quicker site builds and configuration imports
• Better breadcrumb caching (faster page loads)

🚨 Known Issues for Site Builders

Custom entity_browser configurations:

• Must be manually migrated to media_library
• Custom view modes need recreation
• Custom selection widgets need refactoring

Third-party modules:

• Test compatibility with any contrib modules using entity_browser
• Check module issue queues for 11.3 compatibility

Custom themes:

• Review if theme implements entity_browser styling
• Update to media_library equivalents
• Test Layout Builder block rendering

📚 Resources for Site Builders

Configuration references:

• Media Library documentation: /admin/help/media_library
• Media Tags configuration: /admin/structure/taxonomy/manage/media_tags
• Google Tag setup: /admin/config/services/google_tag
• Trash settings: Check Content management settings

Testing checklist:

• All Layout Builder blocks render correctly
• Media selection works in all forms
• Content types display properly
• Y Styles appear on frontend
• Trash functionality works for all content types
• Google Tag fires on page loads
• User permissions are correct (no entity_browser leftovers)

Related Resources

• Main Release Announcement
• Full Changelog on GitHub
• Site Builder Documentation
• Community Support