cearls / timberland Goto Github PK

it breaks wordpress when I activate the theme from the backend

in the footer.php code, https://github.com/cearls/timberland/blob/main/theme/footer.php

there is a rendering of 'page-plugin.twig'

is that normal? or should it be 'footer.twig`?

Question, im wondering how you work with alphine js inside the editor? When i use it on alway getting a error on a block that uses alphine js.

It seems im getting a json error on the x-data="{ }" part. Dont you have this, or is there a workaround that you implemented?

when running composer install

we got the error

[Composer\Json\JsonValidationException]                                                                     
  "./composer.json" does not match the expected JSON schema:                                                  
   - name : Does not match the regex pattern ^[a-z0-9]([_.-]?[a-z0-9]+)*/[a-z0-9](([_.]?|-{0,2})[a-z0-9]+)*$ 

I am wondering is there any way to pass data from Twig file to the .js file inside block directory? For example, I have something like this in blocks directory

• sample-block
  -- style.css
  -- script.js
  -- index.twig

Inside index.twig I have data that I want to pass to the script.js file. It can be block id for example. Is there any way to do it?
For now I added

<script> const blockId = {{ block.id|json_encode }} </script>

in index.twig and I can access it inside script.js file. The problem is when I don't have this block on the page. Somehow script.js file from block directory are trying to run. So actually I have 2 questions:

1. Is there any way to proper pass data to the .js file in the block directory
2. Is there any way to run scripts inside script.js file only when the block exist?

Hi, I'm wondering is there any way to create child theme in current approach where theme files are located in the "theme" subdirectory?
I tried to create timberland-child directory. Inside it I made "theme" directory which contain style.css file. When I go to the wordpress panel I can see message that says "the parent theme is missing. please install the parent theme".

So what should I do? Ommit the "theme" subdir and move all files to main directory?

So i love your theme but i missing a way to create new blocks with their own custom settings. Things like alignment ect? How do i need to set these on an per block base?

{{ include(template_from_string(copyright)) }} or {% include template_from_string(copyright) %}, from Timber documentation, results in the following error:

Uncaught Twig\Error\SyntaxError: Unknown "template_from_string" function

not sure if this is because of the theme, I would expect that a code from Timber doc. would work.

I created few fields until my banner component and try to use them in the index.twig without success like this {{ header }}
How can I access this fields in the component?
thanks

Hi, I tried to create new example block. Simply copy existing directory, change name and html structure in the twig file. When I done that and go to the Gutenberg editor I see 3 blocks. One of them is .DS_Store. I checked my theme directories and there's no such file. So my question is how to get rid ot that block and what can I do in the future to avoid that situation? I'm working on mac os system.

Hi there,

Just testing this out for the first time but soon as i activate the theme and try to visit my test sit I get the error

Fatal error: Uncaught Exception: The Mix manifest does not exist.

I've run composer and npm install as well as the development command and then watch but still can't get this to work.

Any ideas what I'm missing?

Hi,
I'm trying to open up my project built on the macos machine in the windows based machine. I have clean wordpress installation. I cloned this repo, install all dependencies via composer and npm. Then I run npm build tasks. When I'm trying to open the website I have error message

Fatal error: Uncaught Exception: The Mix manifest does not exist. in C:\MAMP\htdocs\xxx\wp-content\themes\xxx\theme\functions.php:200 Stack trace: #0 C:\MAMP\htdocs\xxx\wp-content\themes\xxx\theme\functions.php(101): Timberland->mix('/app.css', '/C:\\MAMP\\htdocs...') #1 C:\MAMP\htdocs\xxx\wp-includes\class-wp-hook.php(307): Timberland->enqueue_scripts('') #2 C:\MAMP\htdocs\xxx\wp-includes\class-wp-hook.php(331): WP_Hook->apply_filters(NULL, Array) #3 C:\MAMP\htdocs\xxx\wp-includes\plugin.php(476): WP_Hook->do_action(Array) #4 C:\MAMP\htdocs\xxx\wp-includes\script-loader.php(2156): do_action('wp_enqueue_scri...') #5 C:\MAMP\htdocs\xxx\wp-includes\class-wp-hook.php(307): wp_enqueue_scripts('') #6 C:\MAMP\htdocs\xxx\wp-includes\class-wp-hook.php(331): WP_Hook->apply_filters(NULL, Array) #7 C:\MAMP\htdocs\xxx\wp-includes\plugin.php(476): WP_Hook->do_action(Array) #8 C:\MAMP\htdocs\xxx\wp-includes\general-template.php(3042): do_action('wp_head in C:\MAMP\htdocs\xxx\wp-content\themes\xxx\theme\views\base.twig on line 10

I'm working with MAMP and with Local by Flywheel but I have the same error in both of these environments. In fact, the manifest file is present in the theme\assets\build directory. So, my question is how to get it work :)

Is it possible for you to update to tailwind 3.0 ?

Thanks for your work!

looks really cool this starter, love it.
I am playing around with it, and can't find a way to make the component example working.
I can add it inside a page, but nothing shows up on the page itself in edit nor preview mode.
Do I need to activate something?

I'm trying to create a new block within the theme folder but it's not being registered on the front-end when I load it in via Guttenberg. The example blocks loads into the site no issue, but registering new blocks just seems to not work at all.

It's worth noting that the block is registered in ACF, and can assign fields to the block.

Theme's functions.php

<?php
/**
 * @package WordPress
 * @subpackage Timberland
 * @since Timberland 1.2.0
 */

require_once dirname(__DIR__) . '/vendor/autoload.php';

Timber\Timber::init();
Timber::$dirname = [ 'views', 'blocks' ];
Timber::$autoescape = false;

class Timberland extends Timber\Site
{
    public function __construct()
    {
        add_action('wp_enqueue_scripts', [$this, 'enqueue_scripts']);
        add_action('after_setup_theme', [$this, 'theme_supports']);
        add_filter('timber/context', [$this, 'add_to_context']);
        add_filter('timber/twig', [$this, 'add_to_twig']);
        add_action('block_categories_all', [$this, 'block_categories_all']);
        add_action('acf/init', [$this, 'acf_register_blocks']);
        //add_filter('allowed_block_types', [$this, 'allowed_block_types']);
        add_action('enqueue_block_editor_assets', [$this, 'enqueue_block_editor_assets']);

        parent::__construct();
    }

    public function add_to_context($context)
    {
        $context['site'] = $this;
        $context['menu'] = Timber::get_menu('Main');
        $context['quick_links'] = Timber::get_menu('Quick Links');
        $context['patient_resources'] = Timber::get_menu('Patient Resources');
        $context["options"] = get_fields("options");

        // Require block functions files
        foreach (glob(dirname(__FILE__) . "/blocks/*/functions.php") as $file) {
            require_once $file;
        }

        return $context;
    }

    public function add_to_twig($twig)
    {
        return $twig;
    }

    public function theme_supports()
    {
        add_theme_support('automatic-feed-links');
        add_theme_support(
            'html5',
            [
                'comment-form',
                'comment-list',
                'gallery',
                'caption'
            ]
        );
        add_theme_support('menus');
        add_theme_support('post-thumbnails');
        add_theme_support('title-tag');
        add_theme_support('editor-styles');
        add_editor_style('assets/build/editor-style.css');
    }

    public function enqueue_scripts()
    {
        wp_dequeue_style('wp-block-library');
        wp_dequeue_style('wp-block-library-theme');
        wp_dequeue_style('wc-block-style');
        wp_dequeue_script('jquery');

        $mixPublicPath = get_template_directory() . '/assets/build';

        wp_enqueue_style('style', get_template_directory_uri() . '/assets/build' . $this->mix("/app.css", $mixPublicPath));
        wp_enqueue_script('app', get_template_directory_uri() . '/assets/build' . $this->mix("/app.js", $mixPublicPath), array(), '', true);
    }

    public function block_categories_all($categories)
    {
        return array_merge([['slug' => 'custom', 'title' => __('Custom')]], $categories);
    }

    public function acf_register_blocks()
    {
        $blocks = [];

        foreach (new DirectoryIterator(dirname(__FILE__) . '/blocks') as $dir) {
            if ($dir->isDot()) continue;

            if (file_exists($dir->getPathname() . '/block.json')) {
                $blocks[] = $dir->getPathname();
            }
        }

        asort($blocks);

        foreach ($blocks as $block) {
            register_block_type($block);
        }
    }

    public function allowed_block_types()
    {
        $allowed_blocks = [
            'core/columns'
        ];

        foreach (new DirectoryIterator(dirname(__FILE__) . '/blocks') as $dir) {
            $allowed_blocks[] = 'acf/' . $dir;
        }

        return $allowed_blocks;
    }

    public function enqueue_block_editor_assets()
    {
        //wp_enqueue_style('prefix-editor-font', '//fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
        wp_enqueue_script('app', get_template_directory_uri() . '/assets/build/app.js');
    }

    public function mix($path, $manifestDirectory = '')
    {
        static $manifest;

        if (!$manifest) {
            if (!file_exists($manifestPath = $manifestDirectory . '/mix-manifest.json')) {
                throw new Exception('The Mix manifest does not exist.');
            }
            $manifest = json_decode(file_get_contents($manifestPath), true);
        }

        if (strpos($path, '/') !== 0) {
            $path = "/{$path}";
        }

        if (!array_key_exists($path, $manifest)) {
            throw new Exception(
                "Unable to locate Mix file: {$path}. Please check your webpack.mix.js output paths and try again."
            );
        }

        return $manifest[$path];
    }
}

new Timberland();

function acf_block_render_callback($block, $content) {
    $context = Timber::context();
    $context['post'] = Timber::get_post();
    $context['block'] = $block;
    $context['fields'] = get_fields();
    $template = $block['path'] . '/index.twig';

    Timber::render($template, $context);
}

// Remove ACF block wrapper div
function acf_should_wrap_innerblocks($wrap, $name) {
    // if ( $name == 'acf/test-block' ) {
    //     return true;
    // }
    return false;
}

add_filter('acf/blocks/wrap_frontend_innerblocks', 'acf_should_wrap_innerblocks', 10, 2);

Hero Block
index.twig:

{#
/**
 * Block Name: Hero Block
 */
#}

<section class="py-64">
    <div class="container">
        <h1>{{ fields.heading }}</h1>
    </div>
</section>

block.json:

{
    "apiVersion": 2,
    "name": "acf/hero",
    "title": "Hero",
    "description": "",
    "category": "custom",
    "acf": {
      "mode": "preview",
      "renderCallback": "acf_block_render_callback"
    },
    "supports": {
      "align": false,
      "jsx": false
    },
    "example": {
      "attributes": {
        "mode": "preview",
        "data": {
          "is_preview": true
        }
      }
    }
  }

Page.twig

{% extends "base.twig" %}

{% block content %}
    {{ post.content }}
{% endblock %}

Hi, I'm trying to deploy the theme to the public server on the final website. I think there's some things that is missing or I'am doing it wrong.

1. What files should be deployed to the server?
   With the normal theme it will be just theme_folder inside wp-content/themes. How about this? Which directories should I deploy? vendor and theme?

2. What's the purpose of the build directory?
   For me, this is the final files (minifed etc) for the production site. There should be all font files, images, styles and scripts since I don't want to share any css/scss/js soruce files. Am I right? If yes, there's missing configuration inside mix file regarding images and fonts. When I run npm production inside assets/buld there's no images or fonts. They are in the assets directory. So, my question is which files should be in the assets/build directory and which one in the assets

3. Is it possible to use the theme with plugin instead of vendor version?

Hey there, cool repo! I think this could be a great successor of something like Flynt.

However, i was wondering how you instantiate script files in a component if you have two or more of the same blocks on the same page. If you use Alpine directly as attributes within the twig files, that shouldn't be an issue since Alpine will take care of it afaik. But let's say you have a component that uses some classic document.querySelector stuff in a script.js file. What's going on in this case? Will you just bundle everything in a single file or is there some unseen logic that creates instances or even web components like Flynt does?

Cheers

PS: Maybe it would be better to have the discussion tab activated for questions like this.

Hi, are you planning to add scss support for custom styles? I mean any compiler or something? I’m using gulp for this in another theme and I want to switch to your theme but this is the thing that missing.

Hi, I'm trying to install my custom font. So, I placed all .woff etc files inside directory theme/assets/fonts/. Inside theme/assets/styles I created directory components and inside this folder I have file called fonts.css that I'm importing inside app.css file. Sample structure my font css file below:

@font-face { font-family: 'New Order'; src: url('../fonts/NewOrder-Light.woff2') format('woff2'), url('../fonts/NewOrder-Light.woff') format('woff'), url('../fonts/NewOrder-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }

When I go to the website, my console log throws me an errors with 404 error and node console throw errors like
Can't resolve './fonts/NewOrder-Light.woff2' in '/Applications/MAMP/htdocs/example/wp-content/themes/example/theme/assets/styles'. I'm working with mamp so my current website url is http://localhost:8888/example but the error say that the path is http://localhost:8888/fonts/NewOrder-Medium.woff?732726a097afc95d3aa3ab37099ee6e9. I checked the build directory. The fonts are there. I tried with many variations with paths inside my fonts.css file but without any luck. Can you help me with that?

Also second questions (I don't want to create another issue for that kind of thing). What's the purpose of theme.css file? Should I place all my custom code (rules, imports etc) in this file instead of app.css?

@edit When I type absolute path to my font like /example/wp-content/themes/example/theme/assets/build/fonts/ it's working but it's not exactly what I'm looking for. When I move website to public server my path will be different. Is there any way to get it work? Or should I enqueue fonts file separately with twig?

@cearls Is there any reference for a suggested way to use the /patterns area? I get the idea but would want to know if there's documentation or a template or example on how to get the best of it. Thanks.

I created a new banner component under the folder component, and not sure how to make it available in the pages?
I tried to play with the custom field "Page builder" without success.
thanks