Includes: Adds public styles to admin enque again #1647

datengraben · 2024-10-14T09:27:56Z

codecov · 2024-10-14T09:31:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 50.23%. Comparing base (1322269) to head (2a24b1e).
Report is 4 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##             master    #1647   +/-   ##
=========================================
  Coverage     50.23%   50.23%           
  Complexity     2722     2722           
=========================================
  Files            99       99           
  Lines         10868    10868           
=========================================
  Hits           5460     5460           
  Misses         5408     5408

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

datengraben · 2024-10-14T09:33:37Z

@hansmorb Diese Zeile im SCSS führt dazu das die Links im Datepicker grün sind.

commonsbooking/assets/public/sass/partials/_bookings.scss

Lines 40 to 43 in 1322269

    
           .ui-corner-all { 
        
               color: var(--commonsbooking-color-accept); 
        
           }

Die Änderung von dir dafür ist schon älter und ich vermute mal das du das grün gestyled hast, da der Datepicker damals noch außerhalb des Admin-Backend genutzt wurde? Weil im Wordpress Admin-Backend sind alle Links blau.

@hansmorb Ists ok wenn ich das aus dem scss entferne? Ich glaube das wir den Datepicker sonst nirgendwo im Frontend benutzen, wo die --commonsbooking-color-accept genutzt wird.

datengraben · 2024-10-14T09:36:47Z

@hansmorb was sagst du zur Änderung, ich bin mir unsicher ob alle in commonsbooking_public aufgerufene wp_enque_script usw. auch im Backend genutzt werden. Alternativ könnte man also die fehlenden jquery enques auch kopieren. Für weniger unnötig geladene Assets.

hansmorb · 2024-10-14T09:50:23Z

Ich muss mich das nachher noch mal genauer ansehen, aber eigentlich ist die admin.css für das Admin-Backend gedacht und die public.css für das public facing frontend.

datengraben · 2024-10-14T13:22:33Z

Ich muss mich das nachher noch mal genauer ansehen, aber eigentlich ist die admin.css für das Admin-Backend gedacht und die public.css für das public facing frontend.

Ja, dann wäre es sicher besser die fehlenden JQUery Enque-Styles zu kopieren.
Ich vermute das diese Lösung es aber final nicht klären wird, denn leider sind die CSS-Regeln für #ui-datepicker-div aktuell nur über das Einbinden der kompletten public.css zu erreichen. Die Regeln werden über das Gruntfile nur in die public.css-Datei gebaut.

@hansmorb Diese Zeile im SCSS führt dazu das die Links im Datepicker grün sind.

Hier siehst du auch noch die Auswirkungen der Einbindung von public.css auf andere Teile des Admin Bereichs.

Dort wird folgender Style auf die Links angewendet.

.cb-wrapper .cb-title {
    color: var(--commonsbooking-color-primary);
}

Das Problem ist hier natürlich ein anders, es werden CSS-Klasse die ansonsten im User-Facing Frontend (public.css) genutzt werden, auch im Admin-Bereich genutzt.

Bin gerade unsicher wie am Besten weiterzumachen ist. Ich frage mich gerade:

inwieweit wird jquery überhaupt im frontend genutzt? Und können wir auch Litepicker für start-date und end-date im Admin-Bereich verwenden?
Inweit würde eine sinvolle Trennung der SASS-Regeln aussehen, die gerade im public\css\partial\bookings.sass (und ggf. weitere vorkommen) stehen, wenn jquery-CSS im User-Facing Frontend und im Admin-Frontend genutzt wird.
- Sollten wir z.B. die custom-color Regeln oder die jquery-regeln in ein eigens CSS verschieben, das wir bei Bedarf im User-Facing oder Admin-Bereich enque-en können.

hansmorb · 2024-10-14T13:37:45Z

Ich glaube um das Problem zu verstehen müsste ich es erstmal richtig rekonstruieren können. Wenn ich auf dem aktuellen Master mal das wp-env starte habe ich zum Beispiel das Problem nicht, da sieht der Datepicker ganz normal aus:

datengraben · 2024-10-14T13:47:06Z

@hansmorb Danke.

Kannst du über die Dev-Tools zeigen ob bzw. welche CSS-Datei eingebunden ist (also z.B. public.css)? Und woher die #ui-datepicker-div Regel stammt. So heißt die Regel, die bei mir am Formular-Feld für die Datums-Eingabe hängt. Bei mir gelangt die über die public.css in den Browser.

datengraben · 2024-10-14T13:48:11Z

In unserer Instanz wurde 2.9.4 via WP.org geladen und installiert. Ggf. unterscheiden sich die Inhalte der ausgelieferten Dateien von denen die wp-env erzeugt?

hansmorb · 2024-10-14T15:07:17Z

In unserer Instanz wurde 2.9.4 via WP.org geladen und installiert. Ggf. unterscheiden sich die Inhalte der ausgelieferten Dateien von denen die wp-env erzeugt?

Möglich! Ich habe es nochmal mit der 2.9.4 in wp-env probiert, das hat funktioniert.
Dann habe ich es nochmal mit instawp und der aktuellen WP-Beta probiert: https://app.instawp.io/launch?t=beta-rc&d=v2
Und final im Playground: https://playground.wordpress.net/?plugin=commonsbooking&url=%2Fwp-admin%2F&mode=browser

Bei allen hat es funktioniert, die Ursache liegt also wahrscheinlich woanders.

datengraben · 2024-10-14T15:24:26Z

@hansmorb Danke.

Kannst du über die Dev-Tools zeigen ob bzw. welche CSS-Datei eingebunden ist (also z.B. public.css)? Und woher die #ui-datepicker-div Regel stammt. So heißt die Regel, die bei mir am Formular-Feld für die Datums-Eingabe hängt. Bei mir gelangt die über die public.css in den Browser.

Wenn ich im Playground die Bookings Admin page ansurfe bekomme ich raus, das die datepicker styles aus dem admin.css kommen. Siehe screenshot für eine Regel die Anwendung findet.

Ich probiere mal aus, das Plugin neu zu installieren.

datengraben · 2024-10-14T19:31:20Z

Die Neu-Installation hat leider nichts gebracht.

Die geladenen CSS Assets (als Beispiel die Bookings-Seite im Admin bereich) sind genau gleich.
Die JS Assets nicht.

Folgende Liste der geladenen JQuery-Assets kann ich für unsere Instanz erzeugen.

Folgende Liste taucht in den Dev-Tools für den Playground auf.

Der Unterschied ist:

Der Playground zieht JQuery in der Version 3.7.1 und Jquery-Migrate in der Version 3.4.1
Wohingegen unsere Instanz migrate (hinter load-scripts.php) in der Version 6.6.2 (im Log steht aber auch 3.4.1) anzieht und Jquery gar nicht.

Das scheint das Problem zu sein. JQuery wird nicht ausgeliefert. Ich habe auch schon mal versucht alle Plugins zu deaktivieren, hat auch nicht funktioniert.

hansmorb · 2024-10-16T15:10:19Z

Vielleicht kannst du mal probieren jQuery als dependency für cb-scripts-admin mit anzugeben?

commonsbooking/includes/Admin.php

Lines 24 to 30 in 048dc48

    
           	wp_enqueue_script( 
        
           		'cb-scripts-admin', 
        
           		COMMONSBOOKING_PLUGIN_ASSETS_URL . 'admin/js/admin.min.js', 
        
           		array(), 
        
           		COMMONSBOOKING_VERSION 
        
           	); 
        
           }

datengraben · 2024-10-16T15:47:05Z

Vielleicht kannst du mal probieren jQuery als dependency für cb-scripts-admin mit anzugeben?

commonsbooking/includes/Admin.php

Lines 24 to 30 in 048dc48

wp_enqueue_script(

'cb-scripts-admin',

COMMONSBOOKING_PLUGIN_ASSETS_URL . 'admin/js/admin.min.js',

array(),

COMMONSBOOKING_VERSION

);

}

Danke guter Punkt. Das hatte leider nicht den gewünschten Effekt.
Ich versuche mal Schrittweise unsere Produktions-Umgebung (Plugins/Themes) in einem frischen WP-ENV nachzustellen.

datengraben · 2024-10-17T12:28:50Z

Ich konnte es auf das Plugin LightStart (wp-maintenance-mode) zurückführen. Sobald ich das deaktiviere funktionieren die Kalendar-Widgets der Tabellen-Filter im Admin-Backend wieder.

datengraben · 2024-10-17T12:58:21Z

Ich konnte es auf das Plugin LightStart (wp-maintenance-mode) zurückführen. Sobald ich das deaktiviere funktionieren die Kalendar-Widgets der Tabellen-Filter im Admin-Backend wieder.

Ich habe versucht eine fehlerfreie Version des Plugins aus der Vergangenheit zu finden (via der Rollback Funktion des LightStart-Plugins in der Plugin Liste), konnte keines finden.

Wenn ich das Plugin komplett lösche und neu installiere taucht das Problem auch nicht mehr auf.
Ich würde daher das Issue und den PR schließen und einen Eintrag im FAQ anlegen.

hansmorb · 2024-10-17T13:07:24Z

Super, danke! Ja, ich habe Lightstart irgendwann entfernt, nachdem es immer beim Aktivieren des maintenance Modus gecrasht ist. Vielleicht sollten wir einfach dazu raten, es nicht zu verwenden.

Includes: Fixes #1646 by adding public styles to admin enque

2a24b1e

datengraben added bug Something isn't working frontend labels Oct 14, 2024

datengraben requested a review from hansmorb October 14, 2024 09:27

datengraben linked an issue Oct 14, 2024 that may be closed by this pull request

Admin Backend: date picker does not render correctly #1646

Closed

hansmorb added this to the 2.10 milestone Oct 14, 2024

datengraben changed the title ~~Includes: Fixes #1646 by adding public styles to admin enque~~ Includes: Adds public styles to admin enque again Oct 14, 2024

datengraben closed this Oct 17, 2024

datengraben deleted the 1646-admin-backend-date-picker-does-not-render-correctly branch October 17, 2024 13:00

datengraben mentioned this pull request Oct 17, 2024

Admin Backend: date picker does not render correctly #1646

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Includes: Adds public styles to admin enque again #1647

Includes: Adds public styles to admin enque again #1647

datengraben commented Oct 14, 2024 •

edited

Loading

codecov bot commented Oct 14, 2024 •

edited

Loading

datengraben commented Oct 14, 2024

datengraben commented Oct 14, 2024

hansmorb commented Oct 14, 2024

datengraben commented Oct 14, 2024

hansmorb commented Oct 14, 2024

datengraben commented Oct 14, 2024

datengraben commented Oct 14, 2024 •

edited

Loading

hansmorb commented Oct 14, 2024

datengraben commented Oct 14, 2024

datengraben commented Oct 14, 2024

hansmorb commented Oct 16, 2024 •

edited

Loading

datengraben commented Oct 16, 2024

datengraben commented Oct 17, 2024 •

edited

Loading

datengraben commented Oct 17, 2024

hansmorb commented Oct 17, 2024

Includes: Adds public styles to admin enque again #1647

Includes: Adds public styles to admin enque again #1647

Conversation

datengraben commented Oct 14, 2024 • edited Loading

codecov bot commented Oct 14, 2024 • edited Loading

Codecov Report

datengraben commented Oct 14, 2024

datengraben commented Oct 14, 2024

hansmorb commented Oct 14, 2024

datengraben commented Oct 14, 2024

hansmorb commented Oct 14, 2024

datengraben commented Oct 14, 2024

datengraben commented Oct 14, 2024 • edited Loading

hansmorb commented Oct 14, 2024

datengraben commented Oct 14, 2024

datengraben commented Oct 14, 2024

hansmorb commented Oct 16, 2024 • edited Loading

datengraben commented Oct 16, 2024

datengraben commented Oct 17, 2024 • edited Loading

datengraben commented Oct 17, 2024

hansmorb commented Oct 17, 2024

datengraben commented Oct 14, 2024 •

edited

Loading

codecov bot commented Oct 14, 2024 •

edited

Loading

datengraben commented Oct 14, 2024 •

edited

Loading

hansmorb commented Oct 16, 2024 •

edited

Loading

datengraben commented Oct 17, 2024 •

edited

Loading