diff --git a/plugin/blocks/src/components/site-template/block.json b/plugin/blocks/src/components/site-template/block.json index 64d137c9..85f80260 100644 --- a/plugin/blocks/src/components/site-template/block.json +++ b/plugin/blocks/src/components/site-template/block.json @@ -44,5 +44,6 @@ }, "render": "file:./render.php", "editorScript": "file:./index.js", - "editorStyle": "file:./index.css" + "editorStyle": "file:./index.css", + "viewScript": "file:./view.js" } diff --git a/plugin/blocks/src/components/site-template/view.js b/plugin/blocks/src/components/site-template/view.js new file mode 100644 index 00000000..7b95a5cd --- /dev/null +++ b/plugin/blocks/src/components/site-template/view.js @@ -0,0 +1,15 @@ +(() => { + console.log('site-template view.js'); + document.querySelectorAll('.wpcloud-site-template tr, .wp-block-query .wp-block-wpcloud-site-card').forEach((row) => { + row.addEventListener('click', (event) => { + const targetLink = event.target.closest('a'); + if (targetLink) { + return true; + } + const link = row.querySelector('.site-title a'); + if (link) { + window.location = link.href; + } + }); + }); +})() \ No newline at end of file diff --git a/theme/assets/blocks/src/core-query.css b/theme/assets/blocks/src/core-query.css index 5239f204..711e8d1c 100644 --- a/theme/assets/blocks/src/core-query.css +++ b/theme/assets/blocks/src/core-query.css @@ -1,13 +1,19 @@ & { &.wpcloud-site-list--sidebar { - max-width: 400px;; + max-width: 400px; + .wp-block-wpcloud-site-card + .wp-block-wpcloud-site-card { + border-top: 1px solid var(--wp--preset--color--border-primary); + } .wp-block-wpcloud-site-card { margin: 0; padding: 11px 16px; - border-bottom: 1px solid var(--wp--preset--color--border-primary); + &.is-current { background-color: var(--wp--preset--color--background-secondary); } + &:hover { + background-color: var(--wp--preset--color--background-secondary); + } } } } \ No newline at end of file diff --git a/theme/assets/blocks/src/wpcloud-site-card.css b/theme/assets/blocks/src/wpcloud-site-card.css index f1e74b95..c2efc64a 100644 --- a/theme/assets/blocks/src/wpcloud-site-card.css +++ b/theme/assets/blocks/src/wpcloud-site-card.css @@ -36,7 +36,7 @@ line-height: 10px; font-weight: 400; &:hover { - filter: brightness(80%); + color: var(--wp--preset--color--accent-primary); text-decoration: none; } } diff --git a/theme/assets/blocks/src/wpcloud-site-template.css b/theme/assets/blocks/src/wpcloud-site-template.css index 2130212b..8d45bf63 100644 --- a/theme/assets/blocks/src/wpcloud-site-template.css +++ b/theme/assets/blocks/src/wpcloud-site-template.css @@ -21,10 +21,14 @@ text-align: left; } + tr { vertical-align: middle; border-bottom: 1px solid var(--wp--preset--color-border-primary); - &:hover { + td:first-child, th { + padding-left: 0.5rem; + } + &:not(thead tr):hover { background-color: var(--wp--preset--color--background-secondary); } } diff --git a/theme/theme.json b/theme/theme.json index b4d3de79..491b70f2 100644 --- a/theme/theme.json +++ b/theme/theme.json @@ -246,7 +246,7 @@ }, "blocks": { "core/query": { - "css": "&.wpcloud-site-list--sidebar {\n\tmax-width: 400px;\n};\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card {\n\tmargin: 0;\n\tpadding: 11px 16px;\n\tborder-bottom: 1px solid var(--wp--preset--color--border-primary);\n};\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card.is-current {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}" + "css": "&.wpcloud-site-list--sidebar {\n\tmax-width: 400px;\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card + .wp-block-wpcloud-site-card {\n\tborder-top: 1px solid var(--wp--preset--color--border-primary);\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card {\n\tmargin: 0;\n\tpadding: 11px 16px;\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card.is-current {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card:hover {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}" }, "wpcloud/button": { "color": { @@ -313,7 +313,7 @@ "top": "var(--wp--preset--spacing--30)" } }, - "css": "& {\n\tdisplay: grid;\n\tgrid-template-columns: 40px 1fr;\n\tgrid-template-rows: repeat(2, 20px);\n\tgrid-column-gap: 12px;\n\tmargin: 7px 0;\n\n\n}\n\n& img {\n\tgrid-area: 1 / 1 / 3 / 2;\n\tborder-radius: 4px;\n}\n\n& h2 {\n\tline-height: 0;\n}\n\n& h3 {\n\tline-height: 0;\n}\n\n& h2 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 1 / 2 / 2 / 3;\n}\n\n& h3 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 2 / 2 / 3 / 3;\n}\n\n& .site-title {\n\tmargin-top: 5px;\n}\n\n& .site-title a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n\tcolor: var(--wp--preset--color--foreground-primary);\n\tline-height: 10px;\n\tfont-weight: 400;\n}\n\n& .site-title a:hover {\n\tfilter: brightness(80%);\n\ttext-decoration: none;\n}\n\n& .site-url {\n\tmargin-top: 5px;\n}\n\n& .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-small);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tfont-weight: 400;\n\tline-height: 10px;\n}\n\n& .site-url a:hover {\n\tcolor: var(--wp--preset--color--accent-primary);\n\ttext-decoration: none;\n}\n\n&.wpcloud-site-card--primary {\n\n\tgrid-template-columns: 56px 1fr;\n\tgrid-template-rows: repeat(2, 28px);\n}\n\n&.wpcloud-site-card--primary h2 {\n\talign-self: center;\n}\n\n&.wpcloud-site-card--primary img {\n\twidth: 56px;\n}\n\n&.wpcloud-site-card--primary .site-title a {\n\tfont-size: var(--wp--preset--font-size--title-medium);\n\tfont-weight: 500;\n}\n\n&.wpcloud-site-card--primary .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n}\n" + "css": "& {\n\tdisplay: grid;\n\tgrid-template-columns: 40px 1fr;\n\tgrid-template-rows: repeat(2, 20px);\n\tgrid-column-gap: 12px;\n\tmargin: 7px 0;\n\n\n}\n\n& img {\n\tgrid-area: 1 / 1 / 3 / 2;\n\tborder-radius: 4px;\n}\n\n& h2 {\n\tline-height: 0;\n}\n\n& h3 {\n\tline-height: 0;\n}\n\n& h2 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 1 / 2 / 2 / 3;\n}\n\n& h3 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 2 / 2 / 3 / 3;\n}\n\n& .site-title {\n\tmargin-top: 5px;\n}\n\n& .site-title a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n\tcolor: var(--wp--preset--color--foreground-primary);\n\tline-height: 10px;\n\tfont-weight: 400;\n}\n\n& .site-title a:hover {\n\tcolor: var(--wp--preset--color--accent-primary);\n\ttext-decoration: none;\n}\n\n& .site-url {\n\tmargin-top: 5px;\n}\n\n& .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-small);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tfont-weight: 400;\n\tline-height: 10px;\n}\n\n& .site-url a:hover {\n\tcolor: var(--wp--preset--color--accent-primary);\n\ttext-decoration: none;\n}\n\n&.wpcloud-site-card--primary {\n\n\tgrid-template-columns: 56px 1fr;\n\tgrid-template-rows: repeat(2, 28px);\n}\n\n&.wpcloud-site-card--primary h2 {\n\talign-self: center;\n}\n\n&.wpcloud-site-card--primary img {\n\twidth: 56px;\n}\n\n&.wpcloud-site-card--primary .site-title a {\n\tfont-size: var(--wp--preset--font-size--title-medium);\n\tfont-weight: 500;\n}\n\n&.wpcloud-site-card--primary .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n}\n" }, "wpcloud/site-detail": { "color": { @@ -374,7 +374,7 @@ "color": { "text": "var(--wp--preset--color--foreground-primary)" }, - "css": "& {\n\twidth: 100%;\n\tborder-collapse: collapse;\n}\n\n& th {\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tborder: none;\n\tpadding-top: 13px;\n\tpadding-bottom: 18px;\n}\n\n& th h2 {\n\tfont-weight: 400;\n\tfont-size: var(--wp--preset--font-size--small-caps);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\ttext-transform: uppercase;\n}\n\n& th svg {\n\tfill: currentColor;\n}\n\n& th {\n\ttext-align: left;\n}\n\n& td {\n\ttext-align: left;\n}\n\n& tr {\n\tvertical-align: middle;\n\tborder-bottom: 1px solid var(--wp--preset--color-border-primary);\n}\n\n& tr:hover {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}\n\n& .wpcloud-block-site-detail {\n\tmargin-top: 0;\n}\n\n& .wp-block-post-author__content a:hover {\n\ttext-decoration: none;\n\tcolor: var(--wp--preset--color--accent-primary);\n}" + "css": "& {\n\twidth: 100%;\n\tborder-collapse: collapse;\n}\n\n& th {\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tborder: none;\n\tpadding-top: 13px;\n\tpadding-bottom: 18px;\n}\n\n& th h2 {\n\tfont-weight: 400;\n\tfont-size: var(--wp--preset--font-size--small-caps);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\ttext-transform: uppercase;\n}\n\n& th svg {\n\tfill: currentColor;\n}\n\n& th {\n\ttext-align: left;\n}\n\n& td {\n\ttext-align: left;\n}\n\n& tr {\n\tvertical-align: middle;\n\tborder-bottom: 1px solid var(--wp--preset--color-border-primary);\n}\n\n& tr td:first-child {\n\tpadding-left: 0.5rem;\n}\n\n& tr th {\n\tpadding-left: 0.5rem;\n}\n\n& tr:not(thead tr):hover {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}\n\n& .wpcloud-block-site-detail {\n\tmargin-top: 0;\n}\n\n& .wp-block-post-author__content a:hover {\n\ttext-decoration: none;\n\tcolor: var(--wp--preset--color--accent-primary);\n}" }, "wpcloud/ssh-user-list": { "color": {