Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment with dynamic blocks #16

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Experiment with dynamic blocks #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
dfbb4b8
refactor: breakup methods, add lint
NazimHAli Dec 26, 2021
64024c2
refactor: remove unused props, methods
NazimHAli Dec 26, 2021
8746513
style: delete edit styling
NazimHAli Dec 27, 2021
95155e1
refactor: move settings to its own panel
NazimHAli Dec 28, 2021
19bde6d
refactor: extract service call, formatting, rendering
NazimHAli Dec 28, 2021
fc6b904
refactor: update settings header
NazimHAli Dec 28, 2021
747e64b
refactor: check timinings exist
NazimHAli Dec 28, 2021
c351c00
refactor: test dynamic blocks
NazimHAli Dec 29, 2021
673924f
Fix merge conflicts
NazimHAli Jul 3, 2024
050da9e
fix: yarn.lock
NazimHAli Jul 3, 2024
a20bda8
chore: upgrade packages
NazimHAli Jul 3, 2024
9eb48a0
style: lint
NazimHAli Jul 3, 2024
0e3a346
chore: upgrade packages
NazimHAli Jul 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,18 @@
"@semantic-release/release-notes-generator": "^14.0.1",
"@types/jest": "^29.5.12",
"@types/node": "^20.14.9",
"@typescript-eslint/eslint-plugin": "^7.14.1",
"@typescript-eslint/parser": "^7.14.1",
"@typescript-eslint/eslint-plugin": "^7.15.0",
"@typescript-eslint/parser": "^7.15.0",
"commitizen": "^4.3.0",
"cz-conventional-changelog": "3.3.0",
"esbuild": "^0.21.5",
"eslint": "^8.0.0",
"esbuild": "^0.23.0",
"eslint": "^9.6.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^28.6.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-simple-import-sort": "^12.1.0",
"eslint-plugin-simple-import-sort": "^12.1.1",
"husky": "^9.0.11",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
Expand All @@ -74,8 +74,8 @@
"ts-jest": "^29.1.5",
"ts-node": "^10.9.2",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.5.2",
"vite": "^5.3.2",
"typescript": "^5.5.3",
"vite": "^5.3.3",
"vite-plugin-dts": "^3.9.1"
},
"packageManager": "[email protected]",
Expand Down
8 changes: 4 additions & 4 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@
"devDependencies": {
"@fullhuman/postcss-purgecss": "^6.0.0",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"@testing-library/dom": "^10.2.0",
"@testing-library/dom": "^10.3.0",
"@tsconfig/svelte": "^5.0.4",
"@types/cssnano": "^5.1.0",
"@types/postcss-import": "^14.0.3",
"@types/tailwindcss": "^3.1.0",
"animate.css": "^4.1.1",
"autoprefixer": "^10.4.19",
"cssnano": "^7.0.3",
"esbuild": "^0.21.5",
"esbuild": "^0.23.0",
"postcss": "^8.4.39",
"postcss-import": "^16.1.0",
"postcss-nested": "^6.0.1",
Expand All @@ -51,8 +51,8 @@
"svelte-preprocess": "^6.0.1",
"tailwindcss": "^3.4.4",
"tslib": "^2.6.3",
"typescript": "^5.5.2",
"vite": "^5.3.2",
"typescript": "^5.5.3",
"vite": "^5.3.3",
"vite-plugin-dts": "^3.9.1"
},
"peerDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/js-lib/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@
"devDependencies": {
"@types/jest": "^29.5.12",
"@types/node": "^20.14.9",
"esbuild": "^0.21.5",
"esbuild": "^0.23.0",
"jest": "^29.7.0",
"ts-jest": "^29.1.5",
"ts-node": "^10.9.2",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.5.2"
"typescript": "^5.5.3"
}
}
3 changes: 2 additions & 1 deletion packages/wordpress-plugin/.prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"singleQuote": false,
"trailingComma": "es5",
"arrowParens": "always"
"arrowParens": "always",
"printWidth": 140
}
8 changes: 1 addition & 7 deletions packages/wordpress-plugin/.wp-env.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
{
"plugins": ["."],
"mappings": {
"wp-content/plugins/fakerpress": "~/source/shared-wp-resources/plugins/fakerpress",
"wp-content/plugins/query-monitor": "~/source/shared-wp-resources/plugins/query-monitor"
"wp-content/plugins/fakerpress": "~/source/shared-wp-resources/plugins/fakerpress"
},
"phpVersion": "7.3",
"port": 1000,
"testsPort": 1001,
"config": {
"QM_DARK_MODE": true,
"QM_HIDE_CORE_ACTIONS": true,
"SCRIPT_DEBUG": true,
"WP_DEBUG": true,
"WP_DEBUG_DISPLAY": true
}
}
76 changes: 33 additions & 43 deletions packages/wordpress-plugin/beautiful-salat.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<?php

/**
* Plugin Name: Beautiful Salat
* Description: Simple, beautiful, lightweight prayer times plugin using Gutenberg blocks for easy editing.
Expand All @@ -10,54 +11,43 @@
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: beautiful-salat
*
* @package fit
*/

/**
* Helpers to generate clent side HTML
*/
require __DIR__ . '/php-require/html-helpers.php';

/**
* Salat times methods to get, update, and set data
*/
require __DIR__ . '/php-require/salat-times.php';

/**
* Add editor stylesheet
* @package fit
*/
function enqueue_custom_editor_styles() {
wp_enqueue_style( 'beautiful-salat-panels', plugin_dir_url( __FILE__ ) . '/build/index.css', array(), true );

function gutenberg_examples_dynamic_render_callback($block_attributes, $content)
{
$recent_posts = wp_get_recent_posts(array(
'numberposts' => 1,
'post_status' => 'publish',
));
if (count($recent_posts) === 0) {
return 'No posts';
}
$post = $recent_posts[0];
$post_id = $post['ID'];
return sprintf(
'<a class="wp-block-my-plugin-latest-post" href="%1$s">%2$s</a>',
esc_url(get_permalink($post_id)),
esc_html(get_the_title($post_id))
);
}
add_action( 'admin_enqueue_scripts', 'enqueue_custom_editor_styles' );

/**
* Callback required for dynamic blocks
* 1- Checks DB if need to request new prayer times
* 2- Updates the stored values if needed
* 3- Generates HTML for the client
*
* @param object $block_attributes passed down attributes.
* @param object $content dynamic block content.
*/
function prayer_timings_call_back( $block_attributes, $content ) {
update_salat_times( $block_attributes['salatSettings'] );
$salat_times = get_salat_timings();
function gutenberg_examples_dynamic()
{
// automatically load dependencies and version
$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');

return salat_html_table( $salat_times->timings, $block_attributes );
}

/**
* Register dynamic block for server side rendering
*/
function register_dynamic_block() {
register_block_type(
__DIR__,
array(
'render_callback' => 'prayer_timings_call_back',
)
wp_register_script(
'gutenberg-examples-dynamic',
plugins_url('build/index.js', __FILE__),
$asset_file['dependencies'],
$asset_file['version']
);

register_block_type('fit/beautiful-salat', array(
'api_version' => 2,
'editor_script' => 'gutenberg-examples-dynamic',
'render_callback' => 'gutenberg_examples_dynamic_render_callback'
));
}
add_action( 'init', 'register_dynamic_block' );
add_action('init', 'gutenberg_examples_dynamic');
57 changes: 23 additions & 34 deletions packages/wordpress-plugin/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,48 @@
"version": "0.1.0",
"title": "Beautiful Salat",
"category": "widgets",
"description": "Simple, beautiful, lightweight prayer times plugin using Gutenberg blocks for easy editing.",
"icon": "smiley",
"description": "Prayer times with unlimited color combinations, offering daily, weekly, monthly, and yearly tables.",
"supports": {
"html": true
},
"attributes": {
"showHeader": {
"type": "boolean",
"default": true
},
"headerTitle": {
"title": {
"type": "string",
"default": "Prayer Times"
},
"headerTitleColor": {
"maxWidth": {
"type": "number"
},
"backgroundColor": {
"type": "string"
},
"headerBackgroundColor": {
"titleTextColor": {
"type": "string"
},
"showHeader": {
"type": "boolean",
"default": true
},
"salatSettings": {
"type": "object",
"default": {
"method": 4,
"country": "SA",
"city": "Mecca",
"method": "MWL",
"country": "US",
"city": "Los Angeles",
"timings": {
"Fajr": 0
}
}
},
"showAllStyling": {
"type": "boolean",
"default": true
},
"showBoxShadow": {
"type": "boolean",
"default": true
},
"showHeaderStyle": {
"type": "boolean",
"default": true
},
"showContainerStyle": {
"type": "boolean",
"default": true
},
"maxWidth": {
"type": "string",
"default": "20rem"
}
},
"example": {
"attributes": {
"title": "Prayer Times"
}
},
"textdomain": "beautiful-salat",
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/style-index.css",
"style": "file:./build/style-index.css"
"editorScript": "file:build/index.js",
"editorStyle": "file:build/style-index.css",
"style": "file:build/style-index.css"
}
12 changes: 2 additions & 10 deletions packages/wordpress-plugin/src/admin/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import {
BlockControls,
InspectorControls,
useBlockProps,
} from "@wordpress/block-editor";
import {
ToolbarGroup,
ToolbarItem,
__experimentalUnitControl as UnitControl,
} from "@wordpress/components";
import { BlockControls, InspectorControls, useBlockProps } from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarItem, __experimentalUnitControl as UnitControl } from "@wordpress/components";
import { useEffect } from "@wordpress/element";
import { prayerTable } from "../frontend/prayerTable";
import { panelHeaderSettings } from "./panelHeaderSettings";
Expand Down
15 changes: 3 additions & 12 deletions packages/wordpress-plugin/src/admin/panelHeaderSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@ function panelHeaderSettings(props) {

return (
<PanelBody title={__("Header")} initialOpen={false}>
<ToggleControl
label="Toggle Header"
checked={props.attributes.showHeader}
onChange={onChangeShowHeader}
/>
<ToggleControl label="Toggle Header" checked={props.attributes.showHeader} onChange={onChangeShowHeader} />

<TextControl
label={__("Title")}
Expand All @@ -24,17 +20,12 @@ function panelHeaderSettings(props) {
/>

<p>{__("Title Color")}</p>
<ColorPalette
value={props.attributes.headerTitleColor}
onChange={(newValue) => setAttributes({ headerTitleColor: newValue })}
/>
<ColorPalette value={props.attributes.headerTitleColor} onChange={(newValue) => setAttributes({ headerTitleColor: newValue })} />

<p>{__("Background Color")}</p>
<ColorPalette
value={props.attributes.headerBackgroundColor}
onChange={(newValue) =>
setAttributes({ headerBackgroundColor: newValue })
}
onChange={(newValue) => setAttributes({ headerBackgroundColor: newValue })}
/>
</PanelBody>
);
Expand Down
18 changes: 3 additions & 15 deletions packages/wordpress-plugin/src/admin/panelSalatSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,28 +48,16 @@ function panelSalatSettings(props) {
label="Selected Calculation Method"
help="Based on country and city"
onChange={onCountryChange}
value={
prayerMethods.filter(
(m) => m.value === props.attributes.salatSettings.method
)[0]["label"]
}
value={prayerMethods.filter((m) => m.value === props.attributes.salatSettings.method)[0]["label"]}
/>
<TextControl
label="Country name or code"
help="Example: SA or Saudi Arabia"
onChange={onCountryChange}
value={props.attributes.salatSettings.country}
/>
<TextControl
label="City"
onChange={onCityChange}
value={props.attributes.salatSettings.city}
/>
<button
className="beautiful-salat-submit-btn"
disabled={disableButton}
onClick={handleOnSubmit}
>
<TextControl label="City" onChange={onCityChange} value={props.attributes.salatSettings.city} />
<button className="beautiful-salat-submit-btn" disabled={disableButton} onClick={handleOnSubmit}>
Save settings
</button>
</PanelBody>
Expand Down
7 changes: 1 addition & 6 deletions packages/wordpress-plugin/src/admin/salatMatIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
const SalatMatIcon = () => (
<svg
height={512}
viewBox="0 0 135.467 135.467"
width={512}
xmlns="http://www.w3.org/2000/svg"
>
<svg height={512} viewBox="0 0 135.467 135.467" width={512} xmlns="http://www.w3.org/2000/svg">
<path
d="M30.553 0a2.882 2.882 0 0 0-2.883 2.88v9.033a2.882 2.882 0 0 0 0 .096 2.883 2.883 0 0 0 0 .096v111.068a2.883 2.883 0 0 0 .01.191 2.882 2.882 0 0 0-.01.19v9.03a2.882 2.882 0 0 0 2.883 2.883 2.882 2.882 0 0 0 2.883-2.883v-6.528h9.107v6.528a2.882 2.882 0 0 0 2.883 2.883 2.882 2.882 0 0 0 2.881-2.883v-6.528h9.109v6.528a2.882 2.882 0 0 0 2.88 2.883 2.882 2.882 0 0 0 2.884-2.883v-6.528h9.107v6.528a2.882 2.882 0 0 0 2.883 2.883 2.882 2.882 0 0 0 2.883-2.883v-6.528h9.107v6.528a2.882 2.882 0 0 0 2.883 2.883 2.882 2.882 0 0 0 2.88-2.883v-6.528h9.11v6.528a2.882 2.882 0 0 0 2.88 2.883 2.882 2.882 0 0 0 2.884-2.883v-9.03a2.882 2.882 0 0 0-.011-.19 2.883 2.883 0 0 0 .01-.191V12.105a2.883 2.883 0 0 0 0-.098 2.882 2.882 0 0 0 0-.094V2.88A2.882 2.882 0 0 0 104.914 0a2.882 2.882 0 0 0-2.88 2.88v6.344h-9.11V2.88A2.882 2.882 0 0 0 90.044 0a2.882 2.882 0 0 0-2.883 2.88v6.344h-9.107V2.88A2.882 2.882 0 0 0 75.17 0a2.882 2.882 0 0 0-2.883 2.88v6.344H63.18V2.88A2.882 2.882 0 0 0 60.297 0a2.882 2.882 0 0 0-2.881 2.88v6.344h-9.109V2.88A2.882 2.882 0 0 0 45.426 0a2.882 2.882 0 0 0-2.883 2.88v6.344h-9.107V2.88A2.882 2.882 0 0 0 30.553 0Zm2.881 14.988h68.596v105.304H33.434Zm34.257 13.019a2.883 2.883 0 0 0-.017 0 2.883 2.883 0 0 0-1.783.664c-4.015 3.335-8.001 5.01-11.564 6.556-3.563 1.545-7.178 2.984-8.835 6.76a2.883 2.883 0 0 0-.242 1.16v61.242a2.883 2.883 0 0 0 2.883 2.883h39.202a2.883 2.883 0 0 0 2.883-2.883V42.982a2.883 2.883 0 0 0-.294-1.268c-1.795-3.66-5.384-4.996-8.928-6.513-3.544-1.517-7.477-3.186-11.398-6.51a2.883 2.883 0 0 0-1.907-.684Zm.029 6.33c4.012 2.973 7.961 4.86 11.007 6.164 3.25 1.391 5.004 2.416 5.725 3.482v57.525h-33.44V44.065c.66-1.115 2.337-2.131 5.606-3.548 3.035-1.317 7.022-3.205 11.102-6.18z"
style={{
Expand Down
Loading
Loading