GithubHelp home page GithubHelp logo

timber / debug-bar-timber Goto Github PK

View Code? Open in Web Editor NEW
55.0 8.0 8.0 413 KB

Debug Bar Extension for the Timber Library

Home Page: https://github.com/timber/debug-bar-timber

PHP 83.29% CSS 8.85% Shell 7.87%
debugbar timber wordpress

debug-bar-timber's Introduction

Timber 2.0

By Jared Novack (@jarednova), Lukas Gächter (@lgaechter), Nicolas Lemoine (@nlemoine), Erik van der Bas (website), Coby Tamayo (@cobytamayo), Upstatement and hundreds of other GitHub contributors:

PHP unit tests Coverage Status Scrutinizer Code Quality Latest Stable Version !Financial Contributors

⚠️ Important information about the Timber plugin ⚠️

With the release of Timber 2.0, Composer is the only supported install method. We are unable to continue releasing or supporting Timber as a plugin on WordPress.org. We advise everyone to switch to the Composer based install of Timber 1 as a first step as soon as possible. If you need PHP 8.2 support you will have to switch to Timber 2.0.

For more information and a list of additional resources, please visit this discussion.

What is Timber?

Because WordPress is awesome, but The Loop isn’t.

Timber helps you create fully-customized WordPress themes faster with more sustainable code. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files.

This cleans up your theme code so, for example, your PHP file can focus on being the data/logic, while your Twig file can focus 100% on the HTML and display.

This is what Timber's .twig files look like (from this Hello World example)

{% extends "base.twig" %}

{% block content %}
  <h1 class="big-title">{{ foo }}</h1>
  <h2 class="post-title">{{ post.title }}</h2>

  <img src="{{ post.thumbnail.src }}" />

  <div class="body">
	{{ post.content }}
  </div>
{% endblock %}

Once Timber is installed, it gives any WordPress theme the ability to take advantage of the power of Twig and other Timber features.

Documentation


Installation

Follow the Installation Guide for how to install Timber using Composer.

What Now?

Setup the Timber Starter Theme. Once you have that installed in your WordPress setup, continue reading the Getting Started guide to Themeing.

Timber’s mission

Timber is a tool for developers who want to translate their HTML into high-quality WordPress themes through an intuitive, consistent and fully-accessible interface.

  • Intuitive: The API is written to be user-centric around a programmer's expectations.
  • Consistent: WordPress objects can be accessed through common polymorphic properties like slug, ID and name.
  • Accessible: No black boxes. Every effort is made so the developer has access to 100% of their HTML.

What does it look like?

Nothing. Timber is meant for you to build a theme on. Like underscores it comes style-free, because you're the style expert. Instead, Timber handles the logic you need to make a kick-ass looking site.

Who is it good for?

Timber is great for any WordPress developer who cares about writing good, maintainable code. It helps teams of designers and developers working together. At Upstatement we made Timber because while our entire team needs to participate in building WordPress sites, not everyone knows the ins-and-outs of the_loop(), codex and PHP (nor should they). With Timber your best WordPress engineer can focus on building the .php files with requests from WordPress and pass the data into .twig files. Once there, designers can easily mark-up data and build out a site's look-and-feel.

Should I use it?

Timber is MIT-licensed, so please use in personal or commercial work. Just don't re-sell it. Timber is used on tens of thousands of sites (and tons more we don't know about)

Timber 1

You can find the code for Timber 1 on the 1.x branch and read the Timber 1 documentation over here.

Links

Related & Official Projects

  • Twig The template language used by Timber.
  • Timber Starter Theme The "_s" of Timber to give you an easy start to the most basic theme you can build upon and customize.
  • wp-i18n-twig WP CLI Command to grab translatable strings from Twig files.
  • Timber Debug Bar Adds a debug bar panel that will show you which template is in-use and the data sent to your twig file.

Related Timber Projects

Projects that use Timber

  • Branch Bootstrap 3 + Timber = Branch starter theme!
  • Flynt a component based WordPress starter theme built on Timber and ACF Pro
  • Gantry5 a framework for theme development
  • Hozokit a component based starter theme
  • Juniper Starter pack that incorporates Timber and Bedrock
  • Seedling a starter theme using Bootstrap 4

Helpful Links

Reporting Security Issues

To disclose a security issue to our team, please submit a report via GitHub.

Support

Please post on StackOverflow under the "Timber" tag. Please use GitHub issues only for specific bugs, feature requests and other types of issues.

Contributing & Community

We love PRs! Read the Contributor Guidelines for more info. Say hello, share your tips/work, and spread the love on Twitter at @TimberWP.

Sponsor us

Since 2013 our goal at Timber is to create a library to that helps you create fully-customized WordPress themes faster with more sustainable code.

Through the collaborative efforts of both our dedicated team and countless contributors, we have invested numerous hours in maintaining and enhancing Timber. To keep doing that, we rely on the invaluable support of our sponsors.

Are you a WordPress pro or part of an agency who relies on Timber? Keep the magic alive by becoming a sponsor! By becoming a sponsor, you contribute to the continuous maintenance and enhancement of Timber, ultimately benefiting developers worldwide.

Gold Sponsors

Our backers

Documentation

The Official Documentation for Timber is generated from the contents of this repository:

debug-bar-timber's People

Contributors

grzegorzmanda avatar jarednova avatar landwire avatar manzwebdesigns avatar mikelittle avatar thaikolja avatar xenobytezero avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

debug-bar-timber's Issues

Timber + Debug Bar - Theme crash

Hello,

my Theme crashs at any page, if i use the latest Version from Timber with the latest? Timber Debug-Bar. If i disable the Debug-Bar the Theme is alright.

Expected behavior

The "Screen" is wrong. The theme does not have the full width on the desktop, just maybe tablet size. The error is also with the timber-starter-theme.

Actual behavior

I see an Error in Debug-Bar under Timber:
Fatal error: Method Timber\FunctionWrapper::__toString() must not throw an exception, caught Error: Call to undefined function Symfony\Component\VarDumper\Caster\str_contains() in /wp-content/plugins/timber-library/vendor/twig/twig/src/Environment.php(497) : eval()'d code on line 0
There is no other output.

What version of WordPress, PHP and Timber are you using?

Wordpress: 5.8 / Timber: 1.18.2 / Timber-Debug-Bar: 1.0.8 (i tried 1.1.4 from your github here. However, it also appears to me as 1.0.8) / ACF 5.9.9 (if I deactivate it nothing changes) - no more plugins

PHP 7.3.22 - as fpm

How did you install Timber? (for example, from GitHub, Composer/Packagist, WP.org?)

Github & Wordpress-Plugin-Directory

PHP fatal error under WP 3.9.2

Using the latest commit of Timber Debug Bar, I'm getting this error when I try to load a page under WP 3.9.2, with Timber Debug bar and Debug Bar activated:

PHP Fatal error: Using $this when not in object context in /var/www/public/content/plugins/debug-bar-timber/class-debug-bar-timber.php on line 19

Reverting to commit #39fac03 eliminates the problem.

Plugin stops Query Monitor from outputting

It appears that your plugin stops the plugin Query Monitor from outputting on some post archive pages. As referenced in this topic.

I don't know what causes it, all I know is when I deactivate the debug-bar-timber plugin it shows as expected.

0.2 Fatal error on plugin activation

Plugin could not be activated because it triggered a fatal error.
Parse error: syntax error, unexpected T_FUNCTION in /home/******/public_html/wordpress/wp-content/plugins/debug-bar-timber/debug-bar-timber.php on line 11

Diverse Warnings in backend

Getting Warnings in backend - two times - after update yesterday. Plugin "Debug Bar" is up to date.

WARNUNG: wp-content/plugins/debug-bar-timber/class-debug-bar-timber.php:5 - include(vendor/autoload.php): failed to open stream: No such file or directory

Tab "Timber" is empty.

Warning when viewing the debug bar

Warning: Missing argument 1 for Debug_Bar_Timber::render(), called in /Users/willbarker/Sites/bennet/bennet-surfboards/wp-content/plugins/debug-bar/debug-bar.php on line 236 and defined in /Users/willbarker/Sites/bennet/bennet-surfboards/wp-content/plugins/debug-bar-timber/class-debug-bar-timber.php on line 32

You don't actually use that argument in the function, so doing this:

32 function render($file = ''){

would fix it. Not 100% sure what im doing though, so didn't want to do pull request.

I get this both at home where i'm making myself a website using the starter theme and here at work where i'm just using it a bit to help with a site someone else bodged together.

Thanks for this plugin. Its really wonderful.

Check if timber class exists

Hi there,

when I switch from a timber based theme to a default not timber based theme (twentytwentyone for instance) I get the error that the timber class is not defined. It would be good, if you could check for that class before adding all the filters maybe.

Thanks!

This is the error:
Class ‘Timber\Timber’ not found in /var/www/html/bedrock/web/app/plugins/debug-bar-timber/class-debug-bar-timber.php:28

printing out posts in wp_footer() on front page

For some reason, the plugin started printing out what looks like the posts on the front page template of my theme, calling in wp_footer(). Anyone else experience this?

Running:

  • Timber Debug Bar 0.3
  • Timber Library 1.9.2
  • PHP 7.2.15
  • Wordpress 5.1

Conflict with woocommerce checkout

I'm developing a site using Timber and Woocommerce.

When updating cart quantities on the cart page the contents are duplicated after update.

The woocommerce javascript apparently looks for something like $form = $('.woocommerce > form') and since the HTML of the page seems to be repeated in the debug info the jquery selector returns two elements instead of one, causing the duplication. Disabling the plugin solves the problem.

Doesn't group titles/called-froms/dumps

image

It's pretty difficult to match up what dumps go with what templates and where they were called from.

Seems like this could be fixed by refactoring the render() function a bit.

Version Numbering discrepancies

It looks like version numbers between GitHub and WordPress.org are getting scrambled. The most recent release (that @manzwebdesigns deployed the other day) from GitHub is 1.1.5:

https://github.com/timber/debug-bar-timber/releases/tag/1.1.5

... but according to WordPress.org it's 1.0.5:

Screen Shot 2021-09-23 at 4 51 10 PM

https://wordpress.org/plugins/debug-bar-timber/

... to make matters even more fun, the readme.txt reports 1.0.10. There might be a mix of manual and script work here. Just wanted to call it out as an issue as it might be related to https://github.com/timber/timber/issues/2477

Timber section in debug missing

Not quite sure when this disappeared but I not longer get the timber data with the debug bar
Hunting_Land_Properties_For_Sale_or_Lease___Browse_our_selection_of_daily_updated_listings

php 7.4.1
wp 5.9.1
timber library Version 1.19.1
debug-bar Version 1.1.2
debug-bar-timber Version 1.1.6

lock file from debug-bar-timber

{
"_readme": [
"This file locks the dependencies of your project to a known state",
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "e6f135bc14a2e2eb6ee4cd89dbbc2c7e",
"packages": [
{
"name": "symfony/polyfill-mbstring",
"version": "v1.24.0",
"source": {
"type": "git",
"url": "https://github.com/symfony/polyfill-mbstring.git",
"reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/0abb51d2f102e00a4eefcf46ba7fec406d245825",
"reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825",
"shasum": ""
},
"require": {
"php": ">=7.1"
},
"provide": {
"ext-mbstring": ""
},
"suggest": {
"ext-mbstring": "For best performance"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-main": "1.23-dev"
},
"thanks": {
"name": "symfony/polyfill",
"url": "https://github.com/symfony/polyfill"
}
},
"autoload": {
"files": [
"bootstrap.php"
],
"psr-4": {
"Symfony\Polyfill\Mbstring\": ""
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "[email protected]"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Symfony polyfill for the Mbstring extension",
"homepage": "https://symfony.com",
"keywords": [
"compatibility",
"mbstring",
"polyfill",
"portable",
"shim"
],
"support": {
"source": "https://github.com/symfony/polyfill-mbstring/tree/v1.24.0"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2021-11-30T18:21:41+00:00"
},
{
"name": "symfony/var-dumper",
"version": "v5.2.12",
"source": {
"type": "git",
"url": "https://github.com/symfony/var-dumper.git",
"reference": "d5f42c357a6672d4e5960bba85e437850e9a7abb"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/var-dumper/zipball/d5f42c357a6672d4e5960bba85e437850e9a7abb",
"reference": "d5f42c357a6672d4e5960bba85e437850e9a7abb",
"shasum": ""
},
"require": {
"php": ">=7.2.5",
"symfony/polyfill-mbstring": "~1.0",
"symfony/polyfill-php80": "^1.16"
},
"conflict": {
"phpunit/phpunit": "<5.4.3",
"symfony/console": "<4.4"
},
"require-dev": {
"ext-iconv": "
",
"symfony/console": "^4.4|^5.0",
"symfony/process": "^4.4|^5.0",
"twig/twig": "^2.13|^3.0.4"
},
"suggest": {
"ext-iconv": "To convert non-UTF-8 strings to UTF-8 (or symfony/polyfill-iconv in case ext-iconv cannot be used).",
"ext-intl": "To show region name in time zone dump",
"symfony/console": "To use the ServerDumpCommand and/or the bin/var-dump-server script"
},
"bin": [
"Resources/bin/var-dump-server"
],
"type": "library",
"autoload": {
"files": [
"Resources/functions/dump.php"
],
"psr-4": {
"Symfony\Component\VarDumper\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "[email protected]"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Provides mechanisms for walking through any arbitrary PHP variable",
"homepage": "https://symfony.com",
"keywords": [
"debug",
"dump"
],
"support": {
"source": "https://github.com/symfony/var-dumper/tree/v5.2.12"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2021-07-23T15:54:19+00:00"
}
],
"packages-dev": [],
"aliases": [],
"minimum-stability": "stable",
"stability-flags": [],
"prefer-stable": false,
"prefer-lowest": false,
"platform": [],
"platform-dev": [],
"plugin-api-version": "2.1.0"
}

Provide Variable Map for data

From @sleepyjackson:

Hey @jarednova. Just had a thought for a new feature that would help keep our twig templates well documented.

Just now I went through my twig templates and added a comment at the top of each one to describe what variables the template expects. This means my templates are now (hopefully) self-explanatory (in terms of the data being passed to it), so a front-end developer could take this and run with it, without having to know anything about the php.

Here's an example of what I mean - this comment appears at the top of my template:

{# expected variables:
my_first_variable: array of the form array[0][X] where X is 'start_date', 'end_date', 'title','subtitle'
my_second_variable: array of the form array[0][X] where X is 'title', 'start_date', 'end_date', 'url' 
#}

This is a mild pain to do. I can imagine getting sloppy and not consistently doing this. Particularly when the 'api' changes.

It would be great if this comment could be automatically generated by Timber, so all I have to do is paste it into my twig template. Or maybe the Timber Debugger plugin could generate this? The output of the Debugger, is almost good enough to use as is, but its too verbose (because each value of the array gets output).

It sounds super lazy, but such a feature seems to be a good step towards encouraging well documented twig templates!

Entire Debug Bar not showing on Frontend

Hi there,
I have the latest version of Wordpress, debug bar and timber debug bar installed.
The debug bar shows fine in the backend, with the timber option. But in the frontend of the site, the debug bar is not showing at all if I have timber debug bar installed. I have Timber 1.18.1 installed.

In my debug.log are no errors thrown afaics.

Anybody has similar problems?

Rename plugin "Debug Bar Timber"

It's a super minor issue, but we are using some other Debug Bar extension plugins in our projects and it seems that the naming convention of such a plugin is "Debug Bar {name}". It would be nice to follow this convention to get all the extensions lined up nicely in the plugins list :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.