elegantthemes/create-divi-extension

create-divi-extension's Issues

VB footer credits have incorrect link

Problem Description

When you create a new extension the footer of the main module is populated with links based on the Plugin Name and Author from the main initialization file. However, the URIs are not assigned correctly, they both seem to come from the Author URI. It Would be better if the Plugin Name linked to the Plugin URI. I think it would also be good if these opened automatically in a new window.

Screenshot and/or gif

Text settings documentation missing in Advanced Fields docs

In the documentation for the advanced fields (https://www.elegantthemes.com/documentation/developers/divi-module/advanced-field-types-for-module-settings/), the 'text' settings (orientation + background layout) are missing.

Export layout to a site with no extension

How will Divi handle the behavior, when a layout that contains a custom module will be exported to a site without a required extension being installed?

Zip Command Fails On WAMP Environments

I tried to get the SimpleHeader example to work though Xampp and I do not see a NEW module at all.

The first image is with yarn start....

Where can I view it in my browser??

This is what I see after doing Yarn Build.

Yet I still do not see a new module??

What am I do wrong while other people seem to have done it right??

Do I need more than just Xampp running at the same time?? I have yarn and nodejs installed,.

HELP!

UPDATE: This is what I see when I try yarn Zip...

Is this another looking for Wp-config.php file errors?? That would be in the htdocs directory for my windows 10 install of Xampp.

I am even including the includes directory here in a .zip file.

includes.zip

Any help here would be nice.

HMR Doesn't Work On Local By Flywheel Sites

Is this a bug report?

Followed the steps on Developer Documentation. starting yarn start and editing the name etc. No error showing when compiling. However, went to VB choose Simple Header and it shows function (t){return s.a.createElement(p.a,g({rawContentProcesser:_.a.replaceCodeContentEntities},e.props))}

Browser console also showing:

sample-page?et_fb=1:1471 GET http://local.divi-dev.site:3000/static/js/frontend-bundle.js?ver=1.0.0 net::ERR_EMPTY_RESPONSE
sample-page?et_fb=1:1474 GET http://local.divi-dev.site:3000/static/js/builder-bundle.js?ver=1.0.0 net::ERR_EMPTY_RESPONSE
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
react-dom.development.js?ver=16.2:16048 Download the React DevTools for a better development experience: https://fb.me/react-devtools
react.development.js?ver=16.2:336 Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.

any ideas?

Parent-Child Module issues in Visual Builder: How to insert stuff between renderings

Problem Description

1. In the settings panel of the VB, the child item titles are not shown
2. What is the VB equivalent of before_render / how to send information back from the child to the parent

I have a module where users can add multiple childs. Each child in PHP is not rendered. Instead I use before_render() to create a global array

public function before_render() {
    global $items;
    $items = array();
}

In each child I append the child to that array. I do this because in the parent I need to add HTML between each item.

I checked the module props and it seems that in the parent I could access child props by using

this.props.content[0].props.attrs.my_child_property

Is that the intended way when child items do not get rendered using {this.props.content}? This would mean my parents react component would also contain all the code for rendering the child, right?

Screenshot and/or gif

Backend Builder:

Visual Builder:

Javascript missing

after installing using npx create-divi-extension I immediately launching the commands npm start or yarn start: compilation everything ok but if I go to view Hello world module, I see in the console that the style.min.css files, frontend-bundle.min.js and builder.bundle.min.js are missing.

local.divi-dev.site url not working in environment

Problem Description

after installing the environment, the defatult IP address is the only url entry in the browser to access WP. On the front end, all links to files of any kind are ERR_CONNECTION_REFUSED. trying to access wp-admin produces "unreachable" browser error.

Steps To Reproduce

1. install environment on Windows 7

Screenshot and/or gif

Is there any round-tripping to get the module HTML from the server?

Is there any round-tripping to get the module HTML from the server?

I have a Divi Breadcrumb Plugin which I am trying to provide frontend builder support.

From whatever I have read, the frontend builder does not make any calls to the server to get the rendered HTML and its generated on-the-fly on the frontend?

If so, lets take the breadcrumb module.

It uses the current post's data to compute the breadcrumb links, title etc. This computation currently happens at the server-level as its linked to information about the current post.

How would I do that using the frontend builder?

I have others plugins

• Divi Faq Plugin which allows on to select FAQ categories. FAQ's belonging to those categories are rendered. Again a server-side function. How would I do that in frontend builder?
• Gravity Form Styles Plugins. In here we have module which injects a WordPress shortcodes. Attributes from the shortcode are collected using the Divi Module fields. How will that work on the frontend builder?
• Video Toolkit. In here we have video's managed using a custom post type. We have a module which displays a single video based on a POST item selected in the dropdown field. We also also a grid module based on the video categories selected. Again a backend function as the video data is derived from custom post and categories. We also have custom javascript rendered when these modules are rendered using wp_add_inline_script function. Ditto for inline styles. How will that work on the frontend builder?

Any dependacy on data coming from the database, css and js needed to added inline to the current page based on server-side computation make the frontend builder infeasible

Can you provide real-world examples addressing these issues?

The create-divi-extension is neat. However its more academic rather than practical. Divi plugin authors with existing divi modules will find it impractical to fit it in their existing codebase.

Alternatively, elegant themes would be better off educating using an existing plugin and then adding the pieces which adds functionality for the frontend builder.

This process needs to be frictionless which isn't the case right now.

Some of my grouses

• React JS builder dependancy is unwarranted. Optional round tripping module HTML server-side for a third party modules at marginal cost of speed should have been provided. React has a big learning curve. It will lead to developers abandoning the idea for creating frontend builder compatiblity for non-trivial plugins. Most plugins are non-trivial!
• With your use of reactjs, I need to create a react component whose HTML code would be exactly the same as php version. Thats duplication and a pain to manage.
• Custom renderer dependant module fields show up as plain text on the frontend builder.

create-divi-extension :: Child item HTML is malformed

Problem Description

I am writing an extension with the ability to add multiple child elements to the parent element. I noticed that the HTML output double wraps the child item in two sets of identical divs. This is also the case with the parent/child custom CTA from the divi-extension-example.

Screenshot and/or gif

In the second image, you can see that the divs with classes of 'dicm_cta_child_0' and 'et_pb_module_inner' class are repeated - with the second set nested inside the first. I wasn't aware that the child items would be wrapped this way at all. I can see it causing some problems with both CSS and DOM traversing in jQuery adding in items that are outside of what has been coded in the module.

Backward Compatibility Issue : shortcode_atts renamed to props. shortcode_atts function equivalent absent

Public property $shortcode_atts renamed to $props

ET_Builder_Element class has renamed shortcode_atts public property to props.

This is a breaking change. It broke one of my modules which extends Divi's Image module. Another module which extends Divi's Button module is broken too.

Ideally, the module should have supported shortcode_atts and should have been phased out in a timeframe.

Assuming I fix this and release this, how am I am supposed to maintain backward compatibility with users who are using divi versions lessor than 3.1.

There are quite a few third party divi modules. I am surprised how little thought has gone into this. This is a very high-handed approach. There is no mention of this in the changelog too?

Below is a screenshot or the same.

• Ditto issue for shortcode_atts() function
• Am sure there will be other things I'll discover as I move ahead.

Please bring back the deprecating code. Its hurting my business!

Regards
Ketan

yarn start - nothing happens (windows 10)

When I run yarn start, nothing happens. On my Mac it just worked fine but on my Windows 10 PC I don't see anything happen.

Any idea what might cause the issue or how to fix it?

Update: I just created another extension and there it starts as expected. Is my extension somehow corrupted? Is there a command to fix it? I'm sorry. I'm new to react, npm and yarn and don't know what to look for :(

Update 2: After searching for 3 days now I think I finally found out what I was doing wrong. I stored my extensions in my GoogleDrive and used symlinks to link them into my WordPress plugin directory. While on macOS that seems to be no big deal, it causes yarn start to fail on windows. Once I moved my extensions to the plugin directory instead of only creating a symlink (using mklink) it works. Sorry for wasting your time.

multiple tiny_mce control content problem

Hello,

How can i use background control and tiny_mce multiple times ?
What i have done :

1. i have put tiny_mce control in two toggle, when i try to get content of tiny_mce by using it's name but it shows blank and value shows in [content] variable. So how can i get value of both tiny_mce control.

2. I am trying to use background control multiple times like border controls but i am not able to do that. I am using this code and fonts are working properly but i am not able to use background multiple times ?
   $advanced_fields['fonts']['content'] = array(
   'label' => esc_html__( 'Content', 'mydivi-mydivi' ),
   'css' => array(
   'main' => "%%order_class%% .flipbox-content p",
   ),
   'toggle_slug' => 'fboxstyle',
   );

    $advanced_fields['fonts']['bbox'] = array(
    	'label'    => esc_html__( 'Title', 'mydivi-mydivi' ),
    	'css'      => array(
    		'main' => "%%order_class%% .front-icon-title",
    	),
    	'toggle_slug' => 'bboxstyle',
    );
   

$advanced_fields['background'] = array(
'css' => array(
'main' => "%%order_class%% .mycontent",
),
'options' => array(
'background_color' => array(
'default' => et_builder_accent_color(),
),
),
'settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'fboxstyle'
)
);
$advanced_fields['background']['bbox'] = array(
'css' => array(
'main' => "%%order_class%% .mycontent1",
),
'options' => array(
'background_color' => array(
'default' => et_builder_accent_color(),
),
),
'settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'fboxstyle'
)
);

add_classname to the main element in editor VB?

I was playing alright with add_classname with the divi-extension-example module

$this->add_classname( array(
	'this-is-the-class-i-want-to-add-on-vb',
) );

It does render out the css class main DIV on the frontend.

How do i add the class to the main DIV.

Thanks.

frontend.js and how does it work?

I editing the file frontend.js with

// This script is loaded both on the frontend page and in the Visual Builder.

jQuery(function($) {
	$('.simp_simple_header').css('background','black');
});

And it is working only on frontend page. Not the Visual Builder.
Is this related to the https://www.elegantthemes.com/documentation/developers/code-reference/divi-builder-javascript-api/ ?

Also, do you have an example on how this will work on the visual builder?

Get component state in "static css()"

Problem Description

My component needs data from the backend to render. I make a call via Ajax and save the data in the components state. One part of the state is used to determine if I need to add certain css. The sample code suggests that the VB equivalent of

ET_Builder_Element::set_style($render_slug, array(
    'selector' => '%%order_class%%',
    'declaration' => 'color: red;',
));

would be the following call in a static css(props) function:

const additionalCss = [];
additionalCss.push([{
    selector: '%%order_class%%',
    declaration: "color: red;",
}]);
return additionalCss;

The props of the component are supplied as argument but since the function is static there is no access to the state.

Would it be possible to have a static css(props, state) function or is it necessary to go the route of adding inline styles to the component during rendering? This can be quiet tedious and the React docs suggest using classes whenever possible. But if you have a color for example (or lets say 8 color fields), you can't use classes and have to add a lot of inline styles. Also you don't get the nice separation between html and css like you get for css based on props.

style.css works only in Editor

Problem Description

I've added some styles to style.css. it works well in editor mode, but when page is opened without editor styles are not applied.

Maybe I should include them some way?

yarn start - Unable to locate wp-config.php! (Multisite)

I'm trying to get started using WordPress Multisite installation and see this error:

Is this tool compatible with Multisite?

Improvement Suggestion: Visibility based on array

Back in 3.0, you could use depends_show_if only with single values while depends_show_if_not accepted an array. I just gave it a test and apparently show_if now supports arrays as well. So this is what you learn from the docs (https://www.elegantthemes.com/documentation/developers/divi-module/settings-field-visibility/)

$fields['test'] = [
    'label' => 'test',
'type' => 'text',
'toggle_slug' => 'main_content',
'show_if' => [
    'other' => 'some-value'
],
];

but this also seems to work just fine:

$fields['test'] = [
    'label' => 'test',
'type' => 'text',
'toggle_slug' => 'main_content',
'show_if' => [
    'other' => [ 'some-value', 'some-other-value' ],
],
];

The last question I now have is how the conditions are put together. Are they all concatenated with an AND? e. g. how does this turn out:

'show_if' => [
    'a' => ['1', '2'],
    'b' => ['x', 'y'],
],
'show_if_not' => [
    'c' => ['$', '€'],
    'd' => ['_', '-'],
]

If I understand it correctly, the setting would not show if

• a is something other than 1 or 2
• b is something other than x or y
• c is $ or €
• d is _ or -

So all conditions must be met in order for the setting to show up, right? Maybe we can put some more complex examples in the documentation to make it easier for beginners to understand.

Complex display conditions to show or hide module settings

I'd like to suggest a improvement on how to determine if a module setting should be shown or not. I believe that currently show_if and show_if_not conditions are all combined using AND operators. Sometimes I encounter situations in which this alone is not enough to properly show and hide my settings so I either have to show settings always, cluttering my module and having settings visible which have no effect in certain configuration (confusing users) or I have to implement the same setting multiple times - and then it could happen that two of them are shown at the same time.

Instead it would be great to have a proper condition evaluation. I saw this in Elementor and found it very convenient to use and it can achieve great results. They have a "conditions" field in the setting which can look like this:

'conditions' => [
    'relation' => 'and',
    'terms' => [
        [
            'name' => 'c',
            'operator' => '==',
            'value' => 'on',
        ],
        [
            'relation' => 'or',
            'terms' => [
                [
                    'name' => 'a',
                    'operator' => 'in',
                    'value' => ['default', 'on'],
                ],
                [
                    'relation' => 'and',
                    'terms' => [
                        [
                            'name' => 'a',
                            'operator' => '==',
                            'value' => 'on',
                        ],
                        [
                            'name' => 'b',
                            'operator' => '!==',
                            'value' => 'on',
                        ],
                    ],
                ],
            ],
        ],
    ],
],

As you see, you have the conditions field which points to a dictionary. The dictionary has an optional relation field (which is AND by default when not set), an a terms field which points to an array of conditions. Each condition has the name field (which is the setting), the operator (e. g. <,<=,>,>=,==,!==,in) and value (which is either a single value or an array of values). Besides that, each entry in the terms array can be another conditions field.

I'm not sure how complicated it would be to implement this but it would be a great improvement and help to keep module settings clean.

How to use a custom renderer with the Visual Builder?

My custom renderer is working with the Standard Builder. But with the Visual Builder I'm getting 'The above custom field is not fully supported and has been rendered as a standard input.'

Any documentation on how to use a custom renderer with the Visual Builder?

Filter "wp_insert_post_data" causes Visual Builder saving to fail

Problem Description

I have a module in which the user can select a post id. I don't want to allow selection of the current post but "get_the_ID" does not return the current post in add_fields() so I implemented the filter wp_insert_post_data. In the callback I use regex to look for the post_id and remove it if it matches the current post like so:

add_filter( 'wp_insert_post_data', 'dss_sanitizy_post', 10, 2 ); 
function dss_sanitizy_post( $data, $postarr ) {
    $post_id = $postarr['ID'];	
    $search  = "\[dss_library_layout([^\]]*)post_id=." . $post_id . ".([^\]]*)\]";
    $replace = "\[dss_library_layout$1$2\]";
    $data['post_content'] = preg_replace($search, $replace, $data['post_content'] );
    return $data;
}

When I now save in the VB, I get this error:

`
An error has occurred while saving your page. Various problems can cause a save to fail, such as a lack of server resources, firewall blockages, plugin conflicts or server misconfiguration. You can try saving again by clicking Try Again, or you can download a backup of your unsaved page by clicking Download Backup. Backups can be restored using the portability system while next editing your page.

Contacting your host and asking them to increase the following PHP variables may help: memory_limit, max_execution_time, upload_max_filesize, post_max_size, max_input_time, max_input_vars. In addition, auditing your firewall error log (such as ModSecurity) may reveal false positives that are preventing saves from completing.

Lastly, it is recommended that you temporarily disable all WordPress plugins and browser extensions and try to save again to determine if something is causing a conflict.
`

Dreamweaver CC on Mac / PC

I am a Dreamweaver User for all my development. I go back and forth between a PC and a Mac and would like to know what is needed to create Divi Modules using Dreamweaver...? Or is this strictly for other IDE's?

multiple background control use problem

I am trying to use background control multiple times like border controls but i am not able to do that. I am using this code and fonts are working properly but i am not able to use background multiple times ?
$advanced_fields['fonts']['content'] = array(
'label' => esc_html__( 'Content', 'mydivi-mydivi' ),
'css' => array(
'main' => "%%order_class%% .flipbox-content p",
),
'toggle_slug' => 'fboxstyle',
);

$advanced_fields['fonts']['bbox'] = array(
'label' => esc_html__( 'Title', 'mydivi-mydivi' ),
'css' => array(
'main' => "%%order_class%% .front-icon-title",
),
'toggle_slug' => 'bboxstyle',
);
$advanced_fields['background'] = array(
'css' => array(
'main' => "%%order_class%% .mycontent",
),
'options' => array(
'background_color' => array(
'default' => et_builder_accent_color(),
),
),
'settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'fboxstyle'
)
);
$advanced_fields['background']['bbox'] = array(
'css' => array(
'main' => "%%order_class%% .mycontent1",
),
'options' => array(
'background_color' => array(
'default' => et_builder_accent_color(),
),
),
'settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'fboxstyle'
)
);

Wrong URL in compatibility warning

The compatibility warning links to the url

https://www.elegantthemes.com/documentation/developer/divi-builder-module-in-depth-levels-of-compatibility

but should probably link to

https://www.elegantthemes.com/documentation/developers/divi-module/compatibility-levels/

yarn zip error on Flywheel Local

Problem Description

When using yarn commands from command line on Windows 10 / Flywheel Local install -
yarn start, yarn build both work, yarn zip fails with "error Command failed with exit code 1." Ran the same command on two install twice and same error.

npm run zip doesn't seem to work either. throws the following errors:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] zip: divi-scripts build && divi-scripts zip
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] zip script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Steps To Reproduce

1. npx create-divi-extension my-extension
2. yarn start
3. yarn zip

Screenshot and/or gif

Several modules / one extension

What is the best practice - to make one custom module per extension or one extension can contain several custom modules?

docker-compose failing on cmd

Of course I want to use the "official docker image for Divi Development" but I'm poor and still use windows7. I've done all of the pre-requisite installs, system check, etc., but my yml seems to be not of a windows type.

docker-compose fails with:

ERROR: Named volume "PWD:/workspace/wordpress:rw" is used in service "wordpress" but no declaration was found in the volumes section.

I've used the suggested yml but the ${PWD} is apparently not being interpreted. Should the line:

  - '${PWD}:/workspace/wordpress'

be something else?

Problem with child module

I'm trying to have a parent / child module, with some items that are supposed to be between

...

It was working with no problem up to Divi 3.0.106.

But with Divi 3.1.1, it adds some extra unnecessary divs

It looks like it's because it's calling _render_module_wrapper, because it's not an official module : ! $this->_is_official_module

Is there some way to setup a variable so _render_module_wrapper is not called on a child module?

Where are the module credits shown?

I'm looking around for quiet a while now but I cant find where the $module_credits are used. Can you please clarify? 😁

How to maintain backward compatibility of third-party modules slug.

Hi, I am working on rewrite one of my divi custom modules from scratch and I have been able to start adding the modules but I have one issue if I use the old slug of my modules:

static slug = 'et_pb_dp_oc';

That as was required in the past need to start with the prefix et_pb, but then I can't see the render of the module in the Visual Builder. But as soon as I change the module slug then everything works as should be.

My question is if this is an issue or not. And if is not how I can maintain backward compatibility for my modules and at the same time use the divi extension to get full visual builder support. I hope that have sense, maybe I just doing something wrong.

Thank you in advance.

How to get the actual value of multiple_checkbox field type

Hello.
Just a simple question. Can be a possibility to use a multiple_checkbox field type and get the actual values of the checked checkbox instead of a string like on||on|on|on|.
I am getting the values from a query and assign to the multiple_checkbox field on the options parameter. Is there any other field type that I can use for this purpose?
Thanks,

Missing Documentation

Why is there no documentation for post based modules and child level modules?

How do I integrate divi-scripts npm package in my boilerplate?

This utility provides a boilerplate to create a new plugin.

I have my own boilerplate to create plugins. Also I have existing divi addon plugins which needs
frontend builder compatibility.

Do you have specific steps or process which shows how to setup things (using the divi-script npm package and in general) so that I can continue working using my workflows?

Thanks

Module not found: You attempted to import ../../../../../../../wp-admin/images/wpspin_light-2x.gif which falls outside of the project src/ directory

I want to use Freemius (freemius.com) to sell my plugin and the SDK contains a CSS file under /assets/css/admin/common.css which contains this property:

background:url("../../../../../../../wp-admin/images/wpspin_light-2x.gif");

When I try to run yarn start I get the following error message:

Failed to compile.    
./includes/freemius/assets/css/admin/common.css
Module not found: You attempted to import ../../../../../../../wp-admin/images/wpspin_light-2x.gif which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

I placed the Freemius SDK under my-extension/includes/freemius.

How to access the current post $post object in "computed" field type callback?

I have a custom module with a computed field, as far as I understand, computed fields render their content in the visual builder using ajax by calling the "computed_callback" method, see Divi built-in Blog module for reference.

The issue I'm facing right now is that I NEED the current post's - where the module is used - $post but it always returns null, other functions also are not working like get_the_ID(), $GLOBALS['post'] and pretty must any function that needs the current post ID as a parameter.

This is because the "computed_callback" method is being called in admin-ajax.php without passing the current post id or something.

• Is there a way to get that $post object?

• I couldn't find any documentation about the computed fields, so please update the documentation.

Win10 Pro :: Container for Service WordPress :: invalid volume specification

Is this a bug report?

Yes

Did you try recovering your dependencies?

Have not reached the point of being able to recover dependencies.

Which terms did you search for in User Guide?

The README.md does not contain troubleshooting regarding running the divi-dev package on docker.

Environment

1. node -v: n/a
2. npm -v: n/a
3. yarn --version (if you use Yarn): n/a
4. npm ls react-scripts (if you haven’t ejected): n/a

Then, specify:

1. Operating system: Windows 10 Pro Build 16299.371 Fall Creators Update
2. Browser and version (if relevant): n/a

Steps to Reproduce

(Write your steps here:)

1. I am following instructions at https://www.elegantthemes.com/documentation/developers/divi-development-environment/
2. Docker installed and running properly
3. Created docker-compose.yml as specified in the instructions
4. Using Powershell. Since '&&' is not a valid statement operator in Windows Powershell, I ran the first command by itself as such: docker-compose up -d

Expected Behavior

I expected that all packages required to get a development environment would be set up and ready to use, then I was going to run the second docker-compose command.

Actual Behavior

This is the text of the result: Note that I am using a folder under /users/ as specified in the instructions on a Windows machine.
PS C:\users\terry\docker> docker-compose up -d
WARNING: The PWD variable is not set. Defaulting to a blank string.
Creating network "docker_default" with the default driver
Creating volume "docker_database" with default driver
Pulling wordpress (elegantthemes/divi-dev:latest)...
latest: Pulling from elegantthemes/divi-dev
c3b9c0688e3b: Pull complete
e9fb5affebb0: Pull complete
0f1378f511ad: Pull complete
96a961dc7843: Pull complete
16564141bc83: Pull complete
724e678ab34e: Pull complete
babef1eb7436: Pull complete
053e50a05e95: Pull complete
afa6ca93bcaa: Pull complete
c403799400eb: Pull complete
d925564d019e: Pull complete
28a79d3f0370: Pull complete
Digest: sha256:625c5bc769f9773a319ecb40e955c54fc8fbec5dceb0799fa94089438048b804
Status: Downloaded newer image for elegantthemes/divi-dev:latest
Pulling mariadb (mariadb:10.2.14)...
10.2.14: Pulling from library/mariadb
f2b6b4884fc8: Pull complete
26d8bdca4f3e: Pull complete
74f09e820cce: Pull complete
5390f1fe4554: Pull complete
3d3f1706a741: Pull complete
2942f66426ea: Pull complete
97ee11d39c75: Pull complete
590c46ef722b: Pull complete
32eb4b9666e5: Pull complete
fc883f98a064: Pull complete
bb8bee61bc1e: Pull complete
Digest: sha256:6135f5b851e7fe263dcf0edf3480cdab1ab28c4287e867c5d83fbe967412ea14
Status: Downloaded newer image for mariadb:10.2.14
Creating docker_wordpress_1 ... error

ERROR: for docker_wordpress_1 Cannot create container for service wordpress: invalid volume specification: '/host_mnt/workspace/wordpress:rw'

ERROR: for wordpress Cannot create container for service wordpress: invalid volume specification: '/host_mnt/workspace/wordpress:rw'
ERROR: Encountered errors while bringing up the project.

Reproducible Demo

I tried uninstalling Docker and trying again with a fresh install. I don't know how to describe something that can be reproduced since I'm not actually trying to create an extension yet.

Missing props when component is mounted

Problem Description

I have a select dropdown field where the first entry in the option list is also the default. When my component is mounted I need to make a Ajax call to load data from the backend. When I access the value of the select (via this.props.my_field), the value is "undefined". If any other value from the list is selected, this does not happen. Only if the selected value is the first/default value.

There are workarounds like providing a default value in the Ajax call or using the defaultProps of the component (which is better as I also need to check the value in render()) but this should not be the proper solution as the default is defined in the modules php class and now I need to keep track and match defaults in two locations.

"yarn zip" whipes admin css and css of third party library

Problem Description

After running yarn zip and uploading the resulting plugin zip file to a test site, I noticed that any admin related CSS is missing as well as from my own css files as also from those of third party libraries (e. g. the Freemius SDK).

Steps To Reproduce

1. Add a admin.css file
2. Enqueue the css file as usual and add some stuff
3. run yarn zip

Screenshot and/or gif

Before:

After:

Customize existing module

With Divi 3.1 now, do we have a proper way to customize existing modules or is it a bad practice?

3rd party modules that support specific post type render on other post types too

Is this a bug report?

Yes!

Details:

1- I'm talking about modules with $this->post_types = array( 'X_post_type' );
2- Let's say you have two post types X and Y
3- When you edit a post from Y, the module must NOT render in the builder.
4- The issue: If you have a saved layout in the library that contains that module, and you import this layout in a post from type Y, the module renders in BOTH back-end and front-end.

5- This issue started with Divi 3.1, it didn't happen before.

6- In Divi before 3.1, if you import the layout in post type Y and that layout has a module that only supports post type X, it will NOT render in the back-end nor the front-end.

7- This screenshot shows the difference between Divi 3.1 and older
https://test.abdozo.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-23-at-7.21.44-PM.png

Steps to Reproduce

Steps above.

Expected Behavior

A module that supports specific post should NOT be rendered on another post type, front-end and back-end.

And if a "saved layout" has that module and imported to a different post type, that module must be removed from the content just like before.

Note

I opened a support ticket in Elegant Themes forums but the support agent asked to open an issue here.

Custom module icon only used in VB

Problem Description

Adding a custom svg for a module icon works in the Visual Builder but the BB still shows the default font icon, is there a way to add it to both?

Steps To Reproduce

        $this->icon_path        =  plugin_dir_path( __FILE__ ) . 'icon.svg';

Bug in 'number' type and 'text' type field with number validation

Problem Description

Not sure if there is any intention to make this work properly but in the old days, there was a number type field and also there is a number_validation option on text fields but neither of them seem to work at all in the Visual Builder and even on the backend side there are a few problems.

The settings I found in the core looked promising:

'number_validation' => true,
'value_type'        => 'int', //or 'float'
'value_min'         => 0,
'value_max'         => 100,
'default_on_front'  => '0',

When used, they have no effect though. Furthermore if 'number_validation' is turned on, you can only enter number of 0-100 in the BB and in the VB you can still enter characters.

I'd love to see a proper number field. Currently I mostly rely on range fields to enter numbers but this is not always a good solution. For example I have a number counter module and the user can enter any number but also letters as the field is a textfield.

Sure, I sanitize the field in my code but it would be more convenient if a user couldn't enter letters at all. A number field or a option on text fields to make sure the entered number is actually a number (int or float) would be great and it would be even better if it worked in the VB as well.

The problem with the range field is, that it is not obvious for the user that he can enter any number if desired, even if it's outside of the range of the slider. I'd really like to see a setting like this:

'a_number'   => array(
    'label'           => esc_html__( 'A number', 'et_builder' ),
    'description'     => esc_html__( 'Enter a number or leave empty to use the default value of 125', 'et_builder' ),
    'type'            => 'number',
    'default'         => 125,
    'value_type'      => 'int', //or 'float'
    'step'            => 25, //or 132.2
    'option_category' => 'basic_option',
    'toggle_slug'     => 'main_content',
),

Implementation shouldn't be to hard I believe. Its basically a range field but without the slider. I hope you understand what I mean. :)

Hooks to add custom tutorial videos and custom controls

Is there any intention to let us add video tutorials via hooks or is there a best practice to add support content to our modules? A while ago I played with the ability to add custom tabs to my modules and create a custom control to only display some html - which brings me to the next question: how to add custom controls? I know how to hack something together to add custom controls to the backend builder but I'm not sure that this will work on the VB so are there any best practices as well?

Range control auto add px on using arrow keys

Hello, I am using range control and it was working perfect before update but when i theme and plugin i get the issue of changing number by arrow keys. It add px automaticly to numbers and it also don't validate the max value. If i use slider then it works fine.

'list_divider_weight' => array(
'label' => esc_html__('Weight', 'bpd-booster-pack-divi'),
'type' => 'range',
'default' => '1',
'range_settings' =>array(
'min' => '0',
'max' => '20',
'step' => '1',
),
'option_category' => 'basic_option',
'description' => esc_html__('Divider Weight.', 'bpd-booster-pack-divi'),
'tab_slug' => 'advanced',
'toggle_slug' => 'list_style',
'show_if' => array(
'list_divider' => 'on',
),
),

Kindly update me regarding the issue.

example with this.props.attrs?

An example with this.props.attrs would be awesome.
How are you using the WP object with JSX?
Are you using propTypes? If yes how?

Two Modules Within Same Extension

Problem Description

When I add a second module under the [extension name]/includes/modules, the second module loaded from within VB doesn't display fields defined in the get_fields function. The second module is present in VB, just the properties in get_fields are not displayed.

I've played around with this a little bit and noticed it isn't class specific, rather only the first class loaded from the loader gets the additional needed custom fields. The second classes fields never get displayed from within the builder.

I'm not sure where to go from here, wondering if anyone else has experienced this?

Steps To Reproduce

Screenshot and/or gif

Module Text

How to remove the "Module Text" section in Design, it seems to be added by default.

Why must module folders match class file names?

When generating extensions, by default create-divi-extension creates a loader.php which forces you to use the very same name for your module folder as well as for the module class php file itself. Maybe the documentation could make it clearer that these names must match or maybe the requirement for matching names can be removed all together.

I wonder why the folder name has to match in the first place. Maybe you can explain it to me? :) At first I thought that I would use the folder inside the modules to logically group multiple divi modules which belong together. E. g. a structure like:

/modules/ACF_Modules/Textmodule.php
/modules/ACF_Modules/Imagemodule.php
/modules/Toolset_Modules/Textmodule.php
/modules/Toolset_Modules/Imagemodule.php

How to use CSS controls in editor mode ?

Hi

I am a developer and working on creating a custom widget based on the API documentation you have released recently.

I really love the way you guys have added the ability to create custom widgets.
I have partially succeeded in this.

What I have done so far:

• Created a divi extension using the command line.
• Added my own widget in it. (it is displaying fine in the widget list. )
• Added some controls like text and tinymce and they are working fine in visual builder as well as on frontend.
  And have also added the jsx file.
• Now I have added some CSS control like text color, font etc. They are working fine on the frontend.
• From here my issue starts, it is not reflecting when I am in editor mode. I am sure that some additional step is required to make CSS controls work in visual editor but sample Hello World example doesn't include any css control so I am not getting any clue regarding this.
  Can you give me some idea about this or update your Hello World example to show how to use CSS controls in a widget?