Issue #3484575 by plopesc, kunalkursija, lauriii, finnsky, anjali rathod,...

Issue #3484575 by plopesc, kunalkursija, lauriii, finnsky, anjali rathod, roshni upadhyay, ckrina, berdir, m4olivei: Move the Edit button outside the more actions drop down

core/modules/navigation/components/toolbar-button/assets/dots.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path
+    d="M140 128a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm-12-56a12 12 0 1 0-12-12 12 12 0 0 0 12 12Zm0 112a12 12 0 1 0 12 12 12 12 0 0 0-12-12Z" />
+</svg>
\ No newline at end of file

core/modules/navigation/components/toolbar-button/assets/thin-pencil.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6438 1.22289C12.4355 1.01461 12.0978 1.01461 11.8896 1.22289L3.96216 9.15026C3.8662 9.24622 3.78944 9.3596 3.73598 9.48433L2.17644 13.1232C2.09053 13.3237 2.13532 13.5563 2.28953 13.7105C2.44374 13.8647 2.67629 13.9095 2.87674 13.8236L6.51567 12.264C6.6404 12.2106 6.75378 12.1338 6.84974 12.0379L14.7771 4.11047C14.9854 3.90219 14.9854 3.5645 14.7771 3.35623L12.6438 1.22289ZM4.71641 9.90452L12.2666 2.35426L13.6457 3.73335L6.09549 11.2836L4.50049 11.9672L4.03283 11.4995L4.71641 9.90452Z" fill="white"/>
+</svg>

core/modules/navigation/components/toolbar-button/toolbar-button.component.yml

@@ -34,6 +34,7 @@ props:
           - expand--side
           - large
           - non-interactive
+          - primary
           - small-offset
           - weight--400
     extra_classes:

core/modules/navigation/components/toolbar-button/toolbar-button.css

@@ -24,6 +24,8 @@
   /* Active child variables. */
   --toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
   --toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
+  /* Icon */
+  --toolbar-button-icon-size: var(--admin-toolbar-space-20);
 }
 .toolbar-button {
   z-index: 1;
@@ -113,8 +115,8 @@
   background-position-y: calc(100% - (100% * var(--icon, 0)));
   background-size: 100% 200%;
   font-size: calc(0.75 * var(--admin-toolbar-rem));
-  inline-size: var(--admin-toolbar-space-20);
-  block-size: var(--admin-toolbar-space-20);
+  inline-size: var(--toolbar-button-icon-size);
+  block-size: var(--toolbar-button-icon-size);
   mask-repeat: no-repeat;
   mask-position: center center;
   mask-size: 100% auto;
@@ -133,6 +135,17 @@
     background: linktext;
   }
 }
+.toolbar-button--primary {
+  --toolbar-button-color: var(--admin-toolbar-color-white);
+  --toolbar-button-bg: var(--admin-toolbar-color-blue-450);
+  --toolbar-button-hover-color: var(--admin-toolbar-color-white);
+  --toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
+  --toolbar-button-focus-color: var(--admin-toolbar-color-white);
+  --toolbar-button-icon-size: var(--admin-toolbar-space-16);
+
+  font-variation-settings: "wght" 400;
+  padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-12);
+}
 .toolbar-button--weight--400 {
   font-variation-settings: "wght" 400;
 }
@@ -196,12 +209,18 @@
 .toolbar-button--icon--cross {
   --icon: url("data:image/svg+xml,%3csvg role='img' xmlns='http://www.w3.org/2000/svg' fill='none'  viewbox='0 0 20 20'%3e  %3cpath fill='%2355565B'    d='M16.2883 14.9617c.1761.1762.275.415.275.6641 0 .2491-.0989.4879-.275.6641-.1761.1761-.415.275-.6641.275-.2491 0-.4879-.0989-.664-.275L10 11.3281l-4.96172 4.9602c-.17612.1761-.41499.2751-.66406.2751-.24908 0-.48795-.099-.66407-.2751-.17612-.1761-.27506-.415-.27506-.6641 0-.249.09894-.4879.27506-.664L8.67187 10 3.71172 5.0383c-.17613-.17612-.27507-.41499-.27507-.66407 0-.24907.09894-.48794.27507-.66406.17612-.17612.41499-.27506.66406-.27506.24907 0 .48794.09894.66406.27506L10 8.67189l4.9617-4.9625c.1761-.17612.415-.27506.6641-.27506.249 0 .4879.09894.664.27506.1762.17612.2751.41499.2751.66406 0 .24907-.0989.48794-.2751.66407L11.3281 10l4.9602 4.9617Z'%3e  %3c/path%3e%3c/svg%3e");
 }
+.toolbar-button--icon--dots {
+  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e  %3cpath    d='M140 128a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm-12-56a12 12 0 1 0-12-12 12 12 0 0 0 12 12Zm0 112a12 12 0 1 0 12 12 12 12 0 0 0-12-12Z' /%3e%3c/svg%3e");
+}
 .toolbar-button--icon--entity-user-collection {
   --icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M10.9922 14.805C11.9974 14.1358 12.7606 13.1609 13.1688 12.0244C13.5771 10.8879 13.6088 9.65024 13.2592 8.49437C12.9096 7.3385 12.1974 6.32581 11.2278 5.60605C10.2581 4.88629 9.08262 4.49768 7.87505 4.49768C6.66747 4.49768 5.49196 4.88629 4.52233 5.60605C3.55271 6.32581 2.84045 7.3385 2.49088 8.49437C2.14132 9.65024 2.17301 10.8879 2.58126 12.0244C2.98952 13.1609 3.75267 14.1358 4.75786 14.805C2.93957 15.4751 1.38671 16.7152 0.330984 18.3403C0.275499 18.4227 0.236959 18.5154 0.217604 18.6129C0.198249 18.7104 0.198466 18.8108 0.218241 18.9082C0.238017 19.0056 0.276957 19.0981 0.332798 19.1803C0.388639 19.2625 0.460266 19.3328 0.543518 19.3871C0.626769 19.4414 0.719983 19.4786 0.817742 19.4966C0.9155 19.5146 1.01585 19.5129 1.11297 19.4917C1.21008 19.4706 1.30202 19.4303 1.38344 19.3733C1.46486 19.3163 1.53413 19.2437 1.58723 19.1597C2.26822 18.1123 3.20007 17.2516 4.29814 16.6558C5.39622 16.0599 6.62574 15.7479 7.87505 15.7479C9.12435 15.7479 10.3539 16.0599 11.4519 16.6558C12.55 17.2516 13.4819 18.1123 14.1629 19.1597C14.2729 19.3231 14.4428 19.4368 14.6359 19.476C14.829 19.5152 15.0298 19.4768 15.1949 19.3692C15.3599 19.2615 15.476 19.0932 15.5179 18.9007C15.5599 18.7082 15.5244 18.5068 15.4191 18.3403C14.3634 16.7152 12.8105 15.4751 10.9922 14.805ZM3.75005 10.125C3.75005 9.30912 3.99197 8.51159 4.44523 7.83324C4.8985 7.15488 5.54273 6.62617 6.29648 6.31396C7.05022 6.00175 7.87962 5.92006 8.67979 6.07922C9.47997 6.23839 10.215 6.63126 10.7919 7.20815C11.3688 7.78504 11.7616 8.52004 11.9208 9.32022C12.0799 10.1204 11.9983 10.9498 11.686 11.7035C11.3738 12.4573 10.8451 13.1015 10.1668 13.5548C9.48842 14.008 8.69089 14.25 7.87505 14.25C6.78141 14.2487 5.73292 13.8137 4.9596 13.0404C4.18628 12.2671 3.75129 11.2186 3.75005 10.125ZM23.4507 19.3781C23.2841 19.4867 23.0812 19.5247 22.8865 19.4838C22.6919 19.4428 22.5215 19.3262 22.4129 19.1597C21.7327 18.1116 20.801 17.2506 19.7027 16.655C18.6044 16.0594 17.3744 15.7483 16.125 15.75C15.9261 15.75 15.7354 15.6709 15.5947 15.5303C15.4541 15.3896 15.375 15.1989 15.375 15C15.375 14.8011 15.4541 14.6103 15.5947 14.4696C15.7354 14.329 15.9261 14.25 16.125 14.25C16.7325 14.2494 17.3324 14.1147 17.8817 13.8554C18.4311 13.5961 18.9164 13.2187 19.303 12.7501C19.6896 12.2815 19.9679 11.7334 20.1181 11.1448C20.2683 10.5561 20.2866 9.94162 20.1718 9.3451C20.0569 8.74859 19.8117 8.1848 19.4537 7.69402C19.0958 7.20325 18.6338 6.7976 18.1008 6.50606C17.5679 6.21452 16.9771 6.04429 16.3708 6.00752C15.7644 5.97076 15.1574 6.06838 14.5932 6.2934C14.5012 6.33317 14.4021 6.3541 14.3019 6.35495C14.2017 6.35579 14.1023 6.33654 14.0096 6.29833C13.917 6.26012 13.8329 6.20373 13.7624 6.13248C13.6919 6.06123 13.6364 5.97658 13.5992 5.88352C13.562 5.79046 13.5438 5.69088 13.5457 5.59067C13.5476 5.49046 13.5696 5.39165 13.6103 5.30007C13.6511 5.2085 13.7098 5.12602 13.7829 5.05752C13.8561 4.98901 13.9422 4.93586 14.0363 4.90121C15.3277 4.3862 16.764 4.36767 18.0682 4.84919C19.3725 5.33071 20.4522 6.27817 21.099 7.50879C21.7459 8.73941 21.9141 10.166 21.5713 11.5133C21.2284 12.8607 20.3987 14.0333 19.2422 14.805C21.0605 15.4751 22.6134 16.7152 23.6691 18.3403C23.7777 18.5069 23.8158 18.7098 23.7748 18.9044C23.7338 19.099 23.6172 19.2694 23.4507 19.3781Z' fill='currentColor'/%3e%3c/svg%3e");
 }
 .toolbar-button--icon--help {
   --icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M13.125 16.875C13.125 17.0975 13.059 17.315 12.9354 17.5C12.8118 17.685 12.6361 17.8292 12.4305 17.9144C12.225 17.9995 11.9988 18.0218 11.7805 17.9784C11.5623 17.935 11.3618 17.8278 11.2045 17.6705C11.0472 17.5132 10.94 17.3127 10.8966 17.0945C10.8532 16.8762 10.8755 16.65 10.9606 16.4445C11.0458 16.2389 11.19 16.0632 11.375 15.9396C11.56 15.816 11.7775 15.75 12 15.75C12.2984 15.75 12.5845 15.8685 12.7955 16.0795C13.0065 16.2905 13.125 16.5766 13.125 16.875ZM12 6.75C9.93188 6.75 8.25 8.26406 8.25 10.125V10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61033 11.171 8.80109 11.25 9 11.25C9.19892 11.25 9.38968 11.171 9.53033 11.0303C9.67099 10.8897 9.75 10.6989 9.75 10.5V10.125C9.75 9.09375 10.7597 8.25 12 8.25C13.2403 8.25 14.25 9.09375 14.25 10.125C14.25 11.1562 13.2403 12 12 12C11.8011 12 11.6103 12.079 11.4697 12.2197C11.329 12.3603 11.25 12.5511 11.25 12.75V13.5C11.25 13.6989 11.329 13.8897 11.4697 14.0303C11.6103 14.171 11.8011 14.25 12 14.25C12.1989 14.25 12.3897 14.171 12.5303 14.0303C12.671 13.8897 12.75 13.6989 12.75 13.5V13.4325C14.46 13.1184 15.75 11.7544 15.75 10.125C15.75 8.26406 14.0681 6.75 12 6.75ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96452 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7662 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z' fill='currentColor'/%3e%3c/svg%3e");
 }
+.toolbar-button--icon--edit {
+  --icon: url(./assets/edit.svg);
+}
 .toolbar-button--icon--navigation-blocks {
   --icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M9.75 3.75H5.25C4.85218 3.75 4.47064 3.90804 4.18934 4.18934C3.90804 4.47064 3.75 4.85218 3.75 5.25V9.75C3.75 10.1478 3.90804 10.5294 4.18934 10.8107C4.47064 11.092 4.85218 11.25 5.25 11.25H9.75C10.1478 11.25 10.5294 11.092 10.8107 10.8107C11.092 10.5294 11.25 10.1478 11.25 9.75V5.25C11.25 4.85218 11.092 4.47064 10.8107 4.18934C10.5294 3.90804 10.1478 3.75 9.75 3.75ZM9.75 9.75H5.25V5.25H9.75V9.75ZM18.75 3.75H14.25C13.8522 3.75 13.4706 3.90804 13.1893 4.18934C12.908 4.47064 12.75 4.85218 12.75 5.25V9.75C12.75 10.1478 12.908 10.5294 13.1893 10.8107C13.4706 11.092 13.8522 11.25 14.25 11.25H18.75C19.1478 11.25 19.5294 11.092 19.8107 10.8107C20.092 10.5294 20.25 10.1478 20.25 9.75V5.25C20.25 4.85218 20.092 4.47064 19.8107 4.18934C19.5294 3.90804 19.1478 3.75 18.75 3.75ZM18.75 9.75H14.25V5.25H18.75V9.75ZM9.75 12.75H5.25C4.85218 12.75 4.47064 12.908 4.18934 13.1893C3.90804 13.4706 3.75 13.8522 3.75 14.25V18.75C3.75 19.1478 3.90804 19.5294 4.18934 19.8107C4.47064 20.092 4.85218 20.25 5.25 20.25H9.75C10.1478 20.25 10.5294 20.092 10.8107 19.8107C11.092 19.5294 11.25 19.1478 11.25 18.75V14.25C11.25 13.8522 11.092 13.4706 10.8107 13.1893C10.5294 12.908 10.1478 12.75 9.75 12.75ZM9.75 18.75H5.25V14.25H9.75V18.75ZM18.75 12.75H14.25C13.8522 12.75 13.4706 12.908 13.1893 13.1893C12.908 13.4706 12.75 13.8522 12.75 14.25V18.75C12.75 19.1478 12.908 19.5294 13.1893 19.8107C13.4706 20.092 13.8522 20.25 14.25 20.25H18.75C19.1478 20.25 19.5294 20.092 19.8107 19.8107C20.092 19.5294 20.25 19.1478 20.25 18.75V14.25C20.25 13.8522 20.092 13.4706 19.8107 13.1893C19.5294 12.908 19.1478 12.75 18.75 12.75ZM18.75 18.75H14.25V14.25H18.75V18.75Z' fill='currentColor'/%3e%3c/svg%3e");
 }
@@ -220,6 +239,9 @@
 .toolbar-button--icon--pencil {
   --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e  %3cpath d='M17.7586 5.73214 14.268 2.24073c-.1161-.1161-.2539-.2082-.4056-.27104-.1517-.06284-.3142-.09518-.4784-.09518s-.3268.03234-.4784.09518c-.1517.06284-.2895.15494-.4056.27104L2.86641 11.8751c-.11658.1157-.209.2533-.2719.405-.06291.1517-.09503.3144-.0945.4786v3.4914c0 .3315.13169.6495.36611.8839.23442.2344.55237.3661.88389.3661h3.4914c.16422.0005.32689-.0316.47858-.0945s.28936-.1553.40502-.2719l9.63359-9.6336c.1161-.11607.2082-.25388.271-.40556.0629-.15168.0952-.31424.0952-.47842s-.0323-.32675-.0952-.47842c-.0628-.15168-.1549-.28949-.271-.40556Zm-13.75 6.76796 6.6164-6.6164 1.3039 1.3039-6.61639 6.6156-1.30391-1.3031Zm-.25859 1.5086 2.2414 2.2414h-2.2414v-2.2414Zm3.75 1.9828L6.1961 14.6876l6.6164-6.6164 1.3039 1.3039-6.61639 6.6164ZM15 8.49151 11.5086 5.0001l1.875-1.875 3.4914 3.49063L15 8.49151Z'/%3e%3c/svg%3e");
 }
+.toolbar-button--icon--thin-pencil {
+  --icon: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='16' height='16' fill='white' fill-opacity='0.01'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6438 1.22289C12.4355 1.01461 12.0978 1.01461 11.8896 1.22289L3.96216 9.15026C3.8662 9.24622 3.78944 9.3596 3.73598 9.48433L2.17644 13.1232C2.09053 13.3237 2.13532 13.5563 2.28953 13.7105C2.44374 13.8647 2.67629 13.9095 2.87674 13.8236L6.51567 12.264C6.6404 12.2106 6.75378 12.1338 6.84974 12.0379L14.7771 4.11047C14.9854 3.90219 14.9854 3.5645 14.7771 3.35623L12.6438 1.22289ZM4.71641 9.90452L12.2666 2.35426L13.6457 3.73335L6.09549 11.2836L4.50049 11.9672L4.03283 11.4995L4.71641 9.90452Z' fill='white'/%3e%3c/svg%3e");
+}
 .toolbar-button--icon--preview {
   --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e  %3cpath fill='%2355565B' d='M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z'/%3e%3c/svg%3e");
 }

core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css

@@ -21,6 +21,8 @@
   /* Active child variables. */
   --toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
   --toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
+  /* Icon */
+  --toolbar-button-icon-size: var(--admin-toolbar-space-20);
 }
 
 .toolbar-button {
@@ -121,8 +123,8 @@
     background-position-y: calc(100% - (100% * var(--icon, 0)));
     background-size: 100% 200%;
     font-size: calc(0.75 * var(--admin-toolbar-rem));
-    inline-size: var(--admin-toolbar-space-20);
-    block-size: var(--admin-toolbar-space-20);
+    inline-size: var(--toolbar-button-icon-size);
+    block-size: var(--toolbar-button-icon-size);
     mask-repeat: no-repeat;
     mask-position: center center;
     mask-size: 100% auto;
@@ -149,6 +151,18 @@
   }
 }
 
+.toolbar-button--primary {
+  --toolbar-button-color: var(--admin-toolbar-color-white);
+  --toolbar-button-bg: var(--admin-toolbar-color-blue-450);
+  --toolbar-button-hover-color: var(--admin-toolbar-color-white);
+  --toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
+  --toolbar-button-focus-color: var(--admin-toolbar-color-white);
+  --toolbar-button-icon-size: var(--admin-toolbar-space-16);
+
+  font-variation-settings: "wght" 400;
+  padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-12);
+}
+
 .toolbar-button--weight--400 {
   font-variation-settings: "wght" 400;
 }
@@ -229,6 +243,10 @@
   --icon: url(./assets/cross.svg);
 }
 
+.toolbar-button--icon--dots {
+  --icon: url(./assets/dots.svg);
+}
+
 .toolbar-button--icon--entity-user-collection {
   --icon: url(./assets/people.svg);
 }
@@ -237,6 +255,10 @@
   --icon: url(./assets/help.svg);
 }
 
+.toolbar-button--icon--edit {
+  --icon: url(./assets/edit.svg);
+}
+
 .toolbar-button--icon--navigation-blocks {
   --icon: url(./assets/blocks.svg);
 }
@@ -261,6 +283,10 @@
   --icon: url(./assets/pencil.svg);
 }
 
+.toolbar-button--icon--thin-pencil {
+  --icon: url(./assets/thin-pencil.svg);
+}
+
 .toolbar-button--icon--preview {
   --icon: url(./assets/eye.svg);
 }

core/modules/navigation/src/Hook/NavigationHooks.php

@@ -2,15 +2,15 @@
 
 namespace Drupal\navigation\Hook;
 
-use Drupal\Core\StringTranslation\StringTranslationTrait;
-use Drupal\navigation\RenderCallbacks;
 use Drupal\Component\Plugin\PluginBase;
-use Drupal\navigation\Plugin\SectionStorage\NavigationSectionStorage;
 use Drupal\Core\Block\BlockPluginInterface;
+use Drupal\Core\Hook\Attribute\Hook;
+use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\StringTranslation\StringTranslationTrait;
 use Drupal\navigation\NavigationContentLinks;
 use Drupal\navigation\NavigationRenderer;
-use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\Core\Hook\Attribute\Hook;
+use Drupal\navigation\Plugin\SectionStorage\NavigationSectionStorage;
+use Drupal\navigation\RenderCallbacks;
 use Drupal\navigation\TopBarItemManagerInterface;
 
 /**
@@ -81,8 +81,8 @@ public function pageTop(array &$page_top): void {
   #[Hook('theme')]
   public function theme($existing, $type, $theme, $path) : array {
     $items['top_bar'] = ['render element' => 'element'];
-    $items['top_bar_local_tasks'] = ['variables' => ['local_tasks' => []]];
-    $items['top_bar_local_task'] = ['variables' => ['link' => []]];
+    $items['top_bar_page_actions'] = ['variables' => ['page_actions' => [], 'featured_page_actions' => []]];
+    $items['top_bar_page_action'] = ['variables' => ['link' => []]];
     $items['big_pipe_interface_preview__navigation_shortcut_lazy_builder_lazyLinks__Shortcuts'] = [
       'variables' => [
         'callback' => NULL,

core/modules/navigation/src/NavigationRenderer.php

@@ -255,7 +255,7 @@ public function getLocalTasks(): array {
     $cacheability = new CacheableMetadata();
     $cacheability->addCacheableDependency($this->localTaskManager);
     $this->localTasks = [
-      'tasks' => [],
+      'page_actions' => [],
       'cacheability' => $cacheability,
     ];
     // For now, we're only interested in local tasks corresponding to a content
@@ -277,8 +277,8 @@ public function getLocalTasks(): array {
       $link['localized_options'] += [
         'set_active_class' => TRUE,
       ];
-      $this->localTasks['tasks'][$route_name] = [
-        '#theme' => 'top_bar_local_task',
+      $this->localTasks['page_actions'][$route_name] = [
+        '#theme' => 'top_bar_page_action',
         '#link' => [
           '#type' => 'link',
           '#title' => $link['title'],
@@ -301,7 +301,7 @@ public function getLocalTasks(): array {
    */
   public function hasLocalTasks(): bool {
     $local_tasks = $this->getLocalTasks();
-    return !empty($local_tasks['tasks']);
+    return !empty($local_tasks['page_actions']);
   }
 
 }

core/modules/navigation/src/Plugin/TopBarItem/PageActions.php

@@ -6,6 +6,7 @@
 
 use Drupal\Core\Cache\CacheableMetadata;
 use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\Core\StringTranslation\TranslatableMarkup;
 use Drupal\navigation\Attribute\TopBarItem;
 use Drupal\navigation\NavigationRenderer;
@@ -15,6 +16,8 @@
 
 /**
  * Provides the Page Actions basic top bar item.
+ *
+ * @internal
  */
 #[TopBarItem(
   id: 'page_actions',
@@ -23,16 +26,40 @@
 )]
 final class PageActions extends TopBarItemBase implements ContainerFactoryPluginInterface {
 
-  public function __construct(array $configuration, $plugin_id, $plugin_definition, private NavigationRenderer $navigationRenderer) {
+  /**
+   * Constructs a PageActions object.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin ID for the plugin instance.
+   * @param mixed $plugin_definition
+   *   The plugin implementation definition.
+   * @param \Drupal\navigation\NavigationRenderer $navigationRenderer
+   *   The navigation renderer.
+   * @param \Drupal\Core\Routing\RouteMatchInterface $routeMatch
+   *   The route match.
+   */
+  public function __construct(
+    array $configuration,
+    $plugin_id,
+    $plugin_definition,
+    protected NavigationRenderer $navigationRenderer,
+    protected RouteMatchInterface $routeMatch,
+  ) {
     parent::__construct($configuration, $plugin_id, $plugin_definition);
   }
 
+  /**
+   * {@inheritdoc}
+   */
   public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
     return new static(
       $configuration,
       $plugin_id,
       $plugin_definition,
-      $container->get(NavigationRenderer::class)
+      $container->get(NavigationRenderer::class),
+      $container->get(RouteMatchInterface::class),
     );
   }
 
@@ -45,18 +72,58 @@ public function build(): array {
         'contexts' => ['route'],
       ],
     ];
+
     // Local tasks for content entities.
-    if ($this->navigationRenderer->hasLocalTasks()) {
-      $local_tasks = $this->navigationRenderer->getLocalTasks();
-      $build += [
-        '#theme' => 'top_bar_local_tasks',
-        '#local_tasks' => $local_tasks['tasks'],
-      ];
-      assert($local_tasks['cacheability'] instanceof CacheableMetadata);
-      $local_tasks['cacheability']->applyTo($build);
+    if (!$this->navigationRenderer->hasLocalTasks()) {
+      return $build;
     }
 
+    $page_actions = $this->navigationRenderer->getLocalTasks();
+    $featured_page_actions = $this->getFeaturedPageActions($page_actions);
+
+    // Filter actions to exclude featured ones from the main array.
+    $page_actions['page_actions'] = array_filter($page_actions['page_actions'],
+      static fn ($action_route) =>!array_key_exists($action_route, $featured_page_actions),
+    ARRAY_FILTER_USE_KEY);
+
+    $build += [
+      '#theme' => 'top_bar_page_actions',
+      '#page_actions' => $page_actions['page_actions'],
+      '#featured_page_actions' => $featured_page_actions,
+    ];
+
+    assert($page_actions['cacheability'] instanceof CacheableMetadata);
+    $page_actions['cacheability']->applyTo($build);
+
     return $build;
   }
 
+  /**
+   * Gets the featured local task.
+   *
+   * @param array $page_actions
+   *   The array of local tasks for the current page.
+   *
+   * @return array|null
+   *   The featured local task definition if available. NULL otherwise.
+   */
+  protected function getFeaturedPageActions(array $page_actions): ?array {
+    $featured_page_actions = [];
+    $current_route_name = $this->routeMatch->getRouteName();
+    $canonical_pattern = '/^entity\.(.+?)\.canonical$/';
+    if (preg_match($canonical_pattern, $current_route_name, $matches)) {
+      $entity_type = $matches[1];
+      $edit_route = "entity.$entity_type.edit_form";
+      // For core entities, the local task name matches the route name. If
+      // needed, we could iterate over the items and check the actual route.
+      if (isset($page_actions['page_actions'][$edit_route]) && $page_actions['page_actions'][$edit_route]['#access']?->isAllowed()) {
+        $featured_page_actions[$edit_route] = [
+          'page_action' => $page_actions['page_actions'][$edit_route],
+          'icon' => 'thin-pencil',
+        ];
+      }
+    }
+    return $featured_page_actions;
+  }
+
 }

core/modules/navigation/templates/top-bar-local-task.html.twig → core/modules/navigation/templates/top-bar-page-action.html.twig

 {#
 /**
  * @file
- * Default theme implementation for a single navigation top bar local task.
+ * Default theme implementation for a single navigation top bar page action.
  *
  * Available variables:
  * - link: Link render element.

core/modules/navigation/templates/top-bar-local-tasks.html.twig → core/modules/navigation/templates/top-bar-page-actions.html.twig

 {#
 /**
  * @file
- * Default theme implementation for navigation top bar local tasks.
+ * Default theme implementation for navigation top bar page actions.
  *
  * Available variables:
- * - local_tasks: Array of local tasks for the current route.
+ * - page_actions: Array of page actions for the current route.
+ * - featured_page_actions: The page actions to show featured before the dropdown.
  */
 #}
-{% set dropdown_id = 'admin-local-tasks'|clean_unique_id %}
+{% set dropdown_id = 'top-bar-page-actions'|clean_unique_id %}
+
+{% for featured_page_action in featured_page_actions %}
+  {% set link = featured_page_action.page_action['#link'] %}
+  {% include 'navigation:toolbar-button' with {
+    text: link['#title'],
+    html_tag: 'a',
+    attributes: create_attribute().setAttribute('href', link['#url']|render|default(null)),
+    modifiers: ['primary'],
+    icon: featured_page_action.icon,
+  } only %}
+{% endfor %}
+
 {% include 'navigation:toolbar-button' with {
+  icon: 'dots',
   attributes: create_attribute(
     {
       'aria-expanded': 'false',
@@ -16,17 +30,12 @@
       'data-drupal-dropdown': 'true'
     }
   ),
-  text: 'More actions'|t,
-  modifiers: [
-    'expand--down',
-    'weight--400',
-    'small-offset',
-  ],
 } only %}
+
 <div class="toolbar-dropdown__menu" id={{ dropdown_id }}>
   <ul class="toolbar-dropdown__list">
-    {% for local_task in local_tasks %}
-      {{ local_task }}
+    {% for page_action in page_actions %}
+      {{ page_action }}
     {% endfor %}
   </ul>
 </div>

core/modules/navigation/tests/src/Functional/NavigationTopBarTest.php

@@ -82,12 +82,12 @@ public function testTopBarVisibility(): void {
     $test_page_url = Url::fromRoute('test_page_test.test_page');
     $this->verifyDynamicPageCache($test_page_url, 'MISS');
     $this->verifyDynamicPageCache($test_page_url, 'HIT');
-    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span");
+    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button");
 
     $this->verifyDynamicPageCache($this->node->toUrl(), 'MISS');
     $this->verifyDynamicPageCache($this->node->toUrl(), 'HIT');
     // Top Bar is not visible if the feature flag module is disabled.
-    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span");
+    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button");
     $this->assertSession()->elementExists('xpath', '//div[@id="block-tabs"]');
 
     \Drupal::service('module_installer')->install(['navigation_top_bar']);
@@ -96,23 +96,22 @@ public function testTopBarVisibility(): void {
     $test_page_url = Url::fromRoute('test_page_test.test_page');
     $this->verifyDynamicPageCache($test_page_url, 'MISS');
     $this->verifyDynamicPageCache($test_page_url, 'HIT');
-    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span");
+    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button");
 
     // Top Bar is visible once the feature flag module is enabled.
     $this->verifyDynamicPageCache($this->node->toUrl(), 'MISS');
     $this->verifyDynamicPageCache($this->node->toUrl(), 'HIT');
-    $this->assertSession()->elementExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span");
-    $this->assertSession()->elementTextEquals('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span", 'More actions');
-    $this->assertSession()->elementNotExists('xpath', '//div[@id="block-tabs"]');
+    $this->assertSession()->elementExists('xpath', "(//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button)[1]");
+    $this->assertSession()->elementTextEquals('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/a[contains(@class, 'toolbar-button--icon--thin-pencil')]", "Edit");
+    $this->assertSession()->elementAttributeContains('xpath', "(//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button)[1]", 'class', 'toolbar-button--icon--dots');
 
     // Find all the dropdown links and check if the top bar is there as well.
-    $toolbar_links = $this->mink->getSession()->getPage()->find('xpath', '//*[@id="admin-local-tasks"]/ul');
+    $toolbar_links = $this->mink->getSession()->getPage()->find('xpath', '//*[@id="top-bar-page-actions"]/ul');
 
     foreach ($toolbar_links->findAll('css', 'li') as $toolbar_link) {
       $this->clickLink($toolbar_link->getText());
-      $this->assertSession()->elementExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span");
-      $this->assertSession()->elementTextEquals('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span", 'More actions');
-      $this->assertSession()->elementNotExists('xpath', '//div[@id="block-tabs"]');
+      $this->assertSession()->elementExists('xpath', "(//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button)[1]");
+      $this->assertSession()->elementAttributeContains('xpath', "(//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button)[1]", 'class', 'toolbar-button--icon--dots');
     }
 
     // Regular tabs are visible for user that cannot access to navigation.
@@ -121,7 +120,7 @@ public function testTopBarVisibility(): void {
     ]));
 
     $this->drupalGet($this->node->toUrl());
-    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button/span");
+    $this->assertSession()->elementNotExists('xpath', "//div[contains(@class, 'top-bar__content')]/div[contains(@class, 'top-bar__actions')]/button");
     $this->assertSession()->elementExists('xpath', '//div[@id="block-tabs"]');
   }
 

core/modules/navigation/tests/src/FunctionalJavascript/PerformanceTest.php

@@ -82,7 +82,7 @@ public function testLogin(): void {
       'ScriptCount' => 2,
       'ScriptBytes' => 215500,
       'StylesheetCount' => 1,
-      'StylesheetBytes' => 90200,
+      'StylesheetBytes' => 92000,
     ];
     $this->assertMetrics($expected, $performance_data);