enclavely / tailor Goto Github PK

I think the .tailor-preview__viewport element should use the spinner-2x.gif that is already in core.

Hi, I tested some page-builder plugins and I found Tailor very well structured. Awesome works!

I took a look on how to customizing css to follow my theme styleguide.
Perhaps best way is to override css in my theme, but I have the feeling that you've used a css framework to make tailor theme and certainly a pre-processor like gulp, grunt or postcss. So I would like to know if it's possible to override some file in the scss folders, and rebuild all css files.

Also, is there a documentation about css components used : grid, buttons, states... ?

Fix url of this github repository on https://wordpress.org/plugins/tailor/ description

After updating to 1.7.2, it seems like it's not possible to set 100vh as minimum height on a section to achieve full-height content anymore. Is this an intended change or a bug?

In Beaver Builder, you can use third-party and built-in widgets directly as page elements. It'd be great if you could do this in Tailor too!

Would it be difficult to develop an extension that enables this?

Very nice plugin, by the way. Thanks a lot 👍

It would be great to be able to get tailor data via the API in order to enable react frontends with wordpress backend etc.

The scripts and styles are enqueued on every page, regardless of whether the page supports tailor (home page, and archives), or whether the user can make use of tailor. By that I mean that admin styles are enqueued for public visitors.

Hey Andrew,

What do you use to compile your SCSS ?

Thanks

🎯
No, I just want to know how to properly kill a tailored post : remove all stuff relative to Tailor but keep the content of the post. I didn't found a function to do that in Tailor class.

Possibility to kill a tailored post could be proposed in the admin notice. Relative to my comment here #41.

Hello,
I often find myself needing to adjust column widths for the various responsive screen sizes I'm developing for. A quick-and-dirty example using Bootstrap classes might be as follows:

<section class="row">
    <article class="col-xs-12 col-sm-6 col-lg-8">
        Content goes here
    </article>
    <figure class="col-xs-12 col-sm-6 col-lg-4">
        <img src="image.png" class="img-responsive">
    </figure>
</section>

With Tailor I can only set the column widths once, and can't change them depending on the screen size. Am I missing something?

I noticed there is an option to set a video background for section element, however the video doesn't show up.

I checked shortcode-section.php but there are seems to be none related to displaying video background. Do I need to insert the video manually by customizing the section html output?

I noticed tailor has bundled it's own version of imagesloaded.

It's best practice to make use of scripts in WordPress so that the same scripts don't get loaded multiple times.

The WordPress script is registered with the handle imagesloaded.

A client has been recurrently editing content on main WP page, and after editing content in Tailor, all changes on WP Edit page are lost.
I've explained it often but it seems they are having hard time to learn.
Fortunately WP has a "revisions" option to recover content.

A way to do this would be to migrate changes in WP Editor to Tailor? (and remove the message: "Changes made to this página within the editor will not be displayed in Tailor")
Or maybe some way of disabling the content area within the WP Edit screen when using Tailor for a page?

Thanks

We need to let user be able to create nice website/pages, without technical knowledge. A lot of project are reinventing the wheel, and I really think we should mutualize effort around a nice library and reuse that library.

Please see this issue:
GrapesJS/grapesjs#20

I installed the plugin against a fresh install running Twenty Sixteen and I never get the button. Nothing is shown in the JS console or in PHP logs. I switched to a new Underscores theme and the results are the same.

Do I need a DOM element in my templates for Tailor to work with? Something else I am missing?

Hi Andrew, is there a chance to put section element inside a section (nested section)?

I have few elements that should be displayed fullwidth, such as image slider and Instagram gallery but I had problems with the section that doesn't allows them to be displayed correctly because they are wrapped by tailor-section__content div.

I think it would be nice if I can add some custom section settings e.g a checkbox to enable/disable full width section content etc, I think it could be done by placing following code at the end of register_controls() method of Tailor_Section_Element class:

do_action('tailor_ELEMENTNAME_register_controls', $this);.

This is also should be applied to all built-in elements.

Please make all elements dynamic, at least enable dynamic by default so that we dont need to define it when registering an element.

Why? when a non-dynamic element's structure changed even if it just a class name that would be a nightmare. We have to look trough dozens, hundreds or probably thousands of posts and pages to find and replace the element to apply the structure changes.

Hello,

I have an error when I drag'n drop an element.
Error: An "el" #canvas must exist in DOM and TypeError: this.el is undefined

So I can't do anything. :(

Can you help me please ?
Thank u.

When first using Tailor, it took me a little bit to find the "Tailor this Page" button, as I was expecting a page builder button right above the text editor. Having to scan the admin bar when editing a page, isn't very intuitive. A "Tailor this Page" button next to the "Add Media" button would help to become familiar with Tailor faster.

Currently the preview frame width are based on tailor_get_registered_media_queries but the height is static for example mobile is 480px.

My theme's media queries are quite different, for mobile max width is 480px instead of 320px and so on, so I filtered them out with:

function mytheme_tailor_media_queries($media_queries) {
    $media_queries['desktop'] = array(
        'label' =>  __('Desktop', 'textdomain'),
        'min'   =>  '1024px',
        'max'   =>  '',
    );
    
    $media_queries['tablet'] = array(
        'label' =>  __('Tablet', 'textdomain'),
        'min'   =>  '481px',
        'max'   =>  '1023px',
    );

    $media_queries['mobile'] = array(
        'label' => __('Mobile', 'textdomain'),
        'min'   =>  '',
        'max'   =>  '480px',
    );

    return $media_queries;
}

add_filter('tailor_get_registered_media_queries', 'mytheme_tailor_media_queries');

The thing that very annoyed that the preview frame size is become 480x480 of pixels. I feel like previewing on an apple watch instead of a mobile phone.

I think it's better to make preview frame size fixed, e.g 320x480 of pixel for mobile regardless what size is defined on registered media queries. This way it's also possible to add another preview mode e.g Mobile and Tablet landscape because the sizes are static and not depends on registered media queries.

Otherwise you can use this simple aspect ratio formula to calculate the height using javascript:

(original height / original width) x new width = new height

// Calculate frame size for mobile based on registered media query
let height = (480 / 320) * 480;
// height = 720

Templates are currently listed as a public post type. This means that they are visible on the front end of the site and could show up in automatic sitemap plugins (and similar).

I would like to suggest that public be changed to false.
https://github.com/andrew-worsfold/tailor/blob/e6e041390db34c3167b404e6f737e2e0fed5dac5/includes/class-templates.php#L92

When I had a look it seemed like the grid item only parse "X-X-X-X" instead of "X,X,X,X" or "X-X-X-X" like other elements do.

A strange thing is happening in one of my wordpress installations when using Tailor. When I edit a Tailored page, even if I have published it before, it always goes back to loading as main content the content of the oldest post I've got...

I wonder why this is so, as i've not managed to replicate with other sites. What is the function that loads content to a Tailored page? Any ideas on what may be causing this ?

Hi Andrew,

Btw, great work on this plugin ;-) .... but After version 1.4 everything that concerns creation of custom elements breaks. You remove the add_action('tailor_register_elements'...) from class_elements.php and your documentation is not up to date. The visible event 'tailor_load_elements' does not work either because of your new sequence of calls. Reverting to 1.3.7 until this is fixed.

Hi Andrew

Following our discussion I have been through and tested elements in IE9 and identified any styles that need to be added to add compatibility.

To sum it up the Scss to get this working is:

.tailor-ui {
    .tailor-column,
    .tailor-grid__item {
        float: left;
    }

    .tailor-section:before,
    .tailor-section:after,
    .tailor-grid:before,
    .tailor-grid:after {
        content: " ";
        display: table;
    }

    .tailor-section:after,
    .tailor-grid:after {
        clear: both;
    }
}

As you can see the only thing needed is to float columns and add a clearfix. Everything else I've tried so far works without a hitch. Great work on the CSS!

If padding is defined and some value from the "General" tab is changed (such as label or link), the padding is lost (although the recorded setting still remains).

To replicate:

1. Add button
2. Change padding-left to 50px
3. Apply
4. Edit the button
5. Change link or label
6. Verify that the left padding was lost

Obs: using latest Tailor version in one test site only. Didn't tested in any other site.

Other 2 Things About Padding/Margin:

1. I think it would be much better if the default setting for Margin and Padding was individual instead of "all". Because if padding-left is set to 50px and i edit the button to change only that setting, by default it will be applied to all (top, bottom and right also).

2. Although is interesting to have the freedom to set the unit i desire, it would be nicer if the default were (px), so if i add only the number 50 it automatically assumes it is 50px and applies the setting. And if i specify % or other, it will apply that setting.

Since is my first time communicating, let me just say: this page builder is awesome. Is the one that currently has the most potential, in my opinion (specially aiming for a simplified client-oriented front-end editing experience). Great work Andrew, congratulations and thanks for your support (in general, as i've been following Tailor-related issues around).

I love the Dashicons picker in the Box element. Given the amount of open source icons out there nowadays, are there any plans to bundle more packs?

https://genericons.com/ (145)
https://icomoon.io/#preview-free (490)
http://fontawesome.io/icons/ (634)

After clicking "Tailor this page" and then refreshing the page when in the Taylor editor, text descriptions of elements (in the left sidebar) are not immediately visible. However when I clicked edit on a content element, the text descriptions appeared again. When I clicked edit on a box element, the element descriptions didn't appear.

I can reproduce the bug by doing the following:

• Click "Tailor this page"
• Refresh. Element text descriptions not visible
• Click edit on content box, text now visible.
• Refresh
• Click edit on box element, text not visible

I started translate tailor.pot file but there is an error:

tailor.pot:31: first occurence  
tailor.pot:1823: second occurence

I removed the second to continue translate but you should fix it.

Related to #23.

Currently using Tailor to build a client website, and very impressed with it so far.

However, the client is concerned with the shortcodes that are present in the editor when they go to modify the page.

As a developer, I think it would be very easy for something to get broken with the editor present!

Hi again,

$this->add_element( 'tailor_custom_section', array(
'label' => __( 'Custom section', 'tailor' ),
'description' => __( 'Custom image section.', 'tailor' ),
'type' => 'wrapper',
) );

The above code, were type is set as 'wrapper' does not seem to work. Is there anything else I need to do to make my element work as a wrapper/container?

I need it to work when I drag a new Custom section element on to the canvas, it will create a section and fill it with my own content.

The element highlight when hovering over an item is low contrast - so it's hard to tell what will be selected. This is even worse when the theme has a grey background (see image below).

I know it's not so attractive but I'd suggest using something with a lot more contrast especially on the hover. This this will improve accessibility as well. I'd probably go for a middle grey since it will work on both light and dark backgrounds.

I have installed bbpress and its working without any issue. But after activating I am getting this issue
Notice: bbp_setup_current_user was called incorrectly. The current user is being initialized without using $wp->init().

With a single page application, a full ajax website or just new content added by ajax, all component's initialisation need to be reloaded for this new content. I did this by copy-paste in my theme the lines 21-81 of this file.

But this isn't DRY and not safe for future update. It will be better to wrap this component's initialisation in a function which could be call anywhere in our themes.

Currently when element settings are changed it will immediately update the element, is it possible to disable it on some elements or specified controls?

I have a function to resize image dynamically when specified image size is not already exists and I have a text field to define the post thumbnail with default 300x250, the problem comes when I decided to change the image size, for example I want to change the image height to 200. Before I finished to type, for example I only typed 300x2 or 300x20 the element immediately refreshed and new image sizes 300x2 or `300x20 created.

I think it would be great if there is ability to enable/disable immediate update, or set a delay between value changed and element update or maybe use blur event instead of change.

Got this notices when WP debug enabled.

There's a .spinner class being used in a few locations throughout the plugin - however this is clashing with Jetpacks infinite scroll spinner and making it disappear.

Would be nice if you could add a prefix to the spinner so that it doesn't affect things on the front end of the site.

Some feedback from slack.

Ability to Tailor'ify any text area, not just post/page content.

:)

It would be great if there're some entrance effects to all elements, like: slide in left, fade in, bounce, and so on. And we could select effect, duration and delay time. Here has a css project with all of it https://daneden.github.io/animate.css/

And maybe image hover effects too. Some examples: http://tympanus.net/Development/HoverEffectIdeas/index.html

does it possible? as i can see you save data in postmeta in DB and on page / post content area in WP admin, why?

How can I use Tailor to add custom post types?
Would love to list them in grid, carousel or slideshows just like we can do with posts.
Are you thinking in adding it?

Hi @andrew-worsfold

Congratulations for this great page builder.
I just tried to use the parallax effect on a section, but there is an issue that might prevent me to use it. It's speed, it seems that the background now is scrolling faster than the actual page scroll. To obtain a background moving effect, it's better to have it scrolling slower than the page itself.

Would be nice to have a setting, a textinput with a speed number, or a slider where you can control it's speed:

• -1 - Slower than page
• 0 - No Parallax
• +1 - Faster than page

Currently it looks like the setting is Faster than page, It would be nice to also have the possibility to slide it somewhere -1 and 0, being 0 as parallax disabled.

Regards

I've added few additional controls to section element, some of them are require CSS. There is filter to register element's controls, but it seems like there is no filter for CSS rules or am I missing something?

There is a function Tailor()->is_canvas() to see if we are on the Tailor canvas (currently editing the page).
There is another function called Tailor()->is_tailoring() but this is not to check if current post was edited with Tailor. I don't understand the purpose of this public function...

It will be nice if we could check in the WP loop if the post was tailored, with a public function like Tailor->is_tailored(). Actually I do that with:

if ( false == get_post_meta( $post->ID, '_tailor_layout', true ) ) {
   // $post not tailored
} else {
    // Tailored $post !
}

Hi! Love the plugin so far! Nextgen gallery is a really popular gallery plugin, but it seems to break Tailor. Any suggestions on how to work around this? I'm planning on implementing this into production asap.

Image: http://i.imgur.com/TQmIhFq.png

It would be great to have a filter exposed for these so they can be easily modified by themes and plugins.

The tailor_do_shakespeare() function is pluggable, but that's only useful for plugins that happen to be loaded before Tailor is, and won't work for themes at all.

As a general rule, I think the pluggable function pattern is really only useful (and stable) for parent/child themes. That is, until the day WordPress finally introduces some kind of plugin dependency management. 😜

Why not build into Tailor an area where we could activate/deactivate add ons, being it more modular?

Hello

Nice plugin thank you.

I see you are shipping the plugin with translations.

The i18n process could be easier and collaborative with translate.wordpress.org like explained on:
https://make.wordpress.org/plugins/2015/09/01/plugin-translations-on-wordpress-org/

Invite users to add their translations directly into translate.wordpress.org for example.