WWB11 upgrade information
Posted: Wed Jan 27, 2016 2:18 pm
WYSIWYG Web Builder 11 has more than 150 new features and thousands of new options.
http://www.wysiwygwebbuilder.com/new_features.html
When implementing new features or moving to newer technologies it's not always possible to keep existing features working exactly the same way as they did in older versions.
Some underlying components or code may have become obsolete or has been replaced by other (more modern) technologies.
We do not always have control over this. But we want to keep up with the latest HTML standards and be as 'future proof' as possible.
Here is a list of changes that you should be aware of:
YouTube
- Removed colors, theme and version. These options are no longer supported by YouTube.
Menubar
- Removed support for external themes create with Theme Studio. This option was used very rarely and ThemeStudio is no longer maintained or supported by its creator.
All menubar templates are now fully customisable with the built-in menu editor.
If you have created custom themes then you will need to duplicate the style with built-in menu editor.
HTML/JavaScript/CSS formatting options
WYSIWYG Web Builder has several new options to format the generated code.
http://wysiwygwebbuilder.com/forum/view ... 10#p348843
Although the new formatting options work with most code, your code may not support compression or cannot be moved to the end of the page.
Make sure you test all your code before publishing with the new settings!
Tip: if you have a script that should not be moved then change the case of the script tag from <script> to <SCRIPT>. In that case Web Builder will ignore the code.
Photo Gallery
The old version of the built-in Photo Gallery was designed almost 10 years ago and was based on HTML tables. The gallery only supported fixed layout.
This made it almost impossible to use it in a responsive website and difficult to maintain or add new features.
In WYSIWYG Web Builder 11 the Photo Gallery has been redesigned using CSS. This makes it responsive, flexible and future proof.
See this related tutorial for an overview of some of the new features:
http://www.wysiwygwebbuilder.com/photogallery.html
We have tried to keep the Photo Gallery backwards compatible as close as possible, but because we are now using CSS, some layouts are no longer possible without adjusting your images.
Example
Consider the following layout in previous version:
If you create the same gallery in WB11 it will look like this:
We have added a compatibility option for those users that do not wish use the new responsive features. The 'compatible' mode simulates the gallery from previous WWB versions (not responsive and HTML table layout). When you load projects created with a previous WWB versions then all Photo Galleries will automatically be set to 'compatible'.
IMPORTANT NOTE: If you select 'Compatible' then new gallery features like responsive columns, descriptions, bootstrap frames are not available because they did not exist in older versions!
jQuery UI
We have upgraded to a newer version of jQuery UI. All internal jQuery UI widgets have been redesigned to make use of the new API.
This also affects jQuery UI themes. If you have created your own theme(s) then you need to regenerate the theme so it will be converted to the new format:
1) Open the jQuery UI Theme Manager
2) Select your the theme and click 'Edit'
3) Click 'Save'
Also in previous versions of WYSIWYG Web Builder you set the border radius in the Theme Manager. Now most jQuery UI objects have their own border-radius so you can set the radius for individual objects. For most objects this option is in the 'Style' section of the object's properties.
Unfortunately due to a redesign of the jQuery Menu (by the jQuery team) it no longer support border-radius. Please note this beyond our control.
For the full list of changes to jQuery UI please go to:
http://jqueryui.com/upgrade-guide/1.11/
Line spacing in styles
If you were using line spacing in styles (Style Manager) in WB10 then this forced the option 'Include <div> with position' for the text object. This usually resulted in 'dirty' and non-responsive code.
In WB11 the option 'Include <div> with position' is no longer forced.
In WB11 you have to do the following:
1. Enable 'Include <div> with position' in the text properties (to get the same result as in WB10)
OR
2. Add 'line-height: 1.5' (where 1.5 is the value of the line spacing) in the 'Custom styles' properties of the style. In that case 'line-spacing' will be used for the workspace and the line-height for the published text. The result will be much cleaner (and responsive) code.
Indent
In previous versions of WWB using indent automatically set the output format of the text to 'Use <div> with position for each line'. However this option makes the text non-responsive, because it forces the text to have a fixed width.
Text using indent cannot be used in responsive layouts. For this reason this option is no longer active automatically in WB11. You will need to select it yourself.
Bookmark
The Bookmark object no longer has a 'Name' property. This property is not supported in HTML5 (http://www.w3schools.com/tags/att_a_name.asp).
In WWB11 the 'ID' property should be used to identify the bookmark. Older projects will automatically be upgraded.
Other
If you experience different behavior of features compared to older versions of the software then first check the help. Most features have been well documented in the help.
Important:
If you are updating an existing website then make sure that you republish all files.
Many scripts and other assets have been updated, so to make sure all old files on the server will be overwritten by the new versions!
http://www.wysiwygwebbuilder.com/new_features.html
When implementing new features or moving to newer technologies it's not always possible to keep existing features working exactly the same way as they did in older versions.
Some underlying components or code may have become obsolete or has been replaced by other (more modern) technologies.
We do not always have control over this. But we want to keep up with the latest HTML standards and be as 'future proof' as possible.
Here is a list of changes that you should be aware of:
YouTube
- Removed colors, theme and version. These options are no longer supported by YouTube.
Menubar
- Removed support for external themes create with Theme Studio. This option was used very rarely and ThemeStudio is no longer maintained or supported by its creator.
All menubar templates are now fully customisable with the built-in menu editor.
If you have created custom themes then you will need to duplicate the style with built-in menu editor.
HTML/JavaScript/CSS formatting options
WYSIWYG Web Builder has several new options to format the generated code.
http://wysiwygwebbuilder.com/forum/view ... 10#p348843
Although the new formatting options work with most code, your code may not support compression or cannot be moved to the end of the page.
Make sure you test all your code before publishing with the new settings!
Tip: if you have a script that should not be moved then change the case of the script tag from <script> to <SCRIPT>. In that case Web Builder will ignore the code.
Photo Gallery
The old version of the built-in Photo Gallery was designed almost 10 years ago and was based on HTML tables. The gallery only supported fixed layout.
This made it almost impossible to use it in a responsive website and difficult to maintain or add new features.
In WYSIWYG Web Builder 11 the Photo Gallery has been redesigned using CSS. This makes it responsive, flexible and future proof.
See this related tutorial for an overview of some of the new features:
http://www.wysiwygwebbuilder.com/photogallery.html
We have tried to keep the Photo Gallery backwards compatible as close as possible, but because we are now using CSS, some layouts are no longer possible without adjusting your images.
Example
Consider the following layout in previous version:
If you create the same gallery in WB11 it will look like this:
We have added a compatibility option for those users that do not wish use the new responsive features. The 'compatible' mode simulates the gallery from previous WWB versions (not responsive and HTML table layout). When you load projects created with a previous WWB versions then all Photo Galleries will automatically be set to 'compatible'.
IMPORTANT NOTE: If you select 'Compatible' then new gallery features like responsive columns, descriptions, bootstrap frames are not available because they did not exist in older versions!
jQuery UI
We have upgraded to a newer version of jQuery UI. All internal jQuery UI widgets have been redesigned to make use of the new API.
This also affects jQuery UI themes. If you have created your own theme(s) then you need to regenerate the theme so it will be converted to the new format:
1) Open the jQuery UI Theme Manager
2) Select your the theme and click 'Edit'
3) Click 'Save'
Also in previous versions of WYSIWYG Web Builder you set the border radius in the Theme Manager. Now most jQuery UI objects have their own border-radius so you can set the radius for individual objects. For most objects this option is in the 'Style' section of the object's properties.
Unfortunately due to a redesign of the jQuery Menu (by the jQuery team) it no longer support border-radius. Please note this beyond our control.
For the full list of changes to jQuery UI please go to:
http://jqueryui.com/upgrade-guide/1.11/
Line spacing in styles
If you were using line spacing in styles (Style Manager) in WB10 then this forced the option 'Include <div> with position' for the text object. This usually resulted in 'dirty' and non-responsive code.
In WB11 the option 'Include <div> with position' is no longer forced.
In WB11 you have to do the following:
1. Enable 'Include <div> with position' in the text properties (to get the same result as in WB10)
OR
2. Add 'line-height: 1.5' (where 1.5 is the value of the line spacing) in the 'Custom styles' properties of the style. In that case 'line-spacing' will be used for the workspace and the line-height for the published text. The result will be much cleaner (and responsive) code.
Indent
In previous versions of WWB using indent automatically set the output format of the text to 'Use <div> with position for each line'. However this option makes the text non-responsive, because it forces the text to have a fixed width.
Text using indent cannot be used in responsive layouts. For this reason this option is no longer active automatically in WB11. You will need to select it yourself.
Bookmark
The Bookmark object no longer has a 'Name' property. This property is not supported in HTML5 (http://www.w3schools.com/tags/att_a_name.asp).
In WWB11 the 'ID' property should be used to identify the bookmark. Older projects will automatically be upgraded.
Other
If you experience different behavior of features compared to older versions of the software then first check the help. Most features have been well documented in the help.
Important:
If you are updating an existing website then make sure that you republish all files.
Many scripts and other assets have been updated, so to make sure all old files on the server will be overwritten by the new versions!