Post Search component example using Acorn v4 and Livewire 3

front-page.blade.php

@extends('layouts.app')

@section('content')
  <x-hero title="Welcome to Sage" />

  <x-container>
    <livewire:post-search lazy />
  </x-container>
@endsection

post-search.blade.php

<div>
  <input
    wire:model.live="search"
    type="text"
    placeholder="Search for a post..."
    class="w-full p-3 text-lg border border-gray-300 rounded"
  >

  @empty($posts)
    <div class="mt-4">
      No posts found.
    </div>
  @endempty

  @if ($posts)
    <div class="mt-4">
      Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total{{ $search ? " for {$search}." : '.' }}
    </div>

    <ul class="mt-4 space-y-2">
      @foreach ($posts as $post)
        <li>
          <a href="{{ $post['url'] }}" class="text-lg text-blue-500 hover:text-blue-600">
            {{ $post['title'] }}
          </a>
        </li>
      @endforeach
    </ul>

    @if ($hasPrevious || $hasNext)
      <div class="flex justify-between mt-4">
        @if ($hasPrevious)
          <button
            wire:click="previousPage"
            class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600"
          >
            &larr; Previous
          </button>
        @endif

        @if ($hasNext)
          <button
            wire:click="nextPage"
            class="px-4 py-2 mt-4 ml-auto text-white bg-blue-500 rounded hover:bg-blue-600"
          >
            Next &rarr;
          </button>
        @endif
      </div>
    @endif
  @endif
</div>

PostSearch.php

<?php

namespace App\Livewire;

use Livewire\Attributes\Url;
use Livewire\Component;
use WP_Query;

class PostSearch extends Component
{
    /**
     * The posts.
     */
    public array $posts = [];

    /**
     * The WordPress query.
     */
    protected ?WP_Query $query;

    /**
     * The post range.
     */
    public string $range = '';

    /**
     * The search query.
     */
    #[Url('query')]
    public string $search = '';

    /**
     * The page.
     */
    #[Url]
    public int $page = 1;

    /**
     * The total posts.
     */
    public int $totalPosts = 0;

    /**
     * The total pages.
     */
    public int $totalPages = 1;

    /**
     * The amount of posts to show per page.
     */
    protected int $amount = 5;

    /**
     * Render the component.
     *
     * @return \Illuminate\View\View
     */
    public function render()
    {
        $this->query = new WP_Query([
            'post_type' => 'post',
            'post_status' => 'publish',
            'paged' => $this->page,
            'posts_per_page' => $this->amount,
            's' => $this->search,
        ]);

        $this->totalPages = $this->query->max_num_pages ?? 1;
        $this->totalPosts = $this->query->found_posts ?? 0;

        $this->page = min(max(1, $this->page), $this->totalPages);

        $start = ($this->page - 1) * $this->amount + 1;
        $end = min($this->totalPosts, $this->page * $this->amount);

        $this->range = "{$start}-{$end}";

        $this->posts = $this->query ? collect($this->query->posts)
            ->map(fn ($post) => [
                'title' => get_the_title($post),
                'url' => get_permalink($post),
            ])->all() : [];

        return view('livewire.post-search', [
            'hasPrevious' => $this->page > 1,
            'hasNext' => $this->page < $this->totalPages,
        ]);
    }

    /**
     * Go to the next page.
     */
    public function nextPage()
    {
        $this->page = min($this->totalPages, $this->page + 1);
    }

    /**
     * Go to the previous page.
     */
    public function previousPage()
    {
        $this->page = max(1, $this->page - 1);
    }
}

This i very nice, compact and clean. Well done sir! 🥇

Have you tried livewire with gutenberg and if so, do they play nice?

I messed around a little bit inside of custom metaboxes inside of /wp-admin/ but not with the actual editor.

This is amazing.