“Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).”
The tool is developed by KIPROTECT and can be found on Github.
As I integrated Klaro on a couple of websites so far, I decided to make my work a bit easier and start building some basic clean themes for it.
I have a basic white and black&white theme so far. The download includes a testdrive folder, to showcase the themes. The white theme is also used on this website ;)
I really hate those standard consent management modals, that integrate badly into the website native design.
Klaro does a good job allowing to override its core theme and makes it a bit more pleasant. We do have to live with those modals from now on ;)
The themes are Sass-based and provide easy configuration options.
Enjoy!
cubicFUSION Themes for Klaro! @ Github
Klaro is still missing some things, will collect some workarounds here for you to play with.
Updates: Github Discussion
– 0.7.10 also adds custom callbacks to services (onAccept, onDecline, onInit) NICE!
Used a simple MutationObserver to do some magic for now, without diving into the core Klaro code for now. I am sure they already have an event listener or watcher setup.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var cm_event = document.createEvent('Event'); cm_event.initEvent('consentModalOpen', true, true); document.addEventListener('consentModalOpen', function (e) { console.log("consentModalOpen") }, false); document.addEventListener("DOMContentLoaded", function(e) { var cm_target = document.getElementById( "klaro" ), cm_visible = false; var observer = new MutationObserver(function(mutationRecords) { if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){ cm_visible = true; document.dispatchEvent(cm_event); }else{ cm_visible = false; } }); observer.observe(cm_target, { childList: true, subtree: true, characterDataOldValue: true }); }); |
Custom theme and integration for a coaching website.
Update 2020: Global cleanup / tweaks
I designed a fresh set of business cards for Willen Logistics last year, this is a small iteration with a QR-Code on the back. The business cards feature a partial varnish on the logo and QR-Code.
I updated their different logos last year, to streamline their main corporate colors.
“Seit mehr als 50 Jahren ist die Spedition Willen ein zuverlässiger Partner ihrer Kunden im In- und Ausland. Was in den 1950er Jahren als klassischer Transportbetrieb mit eigenem Fuhrpark begann, hat sich im Laufe der letzten Jahrzehnte zu einem Unternehmen mit großem Leistungsspektrum entwickelt.
Neben der Lagerung wurde die Produktion und Vermietung von Metalltrommeln ein wichtiges Standbein. Dadurch wurden dann auch kundenindividuelle Logistikkonzepte entwickelt und logistische Dienstleistungen vermehrt angeboten.” – Löningen, Niedersachsen
Willen Logistics GmbH
Willen Transport GmbH
Lernkarten.de – Offers specialized learning tools for the German certified master of trade/commerce exam (Handelsfachwirt Prüfung IHK). This includes printed learning materials and an App for Android / iOS. The website also provides updated information about changes in the curriculum and new requirements.
Admin Enhancer is the first free plugin released under the cubicFUSION brand. The plugin is still work in progress, but a tool that is already used within some of my client projects. I am using this plugin to centralise things I love & need, when sending out a finished website or project.
NEW: DASHBOARD GUTENBERG / DASHBOARD TEMPLATES
NEW: ADMIN TOOLBAR
UPDATE: SHORTCODES
This version includes a new addon “GUTENBERG DASHBOARD“, that allows you to build a White-Label Admin Dashboards using the Gutenberg Editor.
It integrates with the SHORTCODES addon and allows to drop in the dashboard widgets via its own Gutenberg Block.
The Block provides settings to overwrite CSS from the admin widgets, allowing you tweak them a bit — for better visual integration. The Dashboard template itself can be tweaked using CSS and Sass via SCSS now 😉
I am also releasing the first integration of the “ADMIN TOOLBAR” addon, which allows you to tweak some of the admin toolbar and footer options (Hide WP Logo, Hide Toolbar on Frontend, Hide Menu Items ..)
Already working on 0.3 … ENJOY!
vibronet® is a passion project of mine, as the company belongs to my family. My sister, Sylvia, runs the company together with my parents.
The core website had not been updated for the past 8 years. It was really time for a complete rewrite and redesign :)
Ii does not only feel like a quantum jump, it actually was one technology-wise ;)
The website offers complete access to the current product portfolio in 3 languages (English, French, German).
All has been done in-house, with a complete cleanup of all product details.
We have some nice additional updates planned for the future!
“vibronet® stands for innovative high quality products for food and feed made in Germany.
With its patented vibration damping system and complementary online control systems, vibronet® has been a pioneer in the field of research and advanced technologies for dramatically reduced temper times and simplified production processes since 1992.
Based in the heart Germany, the vibronet® name stands for competence and product diversity made for millers and cereal processors all around the world.”
Sylvia-C. Gräf CEO
A customer asked for a simple text based logo. I delivered 5 vector-based variations and a favicon.
While Gutenberg is becoming more stable with each release, documentation is only growing slowly. Many parts are outdated, superficial or completely undocumented.
For more complex or individual requirements you have to dive deep. Gladly the browser console allows you to easily checkout what is driving the editor.
Open your browser developer console and start exploring wp. / wp.data. / wp.api. .
What each function does, can be read in the Block Editor Handbook.
At this stage of the development, many things are still changing. So using the API direcly is mostly a matter of reading the documentation, checking the implementation within the core codebase and using trial & error.
Some mysteries have already been solved by others or they provide the right lead. Check Stack Overflow and especially the WordPress Development area for solutions.
Its still like a treasure hunt most of the time LOL Perfect for those that love to solve puzzles :)
Just my cup of tea or better coffee!
It surely is a benefit, as the whole Gutenberg Editor is build upon React. But for simple tweaks its not a must. But once you start going deeper, you will see the benefit and will learn to love React yourself.
ECMAScript 6 is also known as ES6 and ECMAScript 2015.
ES5 is on its way out and ES6 is supported on all modern browsers since end of 2016.
Older browsers can be supported using a polyfill, that augments those browsers and allows them to use the new ES6 features.
React and also Gutenberg builds on the new Javascript functionality, but ES5 examples can also be found.
You can also easily compile ES6 to ES5 using Babel in your development environment or online.
I will be using the following sections to highlight some things that puzzled me and might help others to get a grip on things. I will be extending this, as I discover or solve more Gutenberg mysteries :)
I will keep the example code in ES5 for now, as that is the easiest way to start tinkering. I will also focus on things that can be used from external code. Most of the small code snippets are connected to each other.
These little code snippets are all connected and showcase how to retrieve a selection from a block and change or remove a text format.
Make sure the editor has loaded and the DOM can be accessed.
|
1 2 3 |
wp.domReady(function() { // Your code here }); |
|
1 2 3 4 |
wp.data.select('core/block-editor').getSelectedBlock(); // Block ID - reference var blockUID = wp.data.select('core/block-editor').getSelectedBlock().clientId; |
|
1 2 3 4 5 |
// Start of selection var selectionStart = wp.data.select('core/block-editor').getSelectionStart(); // End of selection var selectionEnd = wp.data.select('core/block-editor').getSelectionEnd(); |
The actual offset can be found within the OBJECT.
|
1 |
wp.data.select('core/block-editor').getSelectionEnd().offset; |
|
1 2 3 4 5 6 7 8 |
// Get block var block = wp.data.select('core/block-editor').getSelectedBlock(); // Attributes var blockAttributes = block.attributes; // Content var blockContent = block.attributes.content; |
|
1 2 3 4 |
var richTextContent = wp.richText.create( { blockContent }); |
|
1 |
var activeTextFormats = blockContent.formats; |
This function is documented, but wont work from the outside that easily. This normally checks the isActive state of the component. Here a small workaround using Lodash.
|
1 2 3 4 5 6 7 |
var formatToCheck = "core/text-color"; var formatToCheckisActive = true; if(_.find(value.formats[selectionStart], { type: formatToCheck })) { formatToCheckisActive = false; } |
Formats are saved within the Richtext object under formats and the text formats are stored within arrays that correspond to the actual index + range of the selection. So if a text-color has been applied from index 4 to 8, you will find the corresponding array for that.
Works well and does the trick for now. Here the output from the developer console, showing the arrays for an 18 character long paragraph:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
formats: Array(18) 0: Array(1) 0: {type: "core/bold"} length: 1 __proto__: Array(0) 1: Array(1) 0: {type: "core/bold"} length: 1 __proto__: Array(0) 2: [{…}] 3: [{…}] 4: [{…}] 14: [{…}] 15: [{…}] 16: [{…}] 17: [{…}] length: 18 __proto__: Array(0) |
I am using the core/text-color format with applyFormat as an example, can be anything.
|
1 2 3 4 5 6 7 8 |
richTextContent = wp.richText.applyFormat( richTextContent, { type: 'core/text-color', attributes:{class: "some-color-class"} }, selectionStart, selectionEnd ); |
insertObject can insert content at the start of the selection, with the rest between selectionStart and selectionEnd getting removed. There is also insert, which allows you to simply add a HTML string into the Richtext value.
|
1 2 3 4 5 6 |
richTextContent = wp.richText.insertObject( richTextContent, 'core/text-color', selectionStart, selectionEnd ); |
removeFormat allows you to remove a text format from the current selection.
|
1 2 3 4 5 6 |
richTextContent = wp.richText.removeFormat( richTextContent, 'core/text-color', selectionStart, selectionEnd ); |
Would be nice to use toggleFormat here, but that works within native components and not by selection index as the two calls above.
|
1 2 3 |
var prepNewHTML = wp.richText.toHTMLString( {richTextContent } ); |
|
1 2 3 4 5 |
wp.data.dispatch( 'core/block-editor' ).updateBlock( blockUID, { attributes: { content: prepNewHTML } } ); |
I will add some more Gutenberg examples in the future.
I am always looking for easy ways to white label the WordPress administration for myself and my clients. A nice personal touch for each project and an easy way to declutter the interface.
These are my personal favorites, that I use on a regular basis.
There are a lot of solutions out there, but many break easily and are really heavy to load. Some of these solutions I tried also break easily on new WordPress Upgrades. The first two below are currently my favorites.
When sharing the administration with your customer, you often need to make it as simple a possible for them. Depending on your setup, the menu becomes cluttered and overwhelming really fast.
I often trim menus for each user role, to make only those options accessible that are really needed.
When sharing the administration with multiple users, its always nice to add some personality to the user profiles as well.
WP User Profiles
“WP User Profiles is a sophisticated way to edit users in WordPress.”
The plugin provides other small addons, like WP User Avatars. Neat plugin to tweak admins, editors and other users.
Enjoy
Alex
cubicFUSION is my personal development playground. I always planned to make many of my projects public, but time is limited and running customer projects a priority.
I am still doing a big cleanup of my toolset and will see what I can actually share or reuse. Some of these might be useful, inspiration or just an archive of broken ideas ;)
The first public release is cubicFUSION Admin Enhancer. This is a free toolbox that adds useful admin features and resources to help you tweak the WordPress administration. I am always looking for ways to easily white-label the experience for my customers.
The first addon SHORTCODES converts all admin dashboard widgets to simple shortcodes. You can use those shortcodes within Elementor Pro or any other page builder, that allows you to create custom admin dashboards. This makes it easy to build white-label dashboards, while still reusing all those nice dashboard widgets :)
The plugin can be downloaded from the
Projects page or directly from the
WordPress Repository.
Enjoy!
Alex
“Dashboard Welcome by PowerPack Elements gives you full control over the WordPress welcome panel using Elementor.
You can personalize the dashboard with content and design built with Elementor. You can add heading, contact information, form, video, images, affiliate links, etc.
“Welcome by Beaver Addons gives you full control over the WordPress welcome panel using Beaver Builder.
You can personalize the dashboard with content and design built with Beaver Builder. You can add heading, contact information, form, video, images, affiliate links, etc.”
“Divi Dashboard Welcome is a revolutionary plugin that FINALLY gives you control over the WordPress Dashboard Welcome screen for yours and your client sites.
This means you can get rid of the default WordPress “getting started” content, and add your own branding, or your client’s branding. This allows you to upsell your additional services, create a client support hub, provide useful links or videos, and so much more!”